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

package/dist-es/pill-input/useTruncatePills.js

@@ -0,0 +1,81 @@
+import { useRef, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useValueEffect } from '../utils/useValueEffect.js';
+import { useWindow } from '@salt-ds/window';
+import 'react/jsx-runtime';
+import { useResizeObserver } from '../responsive/useResizeObserver.js';
+
+function useTruncatePills({
+  pills,
+  enable
+}) {
+  const pillListRef = useRef(null);
+  const [{ visibleCount }, setVisibleItems] = useValueEffect({
+    visibleCount: pills.length
+  });
+  const targetWindow = useWindow();
+  const updateOverflow = useCallback(() => {
+    if (!enable) {
+      return;
+    }
+    const computeVisible = (visibleCount2) => {
+      const pillList = pillListRef.current;
+      if (pillList && targetWindow) {
+        let pillElements = Array.from(
+          pillList.querySelectorAll('[role="listitem"]')
+        );
+        const maxWidth = pillList.getBoundingClientRect().width;
+        const listGap = parseInt(targetWindow.getComputedStyle(pillList).gap);
+        let isShowingOverflow = pillList.querySelector(
+          "[data-overflowindicator]"
+        );
+        let currentSize = 0;
+        let newVisibleCount = 0;
+        if (isShowingOverflow) {
+          let pill = pillElements.pop();
+          if (pill) {
+            let pillWidth = pill.getBoundingClientRect().width;
+            currentSize += pillWidth + listGap;
+          }
+        }
+        for (let pill of pillElements) {
+          let pillWidth = pill.getBoundingClientRect().width;
+          currentSize += pillWidth + listGap;
+          if (Math.round(currentSize) <= Math.round(maxWidth)) {
+            newVisibleCount++;
+          } else {
+            break;
+          }
+        }
+        return newVisibleCount;
+      }
+      return visibleCount2;
+    };
+    setVisibleItems(function* () {
+      yield {
+        visibleCount: pills.length
+      };
+      let newVisibleCount = computeVisible(pills.length);
+      let isMeasuring = newVisibleCount < pills.length && newVisibleCount > 0;
+      yield {
+        visibleCount: newVisibleCount
+      };
+      if (isMeasuring) {
+        newVisibleCount = computeVisible(visibleCount);
+        yield {
+          visibleCount: newVisibleCount
+        };
+      }
+    });
+  }, [pills, setVisibleItems, enable, targetWindow]);
+  useIsomorphicLayoutEffect(updateOverflow, [updateOverflow, pills]);
+  useResizeObserver(pillListRef, ["width"], updateOverflow, true);
+  return {
+    pillListRef,
+    visibleCount,
+    visiblePills: enable ? pills.slice(0, visibleCount) : pills
+  };
+}
+
+export { useTruncatePills };
+//# sourceMappingURL=useTruncatePills.js.map

package/dist-es/pill-input/useTruncatePills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTruncatePills.js","sources":["../src/pill-input/useTruncatePills.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useValueEffect } from \"../utils/useValueEffect\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useResizeObserver } from \"../responsive\";\n\nexport function useTruncatePills({\n  pills,\n  enable,\n}: {\n  pills: string[];\n  enable?: boolean;\n}) {\n  const pillListRef = useRef<HTMLDivElement>(null);\n  const [{ visibleCount }, setVisibleItems] = useValueEffect({\n    visibleCount: pills.length,\n  });\n  const targetWindow = useWindow();\n\n  const updateOverflow = useCallback(() => {\n    if (!enable) {\n      return;\n    }\n\n    const computeVisible = (visibleCount: number) => {\n      const pillList = pillListRef.current;\n\n      if (pillList && targetWindow) {\n        let pillElements = Array.from(\n          pillList.querySelectorAll('[role=\"listitem\"]')\n        ) as HTMLLIElement[];\n        const maxWidth = pillList.getBoundingClientRect().width;\n        const listGap = parseInt(targetWindow.getComputedStyle(pillList).gap);\n        let isShowingOverflow = pillList.querySelector(\n          \"[data-overflowindicator]\"\n        );\n\n        let currentSize = 0;\n        let newVisibleCount = 0;\n\n        if (isShowingOverflow) {\n          let pill = pillElements.pop();\n          if (pill) {\n            let pillWidth = pill.getBoundingClientRect().width;\n            currentSize += pillWidth + listGap;\n          }\n        }\n\n        for (let pill of pillElements) {\n          let pillWidth = pill.getBoundingClientRect().width;\n          currentSize += pillWidth + listGap;\n\n          if (Math.round(currentSize) <= Math.round(maxWidth)) {\n            newVisibleCount++;\n          } else {\n            break;\n          }\n        }\n        return newVisibleCount;\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: pills.length,\n      };\n\n      // Measure the visible count\n      let newVisibleCount = computeVisible(pills.length);\n      let isMeasuring = newVisibleCount < pills.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        newVisibleCount = computeVisible(visibleCount);\n        yield {\n          visibleCount: newVisibleCount,\n        };\n      }\n    });\n  }, [pills, setVisibleItems, enable, targetWindow]);\n\n  useIsomorphicLayoutEffect(updateOverflow, [updateOverflow, pills]);\n  useResizeObserver(pillListRef, [\"width\"], updateOverflow, true);\n\n  return {\n    pillListRef,\n    visibleCount,\n    visiblePills: enable ? pills.slice(0, visibleCount) : pills,\n  };\n}\n"],"names":["visibleCount"],"mappings":"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"}

package/dist-es/utils/useValueEffect.js

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

@@ -0,0 +1 @@
+{"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 +1,17 @@
 import { ReactNode, Ref } from "react";
-import { InputProps } from "@salt-ds/core";
 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> & InputProps;
+} & 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"> & InputProps & {
+} & 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/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?: 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

@@ -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/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/lab",
-  "version": "1.0.0-alpha.35",
+  "version": "1.0.0-alpha.36",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",