@vuu-ui/vuu-table 0.8.35 → 0.8.36

package/cjs/useRowClassNameGenerators.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const createClassNameGenerator = (ids) => {
+  const functions = [];
+  ids?.forEach((id) => {
+    const fn = vuuUtils.getRowClassNameGenerator(id);
+    if (fn) {
+      functions.push(fn.fn);
+    }
+  });
+  return (row, columnMap) => {
+    const classNames = [];
+    functions?.forEach((fn) => {
+      const className = fn(row, columnMap);
+      if (className) {
+        classNames.push(className);
+      }
+    });
+    return classNames.join(" ");
+  };
+};
+const useRowClassNameGenerators = ({
+  rowClassNameGenerators
+}) => {
+  return react.useMemo(() => {
+    return createClassNameGenerator(rowClassNameGenerators);
+  }, [rowClassNameGenerators]);
+};
+
+exports.useRowClassNameGenerators = useRowClassNameGenerators;
+//# sourceMappingURL=useRowClassNameGenerators.js.map

package/cjs/useRowClassNameGenerators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowClassNameGenerators.js","sources":["../src/useRowClassNameGenerators.ts"],"sourcesContent":["import { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getRowClassNameGenerator,\n  RowClassNameGenerator,\n} from \"@vuu-ui/vuu-utils\";\nimport { useMemo } from \"react\";\n\nconst createClassNameGenerator = (\n  ids?: string[]\n): RowClassNameGenerator | undefined => {\n  const functions: RowClassNameGenerator[] = [];\n  ids?.forEach((id) => {\n    const fn = getRowClassNameGenerator(id);\n    if (fn) {\n      functions.push(fn.fn);\n    }\n  });\n  return (row, columnMap) => {\n    const classNames: string[] = [];\n    functions?.forEach((fn) => {\n      const className = fn(row, columnMap);\n      if (className) {\n        classNames.push(className);\n      }\n    });\n    return classNames.join(\" \");\n  };\n};\n\nexport const useRowClassNameGenerators = ({\n  rowClassNameGenerators,\n}: TableConfig) => {\n  return useMemo<RowClassNameGenerator | undefined>(() => {\n    return createClassNameGenerator(rowClassNameGenerators);\n  }, [rowClassNameGenerators]);\n};\n"],"names":["getRowClassNameGenerator","useMemo"],"mappings":";;;;;AAOA,MAAM,wBAAA,GAA2B,CAC/B,GACsC,KAAA;AACtC,EAAA,MAAM,YAAqC,EAAC,CAAA;AAC5C,EAAK,GAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACnB,IAAM,MAAA,EAAA,GAAKA,kCAAyB,EAAE,CAAA,CAAA;AACtC,IAAA,IAAI,EAAI,EAAA;AACN,MAAU,SAAA,CAAA,IAAA,CAAK,GAAG,EAAE,CAAA,CAAA;AAAA,KACtB;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,CAAC,KAAK,SAAc,KAAA;AACzB,IAAA,MAAM,aAAuB,EAAC,CAAA;AAC9B,IAAW,SAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACzB,MAAM,MAAA,SAAA,GAAY,EAAG,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AACnC,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,UAAA,CAAW,KAAK,SAAS,CAAA,CAAA;AAAA,OAC3B;AAAA,KACD,CAAA,CAAA;AACD,IAAO,OAAA,UAAA,CAAW,KAAK,GAAG,CAAA,CAAA;AAAA,GAC5B,CAAA;AACF,CAAA,CAAA;AAEO,MAAM,4BAA4B,CAAC;AAAA,EACxC,sBAAA;AACF,CAAmB,KAAA;AACjB,EAAA,OAAOC,cAA2C,MAAM;AACtD,IAAA,OAAO,yBAAyB,sBAAsB,CAAA,CAAA;AAAA,GACxD,EAAG,CAAC,sBAAsB,CAAC,CAAA,CAAA;AAC7B;;;;"}

package/cjs/useRowHeight.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const useRowHeight = ({
+  rowHeight: rowHeightProp = 0
+}) => {
+  const [rowHeight, setRowHeight] = react.useState(rowHeightProp);
+  const heightRef = react.useRef(rowHeight);
+  const resizeObserver = react.useMemo(() => {
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const [{ blockSize: measuredSize }] = entry.borderBoxSize;
+        const newHeight = Math.round(measuredSize);
+        if (vuuUtils.isValidNumber(newHeight) && heightRef.current !== newHeight) {
+          heightRef.current = newHeight;
+          setRowHeight(newHeight);
+        }
+      }
+    });
+  }, []);
+  const rowRef = react.useCallback(
+    (el) => {
+      if (el) {
+        if (rowHeightProp === 0) {
+          const { height } = el.getBoundingClientRect();
+          console.log({ boundingClientHeight: height });
+          console.log(`measured rowHeight = ${height} (${rowHeightProp})`);
+          resizeObserver.observe(el);
+          setRowHeight(height);
+        }
+      } else {
+        resizeObserver.disconnect();
+      }
+    },
+    [resizeObserver, rowHeightProp]
+  );
+  return { rowHeight, rowRef };
+};
+
+exports.useRowHeight = useRowHeight;
+//# sourceMappingURL=useRowHeight.js.map

package/cjs/useRowHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowHeight.js","sources":["../src/useRowHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useRef, useState } from \"react\";\n\ninterface RowHeightHookProps {\n  rowHeight?: number;\n}\n\nexport const useRowHeight = ({\n  rowHeight: rowHeightProp = 0,\n}: RowHeightHookProps) => {\n  const [rowHeight, setRowHeight] = useState(rowHeightProp);\n  const heightRef = useRef(rowHeight);\n\n  const resizeObserver = useMemo(() => {\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const [{ blockSize: measuredSize }] = entry.borderBoxSize;\n        const newHeight = Math.round(measuredSize);\n        if (isValidNumber(newHeight) && heightRef.current !== newHeight) {\n          heightRef.current = newHeight;\n          setRowHeight(newHeight);\n        }\n      }\n    });\n  }, []);\n\n  const rowRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (rowHeightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          console.log({ boundingClientHeight: height });\n          console.log(`measured rowHeight = ${height} (${rowHeightProp})`);\n          resizeObserver.observe(el);\n          setRowHeight(height);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, rowHeightProp]\n  );\n\n  return { rowHeight, rowRef };\n};\n"],"names":["useState","useRef","useMemo","isValidNumber","useCallback"],"mappings":";;;;;AAOO,MAAM,eAAe,CAAC;AAAA,EAC3B,WAAW,aAAgB,GAAA,CAAA;AAC7B,CAA0B,KAAA;AACxB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,aAAa,CAAA,CAAA;AACxD,EAAM,MAAA,SAAA,GAAYC,aAAO,SAAS,CAAA,CAAA;AAElC,EAAM,MAAA,cAAA,GAAiBC,cAAQ,MAAM;AACnC,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,CAAC,EAAE,SAAA,EAAW,YAAa,EAAC,IAAI,KAAM,CAAA,aAAA,CAAA;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AACzC,QAAA,IAAIC,sBAAc,CAAA,SAAS,CAAK,IAAA,SAAA,CAAU,YAAY,SAAW,EAAA;AAC/D,UAAA,SAAA,CAAU,OAAU,GAAA,SAAA,CAAA;AACpB,UAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AAAA,SACxB;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,MAAS,GAAAC,iBAAA;AAAA,IACb,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,kBAAkB,CAAG,EAAA;AACvB,UAAA,MAAM,EAAE,MAAA,EAAW,GAAA,EAAA,CAAG,qBAAsB,EAAA,CAAA;AAC5C,UAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,oBAAsB,EAAA,MAAA,EAAQ,CAAA,CAAA;AAC5C,UAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,qBAAA,EAAwB,MAAM,CAAA,EAAA,EAAK,aAAa,CAAG,CAAA,CAAA,CAAA,CAAA;AAC/D,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA,CAAA;AACzB,UAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AAAA,SACrB;AAAA,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,aAAa,CAAA;AAAA,GAChC,CAAA;AAEA,EAAO,OAAA,EAAE,WAAW,MAAO,EAAA,CAAA;AAC7B;;;;"}

package/cjs/useSelection.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const { IDX } = vuuUtils.metadataKeys;
+const NO_SELECTION = [];
+const defaultSelectionKeys = ["Enter", " "];
+const useSelection = ({
+  highlightedIndexRef,
+  selectionKeys = defaultSelectionKeys,
+  selectionModel,
+  onSelect,
+  onSelectionChange
+}) => {
+  const lastActiveRef = react.useRef(-1);
+  const selectedRef = react.useRef(NO_SELECTION);
+  const isSelectionEvent = react.useCallback(
+    (evt) => selectionKeys.includes(evt.key),
+    [selectionKeys]
+  );
+  const handleRowClick = react.useCallback(
+    (evt, row, rangeSelect, keepExistingSelection) => {
+      const { [IDX]: idx } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = vuuUtils.isRowSelected(row) ? vuuUtils.deselectItem : vuuUtils.selectItem;
+      const newSelected = selectOperation(
+        selectionModel,
+        selected,
+        idx,
+        rangeSelect,
+        keepExistingSelection,
+        active
+      );
+      selectedRef.current = newSelected;
+      lastActiveRef.current = idx;
+      onSelect?.(selectOperation === vuuUtils.selectItem ? row : null);
+      onSelectionChange?.(newSelected);
+    },
+    [onSelect, onSelectionChange, selectionModel]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (isSelectionEvent(e)) {
+        const { current: rowIndex } = highlightedIndexRef;
+        if (rowIndex !== void 0 && rowIndex !== -1) {
+          const rowEl = vuuUtils.getRowElementAtIndex(e.target, rowIndex);
+          if (rowEl) {
+            vuuUtils.dispatchMouseEvent(rowEl, "click");
+          }
+        }
+      }
+    },
+    [highlightedIndexRef, isSelectionEvent]
+  );
+  return {
+    onKeyDown: handleKeyDown,
+    onRowClick: handleRowClick
+  };
+};
+
+exports.useSelection = useSelection;
+//# sourceMappingURL=useSelection.js.map

package/cjs/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","sources":["../src/useSelection.ts"],"sourcesContent":["import {\n  TableRowClickHandlerInternal,\n  TableRowSelectHandlerInternal,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  deselectItem,\n  dispatchMouseEvent,\n  getRowElementAtIndex,\n  isRowSelected,\n  metadataKeys,\n  selectItem,\n} from \"@vuu-ui/vuu-utils\";\nimport { Selection, SelectionChangeHandler } from \"@vuu-ui/vuu-data-types\";\nimport {\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MutableRefObject,\n  useCallback,\n  useRef,\n} from \"react\";\n\nconst { IDX } = metadataKeys;\n\nconst NO_SELECTION: Selection = [];\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  highlightedIndexRef: MutableRefObject<number | undefined>;\n  selectionKeys?: string[];\n  selectionModel: TableSelectionModel;\n  onSelect?: TableRowSelectHandlerInternal;\n  onSelectionChange: SelectionChangeHandler;\n}\n\nexport const useSelection = ({\n  highlightedIndexRef,\n  selectionKeys = defaultSelectionKeys,\n  selectionModel,\n  onSelect,\n  onSelectionChange,\n}: SelectionHookProps) => {\n  selectionModel === \"extended\" || selectionModel === \"checkbox\";\n  const lastActiveRef = useRef(-1);\n  const selectedRef = useRef<Selection>(NO_SELECTION);\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => selectionKeys.includes(evt.key),\n    [selectionKeys]\n  );\n\n  const handleRowClick = useCallback<TableRowClickHandlerInternal>(\n    (evt, row, rangeSelect, keepExistingSelection) => {\n      const { [IDX]: idx } = row;\n      const { current: active } = lastActiveRef;\n      const { current: selected } = selectedRef;\n\n      const selectOperation = isRowSelected(row) ? deselectItem : selectItem;\n\n      const newSelected = selectOperation(\n        selectionModel,\n        selected,\n        idx,\n        rangeSelect,\n        keepExistingSelection,\n        active\n      );\n\n      selectedRef.current = newSelected;\n      lastActiveRef.current = idx;\n\n      onSelect?.(selectOperation === selectItem ? row : null);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelect, onSelectionChange, selectionModel]\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (e) => {\n      if (isSelectionEvent(e)) {\n        const { current: rowIndex } = highlightedIndexRef;\n        if (rowIndex !== undefined && rowIndex !== -1) {\n          const rowEl = getRowElementAtIndex(e.target, rowIndex);\n          // const rowEl = (e.target as HTMLElement).querySelector(\n          //   `[aria-rowindex=\"${rowIndex + 1}\"]`\n          // ) as HTMLElement;\n          if (rowEl) {\n            dispatchMouseEvent(rowEl, \"click\");\n          }\n        }\n      }\n    },\n    [highlightedIndexRef, isSelectionEvent]\n  );\n\n  return {\n    onKeyDown: handleKeyDown,\n    onRowClick: handleRowClick,\n  };\n};\n"],"names":["metadataKeys","useRef","useCallback","isRowSelected","deselectItem","selectItem","getRowElementAtIndex","dispatchMouseEvent"],"mappings":";;;;;AAsBA,MAAM,EAAE,KAAQ,GAAAA,qBAAA,CAAA;AAEhB,MAAM,eAA0B,EAAC,CAAA;AAEjC,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAUnC,MAAM,eAAe,CAAC;AAAA,EAC3B,mBAAA;AAAA,EACA,aAAgB,GAAA,oBAAA;AAAA,EAChB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AACF,CAA0B,KAAA;AAExB,EAAM,MAAA,aAAA,GAAgBC,aAAO,CAAE,CAAA,CAAA,CAAA;AAC/B,EAAM,MAAA,WAAA,GAAcA,aAAkB,YAAY,CAAA,CAAA;AAElD,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAoC,aAAc,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACnE,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,GAAA,EAAK,GAAK,EAAA,WAAA,EAAa,qBAA0B,KAAA;AAChD,MAAA,MAAM,EAAE,CAAC,GAAG,GAAG,KAAQ,GAAA,GAAA,CAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,aAAA,CAAA;AAC5B,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA,CAAA;AAE9B,MAAA,MAAM,eAAkB,GAAAC,sBAAA,CAAc,GAAG,CAAA,GAAIC,qBAAe,GAAAC,mBAAA,CAAA;AAE5D,MAAA,MAAM,WAAc,GAAA,eAAA;AAAA,QAClB,cAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA,qBAAA;AAAA,QACA,MAAA;AAAA,OACF,CAAA;AAEA,MAAA,WAAA,CAAY,OAAU,GAAA,WAAA,CAAA;AACtB,MAAA,aAAA,CAAc,OAAU,GAAA,GAAA,CAAA;AAExB,MAAW,QAAA,GAAA,eAAA,KAAoBA,mBAAa,GAAA,GAAA,GAAM,IAAI,CAAA,CAAA;AACtD,MAAA,iBAAA,GAAoB,WAAW,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAU,EAAA,iBAAA,EAAmB,cAAc,CAAA;AAAA,GAC9C,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAH,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,gBAAA,CAAiB,CAAC,CAAG,EAAA;AACvB,QAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAC9B,QAAI,IAAA,QAAA,KAAa,KAAa,CAAA,IAAA,QAAA,KAAa,CAAI,CAAA,EAAA;AAC7C,UAAA,MAAM,KAAQ,GAAAI,6BAAA,CAAqB,CAAE,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AAIrD,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,qBAAqB,gBAAgB,CAAA;AAAA,GACxC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA,cAAA;AAAA,GACd,CAAA;AACF;;;;"}