@salt-ds/core 1.19.0 → 1.21.0

package/dist-types/dropdown/Dropdown.d.ts

@@ -0,0 +1,99 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { ListControlProps } from "../list-control/ListControlState";
+import { ValidationStatus } from "../status-indicator";
+export declare type DropdownProps<Item = string> = {
+    /**
+     * If `true`, the dropdown will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the dropdown will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * The options to display in the dropdown.
+     */
+    children?: ReactNode;
+    /**
+     * The marker to use in an empty read only dropdown.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string;
+    /**
+     * If `true`, the dropdown will be multiselect.
+     */
+    multiselect?: boolean;
+    /**
+     * The text shown when the dropdown has no value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the dropdown will be required.
+     */
+    required?: boolean;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
+     */
+    value?: string;
+    /**
+     * Validation status, one of "error" | "warning" | "success".
+     */
+    validationStatus?: Exclude<ValidationStatus, "info">;
+} & Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue"> & ListControlProps<Item>;
+export declare const Dropdown: <Item = string>(props: {
+    /**
+     * If `true`, the dropdown will be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `true`, the dropdown will be read-only.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * The options to display in the dropdown.
+     */
+    children?: ReactNode;
+    /**
+     * The marker to use in an empty read only dropdown.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string | undefined;
+    /**
+     * If `true`, the dropdown will be multiselect.
+     */
+    multiselect?: boolean | undefined;
+    /**
+     * The text shown when the dropdown has no value.
+     */
+    placeholder?: string | undefined;
+    /**
+     * If `true`, the dropdown will be required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
+     */
+    value?: string | undefined;
+    /**
+     * Validation status, one of "error" | "warning" | "success".
+     */
+    validationStatus?: "error" | "warning" | "success" | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "defaultValue" | "value"> & ListControlProps<Item> & {
+    ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1 @@
+export * from "./Dropdown";

package/dist-types/index.d.ts

@@ -9,7 +9,10 @@ export * from "./breakpoints";
 export * from "./button";
 export * from "./card";
 export * from "./checkbox";
+export * from "./combo-box";
+export * from "./dialog";
 export * from "./drawer";
+export * from "./dropdown";
 export * from "./file-drop-zone";
 export * from "./flex-item";
 export * from "./flex-layout";
@@ -21,8 +24,10 @@ export * from "./grid-layout";
 export * from "./input";
 export * from "./link";
 export * from "./link-card";
+export { useListControlContext } from "./list-control";
 export * from "./multiline-input";
 export * from "./navigation-item";
+export * from "./option";
 export * from "./pagination";
 export * from "./panel";
 export * from "./pill";

package/dist-types/list-control/ListControlContext.d.ts

@@ -0,0 +1,21 @@
+import { SyntheticEvent } from "react";
+export interface OptionValue<Item> {
+    id: string;
+    disabled: boolean;
+    value: Item;
+}
+export declare type OpenChangeReason = "input" | "manual";
+export interface ListControlContextValue<Item> {
+    openState: boolean;
+    setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;
+    register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
+    selectedState: unknown[];
+    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    activeState?: OptionValue<Item>;
+    setActive: (option: OptionValue<Item>) => void;
+    multiselect: boolean;
+    focusVisibleState: boolean;
+    valueToString: (item: Item) => string;
+}
+export declare const ListControlContext: import("react").Context<ListControlContextValue<any>>;
+export declare function useListControlContext<Item>(): ListControlContextValue<Item>;

package/dist-types/list-control/ListControlState.d.ts

@@ -0,0 +1,70 @@
+import { SyntheticEvent } from "react";
+import { OptionValue } from "./ListControlContext";
+export declare type OpenChangeReason = "input" | "manual";
+export declare type ListControlProps<Item> = {
+    /**
+     * If true, the control will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the control will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the list will be open by default.
+     */
+    defaultOpen?: boolean;
+    /**
+     * If true, the list will be open. Useful for controlling the component.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     */
+    onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;
+    /**
+     * The default selected options. If this is provided `defaultValue` should be provided as well.
+     */
+    defaultSelected?: Item[];
+    /**
+     * The selected options. The component will be controlled if this prop is provided.
+     */
+    selected?: Item[];
+    /**
+     * Callback fired when the selected options change.
+     */
+    onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;
+    /**
+     * If true, multiple options can be selected.
+     */
+    multiselect?: boolean;
+    /**
+     * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.
+     */
+    valueToString?: (item: Item) => string;
+};
+export declare function defaultValueToString<Item>(item: Item): string;
+export declare function useListControl<Item>(props: ListControlProps<Item>): {
+    multiselect: boolean;
+    openState: boolean;
+    setOpen: (newOpen: boolean, reason?: OpenChangeReason | undefined, key?: string | undefined) => void;
+    openKey: import("react").MutableRefObject<string | undefined>;
+    activeState: OptionValue<Item> | undefined;
+    setActive: (option?: OptionValue<Item> | undefined) => void;
+    selectedState: Item[];
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
+    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    clear: (event: SyntheticEvent) => void;
+    focusVisibleState: boolean;
+    setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    focusedState: boolean;
+    setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    listRef: import("react").RefObject<HTMLDivElement>;
+    options: HTMLElement[];
+    register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
+    getOptionAtIndex: (index: number) => OptionValue<Item>;
+    getIndexOfOption: (option: OptionValue<Item>) => number;
+    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => OptionValue<Item>[];
+    getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
+    valueToString: (item: Item) => string;
+};

package/dist-types/list-control/index.d.ts

@@ -0,0 +1 @@
+export { useListControlContext } from "./ListControlContext";

package/dist-types/option/Option.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface OptionProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the option will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the option.
+     */
+    value: unknown;
+    /**
+     * The content of the option.
+     */
+    children?: ReactNode;
+}
+export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/OptionGroup.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface OptionGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The label of the option group.
+     */
+    label?: string;
+    /**
+     * Options to be rendered inside the option group.
+     */
+    children?: ReactNode;
+}
+export declare const OptionGroup: import("react").ForwardRefExoticComponent<OptionGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/OptionList.d.ts

@@ -0,0 +1,5 @@
+import { FloatingComponentProps } from "../utils";
+export interface OptionListProps extends FloatingComponentProps {
+    collapsed?: boolean;
+}
+export declare const OptionList: import("react").ForwardRefExoticComponent<OptionListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/OptionListBase.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface OptionListBaseProps extends ComponentPropsWithoutRef<"div"> {
+}
+export declare const OptionListBase: import("react").ForwardRefExoticComponent<OptionListBaseProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./Option";
+export * from "./OptionGroup";

package/dist-types/pill-input/PillInput.d.ts

@@ -0,0 +1,48 @@
+import { SyntheticEvent, ComponentPropsWithoutRef, InputHTMLAttributes, ReactNode, Ref } from "react";
+export interface PillInputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
+    /**
+     * The marker to use in an empty read only Input.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string;
+    /**
+     * End adornment component
+     */
+    endAdornment?: ReactNode;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Optional ref for the input component
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * If `true`, the component is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * The tokens to display in the input.
+     */
+    pills?: string[];
+    onPillRemove?: (event: SyntheticEvent, index: number) => void;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Alignment of text within container. Defaults to "left"
+     */
+    textAlign?: "left" | "center" | "right";
+    /**
+     * Validation status.
+     */
+    validationStatus?: "error" | "warning" | "success";
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+    hidePillClose?: boolean;
+    truncate?: boolean;
+}
+export declare const PillInput: import("react").ForwardRefExoticComponent<PillInputProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export * from "./PillInput";

package/dist-types/pill-input/useTruncatePills.d.ts

@@ -0,0 +1,8 @@
+export declare function useTruncatePills({ pills, enable, }: {
+    pills: string[];
+    enable?: boolean;
+}): {
+    pillListRef: import("react").RefObject<HTMLDivElement>;
+    visibleCount: number;
+    visiblePills: string[];
+};

package/dist-types/progress/CircularProgress/CircularProgress.d.ts

@@ -1,5 +1,10 @@
 import { ComponentPropsWithoutRef } from "react";
 export interface CircularProgressProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The value of the buffer indicator.
+     * Value between 0 and max.
+     */
+    bufferValue?: number;
     /**
      * Whether to hide the text label within the progress. Defaults to `false`.
      */

package/dist-types/progress/LinearProgress/LinearProgress.d.ts

@@ -1,5 +1,10 @@
 import { ComponentPropsWithoutRef } from "react";
 export interface LinearProgressProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The value of the buffer indicator.
+     * Value between 0 and max.
+     */
+    bufferValue?: number;
     /**
      * Whether to hide the text label within the progress. Defaults to `false`.
      */

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

@@ -18,3 +18,6 @@ export * from "./useIsomorphicLayoutEffect";
 export * from "./usePrevious";
 export * from "./useResponsiveProp";
 export * from "./mergeProps";
+export * from "./useValueEffect";
+export * from "./useResizeObserver";
+export * from "./useEventCallback";

package/dist-types/utils/ownerWindow.d.ts

@@ -1 +1 @@
-export declare function ownerWindow(node: Node | null | undefined): Window;
+export declare function ownerWindow(node: Node | null | undefined): Window & typeof globalThis;

package/dist-types/utils/useEventCallback.d.ts

@@ -0,0 +1,4 @@
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;

package/dist-types/utils/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+export interface UseResizeObserverProps {
+    ref: RefObject<HTMLElement>;
+    onResize: () => void;
+}
+export declare function useResizeObserver({ ref, onResize }: UseResizeObserverProps): void;

package/dist-types/utils/useValueEffect.d.ts

@@ -0,0 +1,4 @@
+import { Dispatch } from "react";
+declare type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
+export declare function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",