@fluentui/react-table 9.0.0-alpha.6 → 9.0.0-alpha.7

package/lib-commonjs/navigationModes/composite.js

@@ -1,217 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.applyCompositeNavigation = void 0;
-
-function applyCompositeNavigation(element) {
-  const container = element;
-  let mode = 'row';
-  let movingOut = false;
-  const pre = document.createElement('div');
-  const post = document.createElement('div');
-
-  if (!pre || !post) {
-    return;
-  }
-
-  pre.tabIndex = 0;
-  post.tabIndex = 0;
-  pre.addEventListener('focus', () => {
-    if (movingOut) {
-      movingOut = false;
-      return;
-    } else {
-      treeWalker.currentNode = container;
-      mode = 'row';
-      const candidate = treeWalker.nextNode();
-
-      if (isHTMLElement(candidate)) {
-        candidate.focus();
-      }
-    }
-  });
-  post.addEventListener('focus', () => {
-    if (movingOut) {
-      movingOut = false;
-      return;
-    } else {
-      treeWalker.currentNode = post;
-      mode = 'row';
-      const candidate = treeWalker.previousNode();
-
-      if (isHTMLElement(candidate)) {
-        candidate.focus();
-      }
-    }
-  });
-  container.before(pre);
-  container.after(post);
-
-  const acceptNode = node => {
-    if (!isHTMLElement(node)) {
-      return NodeFilter.FILTER_SKIP;
-    }
-
-    if (!isCell(node) && !isRow(node)) {
-      return NodeFilter.FILTER_SKIP;
-    }
-
-    if (mode === 'column' && isRow(node)) {
-      return NodeFilter.FILTER_REJECT;
-    }
-
-    if (mode === 'row' && isCell(node)) {
-      return NodeFilter.FILTER_REJECT;
-    }
-
-    if (node.tabIndex < 0) {
-      return NodeFilter.FILTER_SKIP;
-    }
-
-    return NodeFilter.FILTER_ACCEPT;
-  };
-
-  const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode
-  });
-
-  const up = current => {
-    const prevMode = mode;
-    mode = 'row';
-    treeWalker.currentNode = current;
-
-    if (prevMode === 'column') {
-      treeWalker.previousNode();
-    }
-
-    const node = treeWalker.previousNode();
-
-    if (isHTMLElement(node)) {
-      return node;
-    }
-
-    return null;
-  };
-
-  const down = current => {
-    mode = 'row';
-    treeWalker.currentNode = current;
-    const node = treeWalker.nextNode();
-
-    if (isHTMLElement(node)) {
-      return node;
-    }
-
-    return null;
-  };
-
-  const left = current => {
-    treeWalker.currentNode = current;
-    const prevMode = mode;
-    mode = 'column';
-    let node = null;
-
-    if (prevMode === 'row') {
-      let tmp = null;
-
-      while (tmp = treeWalker.nextNode()) {
-        node = tmp;
-      }
-    } else {
-      node = treeWalker.previousNode();
-    }
-
-    if (isHTMLElement(node)) {
-      return node;
-    }
-
-    return null;
-  };
-
-  const right = current => {
-    mode = 'column';
-    treeWalker.currentNode = current;
-    const node = treeWalker.nextNode();
-
-    if (isHTMLElement(node)) {
-      return node;
-    }
-
-    return null;
-  };
-
-  const onKeyDown = e => {
-    const target = e.target;
-
-    if (!target || !isHTMLElement(target)) {
-      return;
-    }
-
-    let next = null;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        next = down(target);
-        break;
-
-      case 'ArrowUp':
-        next = up(target);
-        break;
-
-      case 'ArrowLeft':
-        next = left(target);
-        break;
-
-      case 'ArrowRight':
-        next = right(target);
-        break;
-
-      case 'Tab':
-        movingOut = true;
-
-        if (e.shiftKey) {
-          pre.focus();
-        } else {
-          post.focus();
-        }
-
-        break;
-
-      default:
-        break;
-    }
-
-    if (next) {
-      e.preventDefault();
-      next.focus();
-    }
-  };
-
-  container.addEventListener('keydown', onKeyDown);
-  return () => container.removeEventListener('keydown', onKeyDown);
-}
-
-exports.applyCompositeNavigation = applyCompositeNavigation;
-
-function isHTMLElement(node) {
-  return node instanceof HTMLElement;
-}
-
-function isRow(element) {
-  if (element.getAttribute('role') === 'row' || element.tagName === 'TR') {
-    return true;
-  }
-
-  return false;
-}
-
-function isCell(element) {
-  if (element.getAttribute('role') === 'cell' || element.getAttribute('role') === 'gridcell' || element.tagName === 'TD') {
-    return true;
-  }
-
-  return false;
-}
-//# sourceMappingURL=composite.js.map

package/lib-commonjs/navigationModes/composite.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-table/src/navigationModes/composite.ts"],"names":[],"mappings":"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","sourcesContent":["export function applyCompositeNavigation(element: HTMLElement) {\n  const container = element;\n  let mode: 'row' | 'column' = 'row';\n  let movingOut = false;\n\n  const pre = document.createElement('div');\n  const post = document.createElement('div');\n\n  if (!pre || !post) {\n    return;\n  }\n\n  pre.tabIndex = 0;\n  post.tabIndex = 0;\n\n  pre.addEventListener('focus', () => {\n    if (movingOut) {\n      movingOut = false;\n      return;\n    } else {\n      treeWalker.currentNode = container;\n      mode = 'row';\n      const candidate = treeWalker.nextNode();\n      if (isHTMLElement(candidate)) {\n        candidate.focus();\n      }\n    }\n  });\n\n  post.addEventListener('focus', () => {\n    if (movingOut) {\n      movingOut = false;\n      return;\n    } else {\n      treeWalker.currentNode = post;\n      mode = 'row';\n      const candidate = treeWalker.previousNode();\n      if (isHTMLElement(candidate)) {\n        candidate.focus();\n      }\n    }\n  });\n\n  container.before(pre);\n  container.after(post);\n\n  const acceptNode = (node: Node) => {\n    if (!isHTMLElement(node)) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    if (!isCell(node) && !isRow(node)) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    if (mode === 'column' && isRow(node)) {\n      return NodeFilter.FILTER_REJECT;\n    }\n\n    if (mode === 'row' && isCell(node)) {\n      return NodeFilter.FILTER_REJECT;\n    }\n\n    if (node.tabIndex < 0) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    return NodeFilter.FILTER_ACCEPT;\n  };\n\n  const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { acceptNode });\n\n  const up = (current: HTMLElement) => {\n    const prevMode = mode;\n    mode = 'row';\n    treeWalker.currentNode = current;\n\n    if (prevMode === 'column') {\n      treeWalker.previousNode();\n    }\n\n    const node = treeWalker.previousNode();\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const down = (current: HTMLElement) => {\n    mode = 'row';\n    treeWalker.currentNode = current;\n    const node = treeWalker.nextNode();\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const left = (current: HTMLElement) => {\n    treeWalker.currentNode = current;\n    const prevMode = mode;\n    mode = 'column';\n    let node: Node | null = null;\n\n    if (prevMode === 'row') {\n      let tmp: Node | null = null;\n      while ((tmp = treeWalker.nextNode())) {\n        node = tmp;\n      }\n    } else {\n      node = treeWalker.previousNode();\n    }\n\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const right = (current: HTMLElement) => {\n    mode = 'column';\n    treeWalker.currentNode = current;\n    const node = treeWalker.nextNode();\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    const target = e.target;\n    if (!target || !isHTMLElement(target)) {\n      return;\n    }\n\n    let next: HTMLElement | null = null;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        next = down(target);\n        break;\n      case 'ArrowUp':\n        next = up(target);\n        break;\n      case 'ArrowLeft':\n        next = left(target);\n        break;\n      case 'ArrowRight':\n        next = right(target);\n        break;\n      case 'Tab':\n        movingOut = true;\n        if (e.shiftKey) {\n          pre.focus();\n        } else {\n          post.focus();\n        }\n\n        break;\n      default:\n        break;\n    }\n\n    if (next) {\n      e.preventDefault();\n      next.focus();\n    }\n  };\n\n  container.addEventListener('keydown', onKeyDown);\n  return () => container.removeEventListener('keydown', onKeyDown);\n}\n\nfunction isHTMLElement(node: unknown): node is HTMLElement {\n  return node instanceof HTMLElement;\n}\n\nfunction isRow(element: HTMLElement) {\n  if (element.getAttribute('role') === 'row' || element.tagName === 'TR') {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isCell(element: HTMLElement) {\n  if (\n    element.getAttribute('role') === 'cell' ||\n    element.getAttribute('role') === 'gridcell' ||\n    element.tagName === 'TD'\n  ) {\n    return true;\n  }\n\n  return false;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/navigationModes/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNavigationMode = void 0; // eslint-disable-next-line deprecation/deprecation
-
-var useNavigationMode_1 = /*#__PURE__*/require("./useNavigationMode");
-
-Object.defineProperty(exports, "useNavigationMode", {
-  enumerable: true,
-  get: function () {
-    return useNavigationMode_1.useNavigationMode;
-  }
-});
-//# sourceMappingURL=index.js.map

package/lib-commonjs/navigationModes/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-table/src/navigationModes/index.ts"],"names":[],"mappings":";;;;;oCAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,mBAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { useNavigationMode } from './useNavigationMode';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/navigationModes/useNavigationMode.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNavigationMode = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
-const composite_1 = /*#__PURE__*/require("./composite");
-
-const cell_1 = /*#__PURE__*/require("./cell");
-/**
- * THIS HOOK WILL NOT EXIST IN STABLE RELEASE
- * Just a quick workaround before tabster fully supports these navigation modes with grid mode
- * https://github.com/microsoft/fluentui/issues/24382
- * @internal
- * @deprecated
- */
-
-
-function useNavigationMode(mode) {
-  const rowNavigationAttr = react_tabster_1.useArrowNavigationGroup({
-    axis: 'vertical'
-  });
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    switch (mode) {
-      case 'cell':
-        cell_1.applyCellNavigation(ref.current);
-        break;
-
-      case 'composite':
-        composite_1.applyCompositeNavigation(ref.current);
-        break;
-
-      case 'row':
-        if (rowNavigationAttr['data-tabster']) {
-          ref.current.setAttribute('data-tabster', rowNavigationAttr['data-tabster']);
-        }
-
-        break;
-    }
-  }, [rowNavigationAttr, mode]);
-  return ref;
-}
-
-exports.useNavigationMode = useNavigationMode;
-//# sourceMappingURL=useNavigationMode.js.map

package/lib-commonjs/navigationModes/useNavigationMode.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-table/src/navigationModes/useNavigationMode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,MAAA,gBAAA,OAAA,CAAA,QAAA,CAAA;AAIA;;;;;;AAMG;;;AACH,SAAgB,iBAAhB,CAAgE,IAAhE,EAAoF;EAClF,MAAM,iBAAiB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IAAE,IAAI,EAAE;EAAR,CAAxB,CAA1B;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAC,GAAG,CAAC,OAAT,EAAkB;MAChB;IACD;;IAED,QAAQ,IAAR;MACE,KAAK,MAAL;QACE,MAAA,CAAA,mBAAA,CAAoB,GAAG,CAAC,OAAxB;QACA;;MACF,KAAK,WAAL;QACE,WAAA,CAAA,wBAAA,CAAyB,GAAG,CAAC,OAA7B;QACA;;MACF,KAAK,KAAL;QACE,IAAI,iBAAiB,CAAC,cAAD,CAArB,EAAuC;UACrC,GAAG,CAAC,OAAJ,CAAY,YAAZ,CAAyB,cAAzB,EAAyC,iBAAiB,CAAC,cAAD,CAA1D;QACD;;QACD;IAXJ;EAaD,CAlBD,EAkBG,CAAC,iBAAD,EAAoB,IAApB,CAlBH;EAoBA,OAAO,GAAP;AACD;;AAzBD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { applyCompositeNavigation } from './composite';\nimport { applyCellNavigation } from './cell';\n\nexport type NavigationMode = 'row' | 'cell' | 'composite';\n\n/**\n * THIS HOOK WILL NOT EXIST IN STABLE RELEASE\n * Just a quick workaround before tabster fully supports these navigation modes with grid mode\n * https://github.com/microsoft/fluentui/issues/24382\n * @internal\n * @deprecated\n */\nexport function useNavigationMode<TElement extends HTMLElement>(mode: NavigationMode) {\n  const rowNavigationAttr = useArrowNavigationGroup({ axis: 'vertical' });\n  const ref = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    switch (mode) {\n      case 'cell':\n        applyCellNavigation(ref.current);\n        break;\n      case 'composite':\n        applyCompositeNavigation(ref.current);\n        break;\n      case 'row':\n        if (rowNavigationAttr['data-tabster']) {\n          ref.current.setAttribute('data-tabster', rowNavigationAttr['data-tabster']);\n        }\n        break;\n    }\n  }, [rowNavigationAttr, mode]);\n\n  return ref;\n}\n"],"sourceRoot":"../src/"}