@salt-ds/core 1.20.0 → 1.22.0

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/text/Code.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from "./Text";
+export declare const Code: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"code">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/text/Text.d.ts

@@ -12,7 +12,7 @@ export declare type TextProps<T extends ElementType> = PolymorphicComponentPropW
     /**
      * Match styling to another text component's style
      */
-    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "display1" | "display2" | "display3" | "notation" | "action";
+    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "display1" | "display2" | "display3" | "notation" | "action" | "code";
     /**
      * Change text color palette
      */

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

@@ -1,6 +1,7 @@
 export * from "./Text";
+export * from "./Code";
 export * from "./Display";
 export * from "./Headings";
 export * from "./Label";
-export * from "./TextNotation";
 export * from "./TextAction";
+export * from "./TextNotation";

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.20.0",
+  "version": "1.22.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",