@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.100

package/dist-es/list/useListHeight.js

@@ -1,14 +1,14 @@
 import { useState, useMemo, useCallback } from 'react';
-import '@salt-ds/core';
 import 'react/jsx-runtime';
+import '@salt-ds/core';
 import { useResizeObserver, HeightOnly } from '../responsive/useResizeObserver.js';
-import '../utils/useFloatingUI.js';
 
 const useListHeight = ({
   borderless,
   displayedItemCount,
   getItemHeight,
-  height,
+  // TODO no need to incur the cost of a resizeObserver if height is explicit
+  height: _height,
   itemCount,
   itemGapSize,
   itemHeight: itemHeightProp,
@@ -17,17 +17,18 @@ const useListHeight = ({
   const [measuredItemHeight, setMeasuredItemHeight] = useState(36);
   const preferredHeight = useMemo(() => {
     let result = borderless ? 0 : 2;
-    const itemHeight = itemHeightProp != null ? itemHeightProp : measuredItemHeight;
+    const itemHeight = itemHeightProp ?? measuredItemHeight;
     const preferredItemCount = Math.min(displayedItemCount, itemCount) || displayedItemCount;
     if (typeof getItemHeight === "function") {
       result += Array(preferredItemCount).fill(0).reduce(
         (total, _, index) => total + getItemHeight(index) + itemGapSize,
         0
-      ) - itemGapSize;
+      ) - // We don't want gap after the last item
+      itemGapSize;
     } else {
       result += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * itemGapSize;
     }
-    return isNaN(result) ? void 0 : result;
+    return Number.isNaN(result) ? void 0 : result;
   }, [
     borderless,
     displayedItemCount,
@@ -37,8 +38,8 @@ const useListHeight = ({
     itemHeightProp,
     measuredItemHeight
   ]);
-  const handleRowHeight = useCallback(({ height: height2 }) => {
-    setMeasuredItemHeight(height2);
+  const handleRowHeight = useCallback(({ height }) => {
+    setMeasuredItemHeight(height);
   }, []);
   useResizeObserver(rowHeightRef, HeightOnly, handleRowHeight, true);
   return {

package/dist-es/list/useListHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListHeight.js","sources":["../src/list/useListHeight.ts"],"sourcesContent":["import { useMemo, useState, useCallback, RefObject } from \"react\";\nimport { useResizeObserver, HeightOnly, ResizeHandler } from \"../responsive\";\n\nexport interface ListHeightHookProps {\n  borderless?: boolean;\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number | string;\n  rowHeightRef: RefObject<HTMLElement | null>;\n}\n\nexport interface HeightHookResult {\n  preferredHeight: number | undefined;\n}\n\nexport const useListHeight = ({\n  borderless,\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp,\n  rowHeightRef,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] = useState<\n    number | undefined\n  >(36);\n\n  const preferredHeight = useMemo(() => {\n    let result = borderless ? 0 : 2;\n    const itemHeight = itemHeightProp ?? measuredItemHeight;\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    // list height will be undefined if the item height can not be\n    // converted to a number, for example rem or a percentage string\n    return isNaN(result) ? undefined : result;\n  }, [\n    borderless,\n    displayedItemCount,\n    getItemHeight,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    setMeasuredItemHeight(height);\n  }, []);\n\n  useResizeObserver(rowHeightRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    preferredHeight,\n  };\n};\n"],"names":["height"],"mappings":";;;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,aAAA;AAAA,EAEA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,YAAA;AACF,CAA6C,KAAA;AAE3C,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAElD,EAAE,CAAA,CAAA;AAEJ,EAAM,MAAA,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAI,IAAA,MAAA,GAAS,aAAa,CAAI,GAAA,CAAA,CAAA;AAC9B,IAAA,MAAM,aAAa,cAAkB,IAAA,IAAA,GAAA,cAAA,GAAA,kBAAA,CAAA;AAGrC,IAAA,MAAM,kBACJ,GAAA,IAAA,CAAK,GAAI,CAAA,kBAAA,EAAoB,SAAS,CAAK,IAAA,kBAAA,CAAA;AAE7C,IAAI,IAAA,OAAO,kBAAkB,UAAY,EAAA;AACvC,MAAA,MAAA,IACE,KAAM,CAAA,kBAAkB,CACrB,CAAA,IAAA,CAAK,CAAC,CACN,CAAA,MAAA;AAAA,QACC,CAAC,KAAO,EAAA,CAAA,EAAG,UAAU,KAAQ,GAAA,aAAA,CAAc,KAAK,CAAI,GAAA,WAAA;AAAA,QACpD,CAAA;AAAA,OAGJ,GAAA,WAAA,CAAA;AAAA,KACG,MAAA;AACL,MAAA,MAAA,IACE,kBAAqB,GAAA,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAK,IAAA,WAAA,CAAA;AAAA,KAC/B;AAIA,IAAO,OAAA,KAAA,CAAM,MAAM,CAAA,GAAI,KAAY,CAAA,GAAA,MAAA,CAAA;AAAA,GAClC,EAAA;AAAA,IACD,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,kBAAiC,WAAY,CAAA,CAAC,EAAE,MAAA,EAAAA,SAAa,KAAA;AACjE,IAAA,qBAAA,CAAsBA,OAAM,CAAA,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAkB,iBAAA,CAAA,YAAA,EAAc,UAAY,EAAA,eAAA,EAAiB,IAAI,CAAA,CAAA;AAEjE,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useListHeight.js","sources":["../src/list/useListHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useMemo, useState } from \"react\";\nimport {\n  HeightOnly,\n  type ResizeHandler,\n  useResizeObserver,\n} from \"../responsive\";\n\nexport interface ListHeightHookProps {\n  borderless?: boolean;\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number | string;\n  rowHeightRef: RefObject<HTMLElement | null>;\n}\n\nexport interface HeightHookResult {\n  preferredHeight: number | undefined;\n}\n\nexport const useListHeight = ({\n  borderless,\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height: _height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp,\n  rowHeightRef,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] = useState<\n    number | undefined\n  >(36);\n\n  const preferredHeight = useMemo(() => {\n    let result = borderless ? 0 : 2;\n    const itemHeight = itemHeightProp ?? measuredItemHeight;\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0,\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    // list height will be undefined if the item height can not be\n    // converted to a number, for example rem or a percentage string\n    return Number.isNaN(result) ? undefined : result;\n  }, [\n    borderless,\n    displayedItemCount,\n    getItemHeight,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    setMeasuredItemHeight(height);\n  }, []);\n\n  useResizeObserver(rowHeightRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    preferredHeight,\n  };\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,aAAA;AAAA;AAAA,EAEA,MAAA,EAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA,EAAY,cAAA;AAAA,EACZ;AACF,CAAA,KAA6C;AAE3C,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAElD,EAAE,CAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,IAAI,MAAA,GAAS,aAAa,CAAA,GAAI,CAAA;AAC9B,IAAA,MAAM,aAAa,cAAA,IAAkB,kBAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,IAAA,CAAK,GAAA,CAAI,kBAAA,EAAoB,SAAS,CAAA,IAAK,kBAAA;AAE7C,IAAA,IAAI,OAAO,kBAAkB,UAAA,EAAY;AACvC,MAAA,MAAA,IACE,KAAA,CAAM,kBAAkB,CAAA,CACrB,IAAA,CAAK,CAAC,CAAA,CACN,MAAA;AAAA,QACC,CAAC,KAAA,EAAO,CAAA,EAAG,UAAU,KAAA,GAAQ,aAAA,CAAc,KAAK,CAAA,GAAI,WAAA;AAAA,QACpD;AAAA,OACF;AAAA,MAEF,WAAA;AAAA,IACJ,CAAA,MAAO;AACL,MAAA,MAAA,IACE,kBAAA,GAAqB,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAA,IAAK,WAAA;AAAA,IAC/B;AAIA,IAAA,OAAO,MAAA,CAAO,KAAA,CAAM,MAAM,CAAA,GAAI,MAAA,GAAY,MAAA;AAAA,EAC5C,CAAA,EAAG;AAAA,IACD,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAA,GAAiC,WAAA,CAAY,CAAC,EAAE,QAAO,KAAM;AACjE,IAAA,qBAAA,CAAsB,MAAM,CAAA;AAAA,EAC9B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,YAAA,EAAc,UAAA,EAAY,eAAA,EAAiB,IAAI,CAAA;AAEjE,EAAA,OAAO;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/dist-es/list/useVirtualization.js

@@ -1,6 +1,6 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { useRef, useState, useMemo, useCallback } from 'react';
 import { KeySet } from './keyset.js';
-import { useIsomorphicLayoutEffect } from '@salt-ds/core';
 
 const byKey = ([k1], [k2]) => k1 - k2;
 const renderBuffer = 5;
@@ -51,7 +51,7 @@ const useVirtualization = ({
         updateRows(0, viewport.rowCount);
       }
     }
-  }, [data, itemGapSize, keys, updateRows]);
+  }, [data, itemGapSize, updateRows, viewportRef]);
   const handleVerticalScroll = useCallback(
     (e) => {
       const viewport = viewportMeasures.current;

package/dist-es/list/useVirtualization.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualization.js","sources":["../src/list/useVirtualization.ts"],"sourcesContent":["import {\n  RefObject,\n  UIEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { KeySet } from \"./keyset\";\nimport { CollectionItem } from \"../common-hooks\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\n/**\n * [ item key, total height before the item, next row index, CollectionItem<Item>]\n * e.g. first item: [0, 0, 1, data[0]]\n */\nexport type Row<Item> = [number, number, number, CollectionItem<Item>];\n\nconst byKey = ([k1]: Row<unknown>, [k2]: Row<unknown>) => k1 - k2;\n\nconst renderBuffer = 5;\n\ninterface VirtualizationHookProps<Item> {\n  viewportRef: RefObject<HTMLElement>;\n  data: CollectionItem<Item>[];\n  itemGapSize?: number;\n}\n\ninterface VirtualizationHookResult<Item> {\n  rows: Row<Item>[];\n  contentHeight: number;\n  onVerticalScroll: (e: UIEvent<HTMLElement>) => void;\n}\n\nexport const useVirtualization = <Item>({\n  viewportRef,\n  data,\n  itemGapSize = 0,\n}: VirtualizationHookProps<Item>): VirtualizationHookResult<Item> => {\n  const viewportMeasures = useRef({\n    contentHeight: 10000,\n    firstVisibleRow: 0,\n    rowCount: 0,\n    rowHeight: 0,\n    scrollPos: 0,\n  });\n  const [rows, setRows] = useState<Row<Item>[]>([]);\n  const keys = useMemo(() => new KeySet(0, 1), []);\n\n  const updateRows = useCallback(\n    (from: number, to: number) => {\n      const { rowHeight } = viewportMeasures.current;\n      const rowHeightWithGap = rowHeight + itemGapSize;\n      const lo = Math.max(0, from - renderBuffer);\n      const hi = Math.min(data.length, to + renderBuffer);\n      keys.reset(lo, hi);\n      const newRows = data\n        .slice(lo, hi)\n        .map(\n          (value, idx) =>\n            [\n              keys.keyFor(idx + lo),\n              (idx + lo) * rowHeightWithGap,\n              idx + lo + 1,\n              value,\n            ] as Row<Item>\n        )\n        .sort(byKey);\n      setRows(newRows);\n    },\n    [data, itemGapSize, keys]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const viewport = viewportMeasures.current;\n    const viewportEl = viewportRef.current;\n    if (viewportEl) {\n      // TODO no reference to ListItem className\n      const listItemEl = viewportEl.querySelector(\".saltListItem\");\n      if (listItemEl) {\n        const { height: viewportHeight } = viewportEl.getBoundingClientRect();\n        const { height: rowHeight } = listItemEl.getBoundingClientRect();\n        viewport.rowHeight = rowHeight;\n        viewport.rowCount = Math.ceil(viewportHeight / rowHeight);\n        viewport.contentHeight = (rowHeight + itemGapSize) * data.length;\n        updateRows(0, viewport.rowCount);\n      }\n    }\n  }, [data, itemGapSize, keys, updateRows]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const viewport = viewportMeasures.current;\n      // TODO: check `as` cast\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== viewport.scrollPos) {\n        viewport.scrollPos = scrollTop;\n        const firstRow = Math.floor(scrollTop / viewport.rowHeight);\n        if (firstRow !== viewport.firstVisibleRow) {\n          viewport.firstVisibleRow = firstRow;\n          const from = firstRow;\n          const to = firstRow + viewport.rowCount;\n          updateRows(from, to);\n        }\n      }\n    },\n    [updateRows]\n  );\n\n  return {\n    rows,\n    contentHeight: viewportMeasures.current.contentHeight,\n    onVerticalScroll: handleVerticalScroll,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useVirtualization.js","sources":["../src/list/useVirtualization.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type RefObject,\n  type UIEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { CollectionItem } from \"../common-hooks\";\nimport { KeySet } from \"./keyset\";\n\n/**\n * [ item key, total height before the item, next row index, CollectionItem<Item>]\n * e.g. first item: [0, 0, 1, data[0]]\n */\nexport type Row<Item> = [number, number, number, CollectionItem<Item>];\n\nconst byKey = ([k1]: Row<unknown>, [k2]: Row<unknown>) => k1 - k2;\n\nconst renderBuffer = 5;\n\ninterface VirtualizationHookProps<Item> {\n  viewportRef: RefObject<HTMLElement>;\n  data: CollectionItem<Item>[];\n  itemGapSize?: number;\n}\n\ninterface VirtualizationHookResult<Item> {\n  rows: Row<Item>[];\n  contentHeight: number;\n  onVerticalScroll: (e: UIEvent<HTMLElement>) => void;\n}\n\nexport const useVirtualization = <Item>({\n  viewportRef,\n  data,\n  itemGapSize = 0,\n}: VirtualizationHookProps<Item>): VirtualizationHookResult<Item> => {\n  const viewportMeasures = useRef({\n    contentHeight: 10000,\n    firstVisibleRow: 0,\n    rowCount: 0,\n    rowHeight: 0,\n    scrollPos: 0,\n  });\n  const [rows, setRows] = useState<Row<Item>[]>([]);\n  const keys = useMemo(() => new KeySet(0, 1), []);\n\n  const updateRows = useCallback(\n    (from: number, to: number) => {\n      const { rowHeight } = viewportMeasures.current;\n      const rowHeightWithGap = rowHeight + itemGapSize;\n      const lo = Math.max(0, from - renderBuffer);\n      const hi = Math.min(data.length, to + renderBuffer);\n      keys.reset(lo, hi);\n      const newRows = data\n        .slice(lo, hi)\n        .map(\n          (value, idx) =>\n            [\n              keys.keyFor(idx + lo),\n              (idx + lo) * rowHeightWithGap,\n              idx + lo + 1,\n              value,\n            ] as Row<Item>,\n        )\n        .sort(byKey);\n      setRows(newRows);\n    },\n    [data, itemGapSize, keys],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const viewport = viewportMeasures.current;\n    const viewportEl = viewportRef.current;\n    if (viewportEl) {\n      // TODO no reference to ListItem className\n      const listItemEl = viewportEl.querySelector(\".saltListItem\");\n      if (listItemEl) {\n        const { height: viewportHeight } = viewportEl.getBoundingClientRect();\n        const { height: rowHeight } = listItemEl.getBoundingClientRect();\n        viewport.rowHeight = rowHeight;\n        viewport.rowCount = Math.ceil(viewportHeight / rowHeight);\n        viewport.contentHeight = (rowHeight + itemGapSize) * data.length;\n        updateRows(0, viewport.rowCount);\n      }\n    }\n  }, [data, itemGapSize, updateRows, viewportRef]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const viewport = viewportMeasures.current;\n      // TODO: check `as` cast\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== viewport.scrollPos) {\n        viewport.scrollPos = scrollTop;\n        const firstRow = Math.floor(scrollTop / viewport.rowHeight);\n        if (firstRow !== viewport.firstVisibleRow) {\n          viewport.firstVisibleRow = firstRow;\n          const from = firstRow;\n          const to = firstRow + viewport.rowCount;\n          updateRows(from, to);\n        }\n      }\n    },\n    [updateRows],\n  );\n\n  return {\n    rows,\n    contentHeight: viewportMeasures.current.contentHeight,\n    onVerticalScroll: handleVerticalScroll,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/list-deprecated/List.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n  /* Color */\n  --list-background: var(--salt-container-primary-background);\n  /* Border */\n  --list-borderColor: var(--salt-container-primary-borderColor);\n  --list-borderStyle: var(--salt-container-borderStyle);\n  --list-borderWidth: var(--salt-size-border);\n  --list-borderRadius: 0;\n\n  /* Text, Font */\n  /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n  /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n  /* Misc. */\n  --list-boxShadow: none;\n  --list-disabled-cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n  position: relative;\n}\n\n.saltListDeprecated {\n  /* font-family: var(--list-fontFamily); */\n  overflow-y: auto;\n}\n.saltListDeprecated:focus {\n  outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n  border-color: var(--list-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n  background: var(--list-background);\n  box-shadow: var(--list-boxShadow);\n  position: relative;\n}\n\n.saltListDeprecated-borderless {\n  border: none;\n}\n.saltListDeprecated-disabled {\n  cursor: var(--list-disabled-cursor);\n  /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n  /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
+var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n  /* Color */\n  --list-background: var(--salt-container-primary-background);\n  /* Border */\n  --list-borderColor: var(--salt-container-primary-borderColor);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-borderRadius: 0;\n\n  /* Text, Font */\n  /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n  /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n  /* Misc. */\n  --list-boxShadow: none;\n  --list-disabled-cursor: var(--salt-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n  position: relative;\n}\n\n.saltListDeprecated {\n  /* font-family: var(--list-fontFamily); */\n  overflow-y: auto;\n}\n.saltListDeprecated:focus {\n  outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n  border-color: var(--list-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n  background: var(--list-background);\n  box-shadow: var(--list-boxShadow);\n  position: relative;\n}\n\n.saltListDeprecated-borderless {\n  border: none;\n}\n.saltListDeprecated-disabled {\n  cursor: var(--list-disabled-cursor);\n  /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n  /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=List.css.js.map

package/dist-es/list-deprecated/List.js

@@ -1,16 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { useForkRef } from '@salt-ds/core';
 import { forwardRef, useContext, useRef } from 'react';
+import { DescendantContext, DescendantProvider } from './internal/DescendantContext.js';
 import { ListBase } from './ListBase.js';
 import { ListStateContext } from './ListStateContext.js';
 import { useList } from './useList.js';
 import { useTypeSelect } from './useTypeSelect.js';
-import { DescendantContext, DescendantProvider } from './internal/DescendantContext.js';
 
 const ListWithDescendants = forwardRef(function ListWithDescendants2(props, ref) {
   const { items } = useContext(DescendantContext);
   const { focusedRef, state, helpers, listProps } = useList({
-    source: items.current.length ? items.current : [],
+    source: (items == null ? void 0 : items.current.length) ? items.current : [],
     ...props
   });
   const { highlightedIndex } = state;
@@ -32,7 +32,10 @@ const ListWithDescendants = forwardRef(function ListWithDescendants2(props, ref)
     setFocusVisible,
     setHighlightedIndex
   });
-  const setListRef = useForkRef(focusedRef, props.listRef);
+  const setListRef = useForkRef(
+    focusedRef,
+    props.listRef
+  );
   const handleKeyDownCapture = (event) => {
     if (disabled) {
       return;
@@ -44,9 +47,9 @@ const ListWithDescendants = forwardRef(function ListWithDescendants2(props, ref)
       onTypeSelectKeyDownCapture(event);
     }
   };
-  return /* @__PURE__ */ jsx(ListStateContext.Provider, {
-    value: { state, helpers },
-    children: /* @__PURE__ */ jsx(ListBase, {
+  return /* @__PURE__ */ jsx(ListStateContext.Provider, { value: { state, helpers }, children: /* @__PURE__ */ jsx(
+    ListBase,
+    {
       listRef: setListRef,
       ref,
       ...restListProps,
@@ -55,18 +58,12 @@ const ListWithDescendants = forwardRef(function ListWithDescendants2(props, ref)
       itemCount,
       itemToString,
       onKeyDownCapture: handleKeyDownCapture
-    })
-  });
+    }
+  ) });
 });
 const List = forwardRef(function List2(props, ref) {
   const itemsRef = useRef([]);
-  return /* @__PURE__ */ jsx(DescendantProvider, {
-    items: itemsRef,
-    children: /* @__PURE__ */ jsx(ListWithDescendants, {
-      ref,
-      ...props
-    })
-  });
+  return /* @__PURE__ */ jsx(DescendantProvider, { items: itemsRef, children: /* @__PURE__ */ jsx(ListWithDescendants, { ref, ...props }) });
 });
 
 export { List };

package/dist-es/list-deprecated/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../src/list-deprecated/List.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\n\nimport {\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  ReactElement,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { ListBase, ListScrollHandles } from \"./ListBase\";\nimport { ListProps, ListSelectionVariant } from \"./ListProps\";\nimport { ListStateContext } from \"./ListStateContext\";\nimport { useList } from \"./useList\";\nimport { useTypeSelect } from \"./useTypeSelect\";\n\nimport {\n  DescendantContext,\n  DescendantProvider,\n} from \"./internal/DescendantContext\";\n\nconst ListWithDescendants = forwardRef(function ListWithDescendants<\n  Item,\n  Variant extends ListSelectionVariant\n>(\n  props: ListProps<Item, Variant>,\n  ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n  const { items } = useContext(DescendantContext);\n\n  const { focusedRef, state, helpers, listProps } = useList({\n    source: items.current.length ? items.current : [],\n    ...props,\n  });\n\n  const { highlightedIndex } = state;\n  const { setHighlightedIndex, setFocusVisible } = helpers;\n\n  const {\n    disabled,\n    disableTypeToSelect,\n    getItemAtIndex,\n    itemCount,\n    itemToString,\n    onKeyDownCapture: onListKeyDownCapture,\n    ...restListProps\n  } = listProps;\n\n  const { onKeyDownCapture: onTypeSelectKeyDownCapture } = useTypeSelect({\n    getItemAtIndex,\n    highlightedIndex,\n    itemCount,\n    itemToString,\n    setFocusVisible,\n    setHighlightedIndex,\n  });\n\n  const setListRef = useForkRef(focusedRef, props.listRef);\n\n  const handleKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (onListKeyDownCapture) {\n      onListKeyDownCapture(event);\n    }\n\n    if (!disableTypeToSelect && onTypeSelectKeyDownCapture) {\n      onTypeSelectKeyDownCapture(event);\n    }\n  };\n\n  return (\n    <ListStateContext.Provider value={{ state, helpers }}>\n      <ListBase\n        listRef={setListRef}\n        ref={ref}\n        {...restListProps}\n        disabled={disabled}\n        getItemAtIndex={getItemAtIndex}\n        itemCount={itemCount}\n        itemToString={itemToString}\n        onKeyDownCapture={handleKeyDownCapture}\n      />\n    </ListStateContext.Provider>\n  );\n}) as <Item, Variant extends ListSelectionVariant>(\n  props: ListProps<Item, Variant> & {\n    ref?: ForwardedRef<ListScrollHandles<Item>>;\n  }\n) => ReactElement<ListProps<Item, Variant>>;\n\nexport const List = forwardRef(function List<\n  Item,\n  Variant extends ListSelectionVariant\n>(\n  props: ListProps<Item, Variant>,\n  ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n  const itemsRef = useRef([]);\n\n  return (\n    <DescendantProvider items={itemsRef}>\n      <ListWithDescendants<Item, Variant> ref={ref} {...props} />\n    </DescendantProvider>\n  );\n}) as <Item = string, Variant extends ListSelectionVariant = \"default\">(\n  props: ListProps<Item, Variant> & {\n    ref?: ForwardedRef<ListScrollHandles<Item>>;\n  }\n) => ReactElement<ListProps<Item, Variant>>;\n"],"names":["ListWithDescendants","List"],"mappings":";;;;;;;;;AAsBA,MAAM,mBAAsB,GAAA,UAAA,CAAW,SAASA,oBAAAA,CAI9C,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,KAAA,EAAU,GAAA,UAAA,CAAW,iBAAiB,CAAA,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,OAAS,EAAA,SAAA,KAAc,OAAQ,CAAA;AAAA,IACxD,QAAQ,KAAM,CAAA,OAAA,CAAQ,MAAS,GAAA,KAAA,CAAM,UAAU,EAAC;AAAA,IAChD,GAAG,KAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,mBAAqB,EAAA,eAAA,EAAoB,GAAA,OAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,aAAA;AAAA,GACD,GAAA,SAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,0BAA2B,EAAA,GAAI,aAAc,CAAA;AAAA,IACrE,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,mBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,UAAY,EAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAEvD,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAAyC,KAAA;AACrE,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,oBAAsB,EAAA;AACxB,MAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,KAC5B;AAEA,IAAI,IAAA,CAAC,uBAAuB,0BAA4B,EAAA;AACtD,MAAA,0BAAA,CAA2B,KAAK,CAAA,CAAA;AAAA,KAClC;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,IAA0B,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,IACjD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAkB,EAAA,oBAAA;AAAA,KACpB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAMM,MAAM,IAAO,GAAA,UAAA,CAAW,SAASC,KAAAA,CAItC,OACA,GACA,EAAA;AACA,EAAM,MAAA,QAAA,GAAW,MAAO,CAAA,EAAE,CAAA,CAAA;AAE1B,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,KAAO,EAAA,QAAA;AAAA,IACzB,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA;AAAA,MAAmC,GAAA;AAAA,MAAW,GAAG,KAAA;AAAA,KAAO,CAAA;AAAA,GAC3D,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"List.js","sources":["../src/list-deprecated/List.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\n\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type Ref,\n  useContext,\n  useRef,\n} from \"react\";\nimport {\n  DescendantContext,\n  DescendantProvider,\n} from \"./internal/DescendantContext\";\nimport { ListBase, type ListScrollHandles } from \"./ListBase\";\nimport type { ListProps, ListSelectionVariant } from \"./ListProps\";\nimport { ListStateContext } from \"./ListStateContext\";\nimport { useList } from \"./useList\";\nimport { useTypeSelect } from \"./useTypeSelect\";\n\nconst ListWithDescendants = forwardRef(function ListWithDescendants<\n  Item,\n  Variant extends ListSelectionVariant,\n>(\n  props: ListProps<Item, Variant>,\n  ref?: ForwardedRef<ListScrollHandles<Item>>,\n) {\n  const { items } = useContext(DescendantContext);\n\n  const { focusedRef, state, helpers, listProps } = useList({\n    source: (items?.current.length ? items.current : []) as Item[],\n    ...props,\n  });\n\n  const { highlightedIndex } = state;\n  const { setHighlightedIndex, setFocusVisible } = helpers;\n\n  const {\n    disabled,\n    disableTypeToSelect,\n    getItemAtIndex,\n    itemCount,\n    itemToString,\n    onKeyDownCapture: onListKeyDownCapture,\n    ...restListProps\n  } = listProps;\n\n  const { onKeyDownCapture: onTypeSelectKeyDownCapture } = useTypeSelect({\n    getItemAtIndex,\n    highlightedIndex,\n    itemCount,\n    itemToString,\n    setFocusVisible,\n    setHighlightedIndex,\n  });\n\n  const setListRef = useForkRef(\n    focusedRef,\n    props.listRef,\n  ) as Ref<HTMLDivElement>;\n\n  const handleKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (onListKeyDownCapture) {\n      onListKeyDownCapture(event);\n    }\n\n    if (!disableTypeToSelect && onTypeSelectKeyDownCapture) {\n      onTypeSelectKeyDownCapture(event);\n    }\n  };\n\n  return (\n    <ListStateContext.Provider value={{ state, helpers }}>\n      <ListBase\n        listRef={setListRef}\n        ref={ref}\n        {...restListProps}\n        disabled={disabled}\n        getItemAtIndex={getItemAtIndex}\n        itemCount={itemCount}\n        itemToString={itemToString}\n        onKeyDownCapture={handleKeyDownCapture}\n      />\n    </ListStateContext.Provider>\n  );\n}) as <Item, Variant extends ListSelectionVariant>(\n  props: ListProps<Item, Variant> & {\n    ref?: ForwardedRef<ListScrollHandles<Item>>;\n  },\n) => ReactElement<ListProps<Item, Variant>>;\n\nexport const List = forwardRef(function List<\n  Item,\n  Variant extends ListSelectionVariant,\n>(\n  props: ListProps<Item, Variant>,\n  ref?: ForwardedRef<ListScrollHandles<Item>>,\n) {\n  const itemsRef = useRef([]);\n\n  return (\n    <DescendantProvider items={itemsRef}>\n      <ListWithDescendants<Item, Variant> ref={ref} {...props} />\n    </DescendantProvider>\n  );\n}) as <Item = string, Variant extends ListSelectionVariant = \"default\">(\n  props: ListProps<Item, Variant> & {\n    ref?: ForwardedRef<ListScrollHandles<Item>>;\n  },\n) => ReactElement<ListProps<Item, Variant>>;\n"],"names":["ListWithDescendants","List"],"mappings":";;;;;;;;;AAqBA,MAAM,mBAAA,GAAsB,UAAA,CAAW,SAASA,oBAAAA,CAI9C,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,UAAA,CAAW,iBAAiB,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,SAAA,KAAc,OAAA,CAAQ;AAAA,IACxD,SAAS,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,OAAA,CAAQ,MAAA,IAAS,KAAA,CAAM,UAAU,EAAC;AAAA,IAClD,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,kBAAiB,GAAI,KAAA;AAC7B,EAAA,MAAM,EAAE,mBAAA,EAAqB,eAAA,EAAgB,GAAI,OAAA;AAEjD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA,EAAkB,oBAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,SAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,0BAAA,EAA2B,GAAI,aAAA,CAAc;AAAA,IACrE,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,UAAA,GAAa,UAAA;AAAA,IACjB,UAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAyC;AACrE,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,oBAAA,EAAsB;AACxB,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,IAC5B;AAEA,IAAA,IAAI,CAAC,uBAAuB,0BAAA,EAA4B;AACtD,MAAA,0BAAA,CAA2B,KAAK,CAAA;AAAA,IAClC;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,iBAAiB,QAAA,EAAjB,EAA0B,OAAO,EAAE,KAAA,EAAO,SAAQ,EACjD,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,UAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA,EAAkB;AAAA;AAAA,GACpB,EACF,CAAA;AAEJ,CAAC,CAAA;AAMM,MAAM,IAAA,GAAO,UAAA,CAAW,SAASC,KAAAA,CAItC,OACA,GAAA,EACA;AACA,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,EAAE,CAAA;AAE1B,EAAA,uBACE,GAAA,CAAC,sBAAmB,KAAA,EAAO,QAAA,EACzB,8BAAC,mBAAA,EAAA,EAAmC,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA,EAC3D,CAAA;AAEJ,CAAC;;;;"}