@salt-ds/lab 1.0.0-alpha.36 → 1.0.0-alpha.38

package/dist-es/utils/useValueEffect.js

@@ -1,36 +0,0 @@
-import { useState, useRef } from 'react';
-import { useIsomorphicLayoutEffect } from '@salt-ds/core';
-import { useEventCallback } from './useEventCallback.js';
-
-function useValueEffect(defaultValue) {
-  let [value, setValue] = useState(defaultValue);
-  let effect = useRef(null);
-  let nextRef = useEventCallback(() => {
-    if (!effect.current) {
-      return;
-    }
-    let newValue = effect.current.next();
-    if (newValue.done) {
-      effect.current = null;
-      return;
-    }
-    if (value === newValue.value) {
-      nextRef();
-    } else {
-      setValue(newValue.value);
-    }
-  });
-  useIsomorphicLayoutEffect(() => {
-    if (effect.current) {
-      nextRef();
-    }
-  });
-  let queue = useEventCallback((fn) => {
-    effect.current = fn(value);
-    nextRef();
-  });
-  return [value, queue];
-}
-
-export { useValueEffect };
-//# sourceMappingURL=useValueEffect.js.map

package/dist-es/utils/useValueEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useValueEffect.js","sources":["../src/utils/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Dispatch, MutableRefObject, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useEventCallback } from \"./useEventCallback\";\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(\n  defaultValue: S | (() => S)\n): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  let effect: MutableRefObject<Generator<S> | null> =\n    useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useEventCallback(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (value === newValue.value) {\n      nextRef();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef();\n    }\n  });\n\n  let queue: Dispatch<SetValueAction<S>> = useEventCallback((fn) => {\n    effect.current = fn(value);\n    nextRef();\n  });\n\n  return [value, queue];\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,eACd,YACkC,EAAA;AAClC,EAAA,IAAI,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AAC7C,EAAI,IAAA,MAAA,GACF,OAA4B,IAAI,CAAA,CAAA;AAIlC,EAAI,IAAA,OAAA,GAAU,iBAAiB,MAAM;AACnC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,QAAA,GAAW,MAAO,CAAA,OAAA,CAAQ,IAAK,EAAA,CAAA;AAGnC,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAA,MAAA,CAAO,OAAU,GAAA,IAAA,CAAA;AACjB,MAAA,OAAA;AAAA,KACF;AAKA,IAAI,IAAA,KAAA,KAAU,SAAS,KAAO,EAAA;AAC5B,MAAQ,OAAA,EAAA,CAAA;AAAA,KACH,MAAA;AACL,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AAAA,KACzB;AAAA,GACD,CAAA,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAE9B,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAQ,OAAA,EAAA,CAAA;AAAA,KACV;AAAA,GACD,CAAA,CAAA;AAED,EAAI,IAAA,KAAA,GAAqC,gBAAiB,CAAA,CAAC,EAAO,KAAA;AAChE,IAAO,MAAA,CAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA;AACzB,IAAQ,OAAA,EAAA,CAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAO,OAAA,CAAC,OAAO,KAAK,CAAA,CAAA;AACtB;;;;"}

package/dist-types/combo-box-next/ComboBoxNext.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode, Ref } from "react";
-import { UseComboBoxNextProps } from "./useComboBoxNext";
-import { PillInputProps } from "../pill-input";
-export declare type ComboBoxNextProps<Item = string> = {
-    /**
-     * The options to display in the combo box.
-     */
-    children?: ReactNode;
-} & UseComboBoxNextProps<Item> & PillInputProps;
-export declare const ComboBoxNext: <Item = string>(props: {
-    /**
-     * The options to display in the combo box.
-     */
-    children?: ReactNode;
-} & import("../list-control/ListControlState").ListControlProps<Item> & Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultValue" | "value"> & PillInputProps & {
-    ref?: Ref<HTMLDivElement> | undefined;
-}) => JSX.Element;

package/dist-types/combo-box-next/index.d.ts

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

package/dist-types/combo-box-next/useComboBoxNext.d.ts

@@ -1,30 +0,0 @@
-import { ListControlProps } from "../list-control/ListControlState";
-import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
-import { OptionValue } from "../list-control/ListControlContext";
-export declare type UseComboBoxNextProps<Item> = ListControlProps<Item> & Pick<ComponentPropsWithoutRef<"input">, "value" | "defaultValue">;
-export declare function useComboBoxNext<Item>(props: UseComboBoxNextProps<Item>): {
-    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
-    valueState: string | number | readonly string[] | undefined;
-    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
-    multiselect: boolean;
-    openState: boolean;
-    setOpen: (newOpen: boolean, reason?: import("../list-control/ListControlState").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[]>>;
-    clear: (event: SyntheticEvent<Element, Event>) => 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/dropdown-next/DropdownNext.d.ts

@@ -1,99 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
-import { ListControlProps } from "../list-control/ListControlState";
-import { ValidationStatus } from "@salt-ds/core";
-export declare type DropdownNextProps<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 DropdownNext: <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-next/index.d.ts

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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/option/Option.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

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

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

@@ -1,48 +0,0 @@
-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?: any[];
-    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

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

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

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

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

@@ -1,4 +0,0 @@
-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 {};