@digigov/ui 2.0.0-0edebf87 → 2.0.0-107d908d

package/content/Table/TableFloatingScroll/index.js

@@ -1,81 +1,74 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useRef, useState } from 'react';
-export function TableFloatingScroll(props) {
-  var ref = useRef(null);
-  var contentRef = useRef(null);
-  var scrollBlockRef = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    containerWidth = _useState4[0],
-    setContainerWidth = _useState4[1];
-  var _useState5 = useState('relative'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  useEffect(function () {
-    var _ref$current;
-    var scrollBlockRefInstance = scrollBlockRef.current;
-    contentRef.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstChild;
-    // @ts-ignore
+import React, { useEffect, useRef, useState } from "react";
+function TableFloatingScroll(props) {
+  const ref = useRef(null);
+  const contentRef = useRef(null);
+  const scrollBlockRef = useRef(null);
+  const [width, setWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [position, setPosition] = useState("relative");
+  useEffect(() => {
+    const scrollBlockRefInstance = scrollBlockRef.current;
+    contentRef.current = ref.current?.firstChild;
     setContainerWidth(ref.current.offsetWidth);
     setWidth(contentRef.current.scrollWidth);
-    var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
+    const elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
     function onBodyScroll() {
-      var currentScroll = window.pageYOffset + window.innerHeight;
-      if (currentScroll < elementOffset &&
-      // @ts-ignore
+      const currentScroll = window.pageYOffset + window.innerHeight;
+      if (currentScroll < elementOffset && // @ts-ignore
       currentScroll > contentRef.current.offsetTop) {
-        setPosition('fixed');
-      } else if (currentScroll >= elementOffset ||
-      // @ts-ignore
+        setPosition("fixed");
+      } else if (currentScroll >= elementOffset || // @ts-ignore
       currentScroll <= contentRef.current.offsetTop) {
-        setPosition('relative');
+        setPosition("relative");
       }
     }
     function onBlockScroll() {
-      // @ts-ignore
       ref.current.scrollLeft = scrollBlockRefInstance.scrollLeft;
     }
-    // @ts-ignore
-    scrollBlockRefInstance.addEventListener('scroll', onBlockScroll);
-    document.addEventListener('scroll', onBodyScroll);
-    window.addEventListener('resize', function () {
-      // @ts-ignore
-      setContainerWidth(ref.current.offsetWidth);
-      // @ts-ignore
-      setWidth(contentRef.current.scrollWidth);
+    scrollBlockRefInstance.addEventListener("scroll", onBlockScroll);
+    document.addEventListener("scroll", onBodyScroll);
+    window.addEventListener("resize", () => {
+      if (ref.current?.offsetWidth) {
+        setContainerWidth(ref.current.offsetWidth);
+      }
+      if (contentRef.current?.offsetWidth) {
+        setWidth(contentRef.current.scrollWidth);
+      }
     });
-    return function () {
-      // @ts-ignore
-      scrollBlockRefInstance.removeEventListener('scroll', onBlockScroll);
-      document.removeEventListener('scroll', onBodyScroll);
+    return () => {
+      scrollBlockRefInstance.removeEventListener("scroll", onBlockScroll);
+      document.removeEventListener("scroll", onBodyScroll);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    style: {
-      maxWidth: '100%',
-      overflowX: 'scroll'
-    }
-  }, props.children), /*#__PURE__*/React.createElement("div", {
-    style: {
-      overflow: 'auto',
-      height: '35px',
-      marginTop: '-35px',
-      position: position,
-      maxWidth: "".concat(containerWidth, "px"),
-      bottom: 0
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        maxWidth: "100%",
+        overflowX: "scroll"
+      }
     },
-    ref: scrollBlockRef
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "".concat(width, "px"),
-      overflow: 'hidden'
-    }
-  })));
+    props.children
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        overflow: "auto",
+        height: "35px",
+        marginTop: "-35px",
+        position,
+        maxWidth: `${containerWidth}px`,
+        bottom: 0
+      },
+      ref: scrollBlockRef
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { width: `${width}px`, overflow: "hidden" } })
+  ));
 }
-export default TableFloatingScroll;
+var TableFloatingScroll_default = TableFloatingScroll;
+export {
+  TableFloatingScroll,
+  TableFloatingScroll_default as default
+};
+//# sourceMappingURL=TableFloatingScroll.js.map

package/content/Table/TableFloatingScroll.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare function TableFloatingScroll(props: any): JSX.Element;
+import React from 'react';
+export declare function TableFloatingScroll(props: any): React.JSX.Element;
 export default TableFloatingScroll;

package/content/Table/TableFloatingScroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/content/Table/TableFloatingScroll.tsx"],
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\n\nexport function TableFloatingScroll(props) {\n  const ref = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLElement | null>(null);\n  const scrollBlockRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [position, setPosition] = useState<'relative' | 'fixed'>('relative');\n  useEffect(() => {\n    const scrollBlockRefInstance = scrollBlockRef.current;\n    contentRef.current = ref.current?.firstChild as HTMLElement;\n    // @ts-ignore\n    setContainerWidth(ref.current.offsetWidth);\n    setWidth(contentRef.current.scrollWidth);\n    const elementOffset =\n      contentRef.current.offsetTop + contentRef.current.offsetHeight;\n    function onBodyScroll() {\n      const currentScroll = window.pageYOffset + window.innerHeight;\n      if (\n        currentScroll < elementOffset &&\n        // @ts-ignore\n        currentScroll > contentRef.current.offsetTop\n      ) {\n        setPosition('fixed');\n      } else if (\n        currentScroll >= elementOffset ||\n        // @ts-ignore\n        currentScroll <= contentRef.current.offsetTop\n      ) {\n        setPosition('relative');\n      }\n    }\n    function onBlockScroll() {\n      // @ts-ignore\n      ref.current.scrollLeft = scrollBlockRefInstance.scrollLeft;\n    }\n    // @ts-ignore\n    scrollBlockRefInstance.addEventListener('scroll', onBlockScroll);\n    document.addEventListener('scroll', onBodyScroll);\n    window.addEventListener('resize', () => {\n      if (ref.current?.offsetWidth) {\n        // @ts-ignore\n        setContainerWidth(ref.current.offsetWidth);\n      }\n      if (contentRef.current?.offsetWidth) {\n        // @ts-ignore\n        setWidth(contentRef.current.scrollWidth);\n      }\n    });\n    return () => {\n      // @ts-ignore\n      scrollBlockRefInstance.removeEventListener('scroll', onBlockScroll);\n      document.removeEventListener('scroll', onBodyScroll);\n    };\n  }, []);\n  return (\n    <>\n      <div\n        ref={ref}\n        style={{\n          maxWidth: '100%',\n          overflowX: 'scroll',\n        }}\n      >\n        {props.children}\n      </div>\n      <div\n        style={{\n          overflow: 'auto',\n          height: '35px',\n          marginTop: '-35px',\n          position: position,\n          maxWidth: `${containerWidth}px`,\n          bottom: 0,\n        }}\n        ref={scrollBlockRef}\n      >\n        <div style={{ width: `${width}px`, overflow: 'hidden' }}></div>\n      </div>\n    </>\n  );\n}\nexport default TableFloatingScroll;\n"],
+  "mappings": "AAAA,OAAO,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,oBAAoB,OAAO;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,aAAa,OAA2B,IAAI;AAClD,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,UAAU,WAAW,IAAI,SAA+B,UAAU;AACzE,YAAU,MAAM;AACd,UAAM,yBAAyB,eAAe;AAC9C,eAAW,UAAU,IAAI,SAAS;AAElC,sBAAkB,IAAI,QAAQ,WAAW;AACzC,aAAS,WAAW,QAAQ,WAAW;AACvC,UAAM,gBACJ,WAAW,QAAQ,YAAY,WAAW,QAAQ;AACpD,aAAS,eAAe;AACtB,YAAM,gBAAgB,OAAO,cAAc,OAAO;AAClD,UACE,gBAAgB;AAAA,MAEhB,gBAAgB,WAAW,QAAQ,WACnC;AACA,oBAAY,OAAO;AAAA,MACrB,WACE,iBAAiB;AAAA,MAEjB,iBAAiB,WAAW,QAAQ,WACpC;AACA,oBAAY,UAAU;AAAA,MACxB;AAAA,IACF;AACA,aAAS,gBAAgB;AAEvB,UAAI,QAAQ,aAAa,uBAAuB;AAAA,IAClD;AAEA,2BAAuB,iBAAiB,UAAU,aAAa;AAC/D,aAAS,iBAAiB,UAAU,YAAY;AAChD,WAAO,iBAAiB,UAAU,MAAM;AACtC,UAAI,IAAI,SAAS,aAAa;AAE5B,0BAAkB,IAAI,QAAQ,WAAW;AAAA,MAC3C;AACA,UAAI,WAAW,SAAS,aAAa;AAEnC,iBAAS,WAAW,QAAQ,WAAW;AAAA,MACzC;AAAA,IACF,CAAC;AACD,WAAO,MAAM;AAEX,6BAAuB,oBAAoB,UAAU,aAAa;AAClE,eAAS,oBAAoB,UAAU,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,WAAW;AAAA,MACb;AAAA;AAAA,IAEC,MAAM;AAAA,EACT,GACA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA,UAAU,GAAG,cAAc;AAAA,QAC3B,QAAQ;AAAA,MACV;AAAA,MACA,KAAK;AAAA;AAAA,IAEL,oCAAC,SAAI,OAAO,EAAE,OAAO,GAAG,KAAK,MAAM,UAAU,SAAS,GAAG;AAAA,EAC3D,CACF;AAEJ;AACA,IAAO,8BAAQ;",
+  "names": []
+}

package/content/Table/__stories__/DarkVariant.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const DarkVariant: () => JSX.Element;
+import React from 'react';
+export declare const DarkVariant: (_: any) => React.JSX.Element;
 export default DarkVariant;

package/content/Table/__stories__/DarkVariantWithVerticalHeaders.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const DarkVariantWithVerticalHeaders: () => JSX.Element;
+import React from 'react';
+export declare const DarkVariantWithVerticalHeaders: (_: any) => React.JSX.Element;
 export default DarkVariantWithVerticalHeaders;

package/content/Table/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
+import React from 'react';
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/content/Table/__stories__/DefinedWidth.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const DefinedWidth: () => JSX.Element;
+import React from 'react';
+export declare const DefinedWidth: (_: any) => React.JSX.Element;
 export default DefinedWidth;

package/content/Table/__stories__/Dense.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Dense: (_: any) => React.JSX.Element;
+export default Dense;

package/content/Table/__stories__/Full.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Full: () => JSX.Element;
+import React from 'react';
+export declare const Full: (_: any) => React.JSX.Element;
 export default Full;

package/content/Table/__stories__/MultipleProps.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const MultipleProps: () => JSX.Element;
+import React from 'react';
+export declare const MultipleProps: (_: any) => React.JSX.Element;
 export default MultipleProps;

package/content/Table/__stories__/NoData.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const NoData: () => JSX.Element;
+import React from 'react';
+export declare const NoData: (_: any) => React.JSX.Element;
 export default NoData;

package/content/Table/__stories__/NumericDataType.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const NumericDataType: () => JSX.Element;
+import React from 'react';
+export declare const NumericDataType: (_: any) => React.JSX.Element;
 export default NumericDataType;

package/content/Table/__stories__/RowColors.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const RowColors: () => JSX.Element;
+import React from 'react';
+export declare const RowColors: (_: any) => React.JSX.Element;
 export default RowColors;

package/content/Table/__stories__/Stacked.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Stacked: () => JSX.Element;
+import React from 'react';
+export declare const Stacked: (_: any) => React.JSX.Element;
 export default Stacked;

package/content/Table/__stories__/TableCaptions.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const TableCaptions: () => JSX.Element;
+import React from 'react';
+export declare const TableCaptions: (_: any) => React.JSX.Element;
 export default TableCaptions;

package/content/Table/__stories__/VerticalBorders.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const VerticalBorders: () => JSX.Element;
+import React from 'react';
+export declare const VerticalBorders: (_: any) => React.JSX.Element;
 export default VerticalBorders;

package/content/Table/__stories__/VerticalHeaders.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const VerticalHeaders: () => JSX.Element;
+import React from 'react';
+export declare const VerticalHeaders: (_: any) => React.JSX.Element;
 export default VerticalHeaders;

package/content/Table/__stories__/WithFloatingScroll.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const WithFloatingScroll: () => JSX.Element;
+import React from 'react';
+export declare const WithFloatingScroll: (_: any) => React.JSX.Element;
 export default WithFloatingScroll;

package/content/Table/__stories__/WithLoader.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const WithLoader: () => JSX.Element;
+import React from 'react';
+export declare const WithLoader: (_: any) => React.JSX.Element;
 export default WithLoader;

package/content/Table/__stories__/WithSortFilters.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const WithSortFilters: () => JSX.Element;
+import React from 'react';
+export declare const WithSortFilters: (_: any) => React.JSX.Element;
 export default WithSortFilters;

package/content/Table/__stories__/ZebraProp.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const ZebraProp: () => JSX.Element;
+import React from 'react';
+export declare const ZebraProp: (_: any) => React.JSX.Element;
 export default ZebraProp;

package/content/Table/hooks/useSort/index.js

@@ -1,37 +1,28 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useState } from 'react';
-import { useMemo } from 'react';
-export var useSort = function useSort(data) {
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    sortDataBy = _useState2[0],
-    setSortDataBy = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    direction = _useState4[0],
-    setDirection = _useState4[1];
-  var sortedItems = useMemo(function () {
-    var sortableItems = _toConsumableArray(data);
+import { useState, useMemo } from "react";
+const useSort = (data) => {
+  const [sortDataBy, setSortDataBy] = useState("");
+  const [direction, setDirection] = useState(0);
+  const sortedItems = useMemo(() => {
+    const sortableItems = [...data];
     if (sortableItems.length === 0) {
       return [];
     }
     if (sortDataBy) {
-      sortableItems.sort(function (a, b) {
+      sortableItems.sort((a, b) => {
         if (a[sortDataBy] === null) return 1;
         if (b[sortDataBy] === null) return -1;
         if (a[sortDataBy] === null && b[sortDataBy] === null) return 0;
-        return a[sortDataBy].toString().localeCompare(b[sortDataBy].toString(), undefined, {
+        return a[sortDataBy].toString().localeCompare(b[sortDataBy].toString(), void 0, {
           numeric: true
         }) * (direction > 0 ? 1 : -1);
       });
     }
     return sortableItems;
   }, [data, direction, sortDataBy]);
-  var setSortedField = function setSortedField(item, value) {
+  const setSortedField = (item, value) => {
     if (item === sortDataBy && value === direction) {
       setDirection(0);
-      setSortDataBy('');
+      setSortDataBy("");
       return;
     }
     setDirection(value);
@@ -39,8 +30,12 @@ export var useSort = function useSort(data) {
   };
   return {
     sortedData: sortedItems,
-    setSortedField: setSortedField,
+    setSortedField,
     field: sortDataBy,
-    direction: direction
+    direction
   };
-};
+};
+export {
+  useSort
+};
+//# sourceMappingURL=useSort.js.map

package/content/Table/hooks/useSort.d.ts

@@ -1,4 +1,4 @@
-import { SortDirection } from '@digigov/ui/content/Table';
+export type SortDirection = 1 | -1 | 0;
 export interface UseSortResult {
     sortedData: any[];
     setSortedField: (item: string, value: SortDirection) => void;

package/content/Table/hooks/useSort.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/Table/hooks/useSort.tsx"],
+  "sourcesContent": ["import { useState, useMemo } from 'react';\n\nexport type SortDirection = 1 | -1 | 0;\n\nexport interface UseSortResult {\n  sortedData: any[];\n  setSortedField: (item: string, value: SortDirection) => void;\n  field: string;\n  direction: SortDirection;\n}\nexport type SortData = Record<string, any>[];\nexport const useSort = (data: SortData): UseSortResult => {\n  const [sortDataBy, setSortDataBy] = useState('');\n  const [direction, setDirection] = useState<-1 | 1 | 0>(0);\n  const sortedItems = useMemo(() => {\n    const sortableItems = [...data];\n    if (sortableItems.length === 0) {\n      return [];\n    }\n    if (sortDataBy) {\n      sortableItems.sort((a, b) => {\n        if (a[sortDataBy] === null) return 1;\n        if (b[sortDataBy] === null) return -1;\n        if (a[sortDataBy] === null && b[sortDataBy] === null) return 0;\n        return (\n          a[sortDataBy]\n            .toString()\n            .localeCompare(b[sortDataBy].toString(), undefined, {\n              numeric: true,\n            }) * (direction > 0 ? 1 : -1)\n        );\n      });\n    }\n    return sortableItems;\n  }, [data, direction, sortDataBy]);\n\n  const setSortedField = (item, value) => {\n    if (item === sortDataBy && value === direction) {\n      setDirection(0);\n      setSortDataBy('');\n      return;\n    }\n    setDirection(value);\n    setSortDataBy(item);\n  };\n\n  return {\n    sortedData: sortedItems,\n    setSortedField,\n    field: sortDataBy,\n    direction,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,UAAU,eAAe;AAW3B,MAAM,UAAU,CAAC,SAAkC;AACxD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,CAAC;AACxD,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,gBAAgB,CAAC,GAAG,IAAI;AAC9B,QAAI,cAAc,WAAW,GAAG;AAC9B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,YAAY;AACd,oBAAc,KAAK,CAAC,GAAG,MAAM;AAC3B,YAAI,EAAE,UAAU,MAAM,KAAM,QAAO;AACnC,YAAI,EAAE,UAAU,MAAM,KAAM,QAAO;AACnC,YAAI,EAAE,UAAU,MAAM,QAAQ,EAAE,UAAU,MAAM,KAAM,QAAO;AAC7D,eACE,EAAE,UAAU,EACT,SAAS,EACT,cAAc,EAAE,UAAU,EAAE,SAAS,GAAG,QAAW;AAAA,UAClD,SAAS;AAAA,QACX,CAAC,KAAK,YAAY,IAAI,IAAI;AAAA,MAEhC,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,WAAW,UAAU,CAAC;AAEhC,QAAM,iBAAiB,CAAC,MAAM,UAAU;AACtC,QAAI,SAAS,cAAc,UAAU,WAAW;AAC9C,mBAAa,CAAC;AACd,oBAAc,EAAE;AAChB;AAAA,IACF;AACA,iBAAa,KAAK;AAClB,kBAAc,IAAI;AAAA,EACpB;AAEA,SAAO;AAAA,IACL,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
+  "names": []
+}

package/content/Table/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '@digigov/react-core/Table';
+import { type SortDirection } from '@digigov/ui/content/Table/hooks/useSort';
 import { DropdownProps } from '@digigov/ui/navigation/Dropdown';
-export type SortDirection = 1 | -1 | 0;
 export interface TableSortLabelProps extends DropdownProps {
     labels: {
         asc: string;
@@ -11,7 +11,7 @@ export interface TableSortLabelProps extends DropdownProps {
     direction?: SortDirection;
     onSort: (direction: SortDirection) => void;
 }
-export declare const TableSortLabel: React.ForwardRefExoticComponent<Pick<TableSortLabelProps, "children" | "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "direction" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "open" | "onToggle" | "align" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "dense" | "placement" | "closeBehaviour" | "float" | "labels" | "onSort"> & React.RefAttributes<HTMLDetailsElement>>;
+export declare const TableSortLabel: React.ForwardRefExoticComponent<Omit<TableSortLabelProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
 export * from '@digigov/react-core/TableContainer';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';

package/content/Table/index.js

@@ -1,99 +1,112 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["labels", "disabled", "children", "direction", "onSort"];
-import React, { useRef } from 'react';
-import Table from '@digigov/react-core/Table';
-import TableSortIconContainer from '@digigov/react-core/TableSortIconContainer';
-import { CaretIcon } from '@digigov/ui/icons';
-import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
-var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
-  direction: 'up',
-  marginRight: 1,
-  marginTop: 1,
-  size: "sm"
-});
-var _ref3 = /*#__PURE__*/React.createElement(CaretIcon, {
-  direction: 'down',
-  marginRight: 1,
-  marginTop: 1,
-  size: "sm"
-});
-export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(_ref, _ref4) {
-  var labels = _ref.labels,
-    disabled = _ref.disabled,
-    children = _ref.children,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 0 : _ref$direction,
-    onSort = _ref.onSort,
-    props = _objectWithoutProperties(_ref, _excluded);
-  // TODO: this is a workaround for the dropdown component
-  // https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
-  var dropdownRef = useRef(null);
-  var active = [-1, 1].includes(direction);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    ref: function ref(el) {
-      dropdownRef.current = el;
-      typeof _ref4 === 'function' && _ref4(el);
+import React, { useRef } from "react";
+import Table from "@digigov/react-core/Table";
+import TableSortIconContainer from "@digigov/react-core/TableSortIconContainer";
+import { CaretIcon } from "@digigov/ui/icons";
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent
+} from "@digigov/ui/navigation/Dropdown";
+import { NavList, NavListItemAction } from "@digigov/ui/navigation/NavList";
+const TableSortLabel = React.forwardRef(function TableSortLabel2({ labels, disabled, children, direction = 0, onSort, ...props }, ref) {
+  const dropdownRef = useRef(null);
+  const active = [-1, 1].includes(direction);
+  return /* @__PURE__ */ React.createElement(
+    Dropdown,
+    {
+      ref: (el) => {
+        dropdownRef.current = el;
+        if (typeof ref === "function") ref(el);
+      },
+      disabled,
+      ...props
     },
-    disabled: disabled
-  }, props), /*#__PURE__*/React.createElement(DropdownButton, {
-    variant: "link",
-    tabIndex: 0,
-    underline: active
-  }, children, /*#__PURE__*/React.createElement(TableSortIconContainer, {
-    marginLeft: 1
-  }, /*#__PURE__*/React.createElement(CaretIcon, {
-    direction: 'up',
-    size: "sm",
-    color: direction === 1 ? 'dark' : 'gray'
-  }), /*#__PURE__*/React.createElement(CaretIcon, {
-    direction: 'down',
-    size: "sm",
-    color: direction === -1 ? 'dark' : 'gray'
-  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
-    layout: "vertical"
-  }, /*#__PURE__*/React.createElement(NavListItemAction, {
-    active: direction === 1,
-    tabIndex: 0,
-    arrow: false,
-    onClick: function onClick() {
-      onSort(1);
-      dropdownRef.current && (dropdownRef.current.open = false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        onSort(1);
-        dropdownRef.current && (dropdownRef.current.open = false);
+    /* @__PURE__ */ React.createElement(DropdownButton, { variant: "link", tabIndex: 0, underline: active }, children, /* @__PURE__ */ React.createElement(TableSortIconContainer, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(
+      CaretIcon,
+      {
+        direction: "up",
+        size: "sm",
+        color: direction === 1 ? "dark" : "gray"
       }
-    }
-  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavListItemAction, {
-    active: direction === -1,
-    tabIndex: 0,
-    arrow: false,
-    onClick: function onClick() {
-      onSort(-1);
-      dropdownRef.current && (dropdownRef.current.open = false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        onSort(-1);
-        dropdownRef.current && (dropdownRef.current.open = false);
+    ), /* @__PURE__ */ React.createElement(
+      CaretIcon,
+      {
+        direction: "down",
+        size: "sm",
+        color: direction === -1 ? "dark" : "gray"
       }
-    }
-  }, _ref3, labels.desc))));
+    ))),
+    /* @__PURE__ */ React.createElement(DropdownContent, null, /* @__PURE__ */ React.createElement(NavList, { layout: "vertical" }, /* @__PURE__ */ React.createElement(
+      NavListItemAction,
+      {
+        active: direction === 1,
+        tabIndex: 0,
+        onClick: () => {
+          onSort(1);
+          if (dropdownRef.current) dropdownRef.current.open = false;
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onSort(1);
+            if (dropdownRef.current) dropdownRef.current.open = false;
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        CaretIcon,
+        {
+          direction: "up",
+          marginRight: 1,
+          marginTop: 1,
+          size: "sm"
+        }
+      ),
+      labels.asc
+    ), /* @__PURE__ */ React.createElement(
+      NavListItemAction,
+      {
+        active: direction === -1,
+        tabIndex: 0,
+        onClick: () => {
+          onSort(-1);
+          if (dropdownRef.current) dropdownRef.current.open = false;
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onSort(-1);
+            if (dropdownRef.current) dropdownRef.current.open = false;
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        CaretIcon,
+        {
+          direction: "down",
+          marginRight: 1,
+          marginTop: 1,
+          size: "sm"
+        }
+      ),
+      labels.desc
+    )))
+  );
 });
-export * from '@digigov/react-core/TableContainer';
-export * from '@digigov/react-core/Table';
-export * from '@digigov/react-core/TableBody';
-export * from '@digigov/react-core/TableCaption';
-export * from '@digigov/react-core/TableDataCell';
-export * from '@digigov/react-core/TableHead';
-export * from '@digigov/react-core/TableHeadCell';
-export * from '@digigov/react-core/TableRow';
-export * from '@digigov/react-core/TableNoDataRow';
-export * from '@digigov/react-core/TableLoaderBackground';
-export * from '@digigov/react-core/TableSortIconContainer';
-export * from '@digigov/ui/content/Table/TableFloatingScroll';
-export * from '@digigov/ui/content/Table/hooks/useSort';
-export default Table;
+export * from "@digigov/react-core/TableContainer";
+export * from "@digigov/react-core/Table";
+export * from "@digigov/react-core/TableBody";
+export * from "@digigov/react-core/TableCaption";
+export * from "@digigov/react-core/TableDataCell";
+export * from "@digigov/react-core/TableHead";
+export * from "@digigov/react-core/TableHeadCell";
+export * from "@digigov/react-core/TableRow";
+export * from "@digigov/react-core/TableNoDataRow";
+export * from "@digigov/react-core/TableLoaderBackground";
+export * from "@digigov/react-core/TableSortIconContainer";
+export * from "@digigov/ui/content/Table/TableFloatingScroll";
+export * from "@digigov/ui/content/Table/hooks/useSort";
+var Table_default = Table;
+export {
+  TableSortLabel,
+  Table_default as default
+};
+//# sourceMappingURL=index.js.map