@digigov/ui 0.33.0 → 0.35.0

package/esm/core/Table/index.js

@@ -1,171 +1,88 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["sortedAscDesc", "sortedField", "sortedDirectionValue", "headerItems", "sortedData", "children"];
-import React, { useCallback, useState, useRef } from 'react';
+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 { useMemo } from 'react';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
 import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
 import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
 import { CaretIcon } from '@digigov/ui/core/SvgIcon';
-import TableHeadCellBase from '@digigov/react-core/TableHeadCell';
 import CaretContainer from '@digigov/ui/core/CaretContainer';
 
-var useSortableData = function useSortableData(items) {
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      field = _useState2[0],
-      setField = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      directionValue = _useState4[0],
-      setDirectionValue = _useState4[1];
-
-  var sortedItems = useMemo(function () {
-    var sortableItems = _toConsumableArray(items);
-
-    if (sortableItems.length === 0) {
-      return;
-    }
-
-    if (field) {
-      sortableItems.sort(function (a, b) {
-        if (a[field] === null) return 1;
-        if (b[field] === null) return -1;
-        if (a[field] === null && b[field] === null) return 0;
-        return a[field].toString().localeCompare(b[field].toString(), undefined, {
-          numeric: true
-        }) * (directionValue > 0 ? 1 : -1);
-      });
-    }
-
-    return sortableItems;
-  }, [items, directionValue, field]);
-
-  var sortAscDesc = function sortAscDesc(item, value) {
-    setDirectionValue(value);
-    setField(item);
-  };
-
-  return {
-    sortedData: sortedItems,
-    sortedProps: {
-      sortedData: sortedItems,
-      sortedDirectionValue: directionValue,
-      sortedField: field,
-      sortedAscDesc: sortAscDesc
-    }
-  };
-};
-
-var TableHeadCellSort = /*#__PURE__*/React.forwardRef(function TableHeadCellSort(_ref, ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(TableHeadCellSortBase, _extends({
-    ref: ref
-  }, props));
+var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
+  direction: 'up',
+  marginRight: 1,
+  marginTop: 1,
+  size: "m"
 });
-export var TableHeadCellSortBase = /*#__PURE__*/React.forwardRef(function TableHeadCellSortBase(_ref2, ref) {
-  var sortedAscDesc = _ref2.sortedAscDesc,
-      sortedField = _ref2.sortedField,
-      sortedDirectionValue = _ref2.sortedDirectionValue,
-      headerItems = _ref2.headerItems,
-      sortedData = _ref2.sortedData,
-      children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
-  var innerRef = useRef();
-
-  var _ref3 = headerItems || {},
-      name = _ref3.name,
-      sortLabels = _ref3.sortLabels;
 
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      sortDirection = _useState6[0],
-      setSortDirection = _useState6[1];
-
-  var setSortAscDesc = useCallback(function (name, value) {
-    if (sortedAscDesc) {
-      if (sortedField !== name) {
-        sortedAscDesc('', 0);
-        setSortDirection(value);
-        sortedAscDesc(name, value);
-      } else {
-        if (value !== sortDirection) {
-          setSortDirection(value);
-          sortedAscDesc(name, value);
-        } else {
-          setSortDirection(0);
-          sortedAscDesc('', 0);
-        }
-      }
-    }
-  }, [sortedField, sortedDirectionValue, sortDirection]);
-
-  var _onKeyDown = useCallback(function (e, name, value) {
-    if (e.key === 'Enter' && innerRef.current.contains(e.target)) {
-      if (innerRef.current.open) {
-        setSortAscDesc(name, value);
-        innerRef.current.open = false;
-      }
-    }
-  }, [name, sortDirection]);
+var _ref3 = /*#__PURE__*/React.createElement(CaretIcon, {
+  direction: 'down',
+  marginRight: 1,
+  marginTop: 1,
+  size: "m"
+});
 
-  var setDisabled = useCallback(function (sortedData) {
-    return sortedData === undefined || sortedData.length === 0 ? true : false;
-  }, [sortedData]);
-  var setCaretColor = useCallback(function (value) {
-    if (sortedField === name) {
-      return sortedDirectionValue === value ? 'dark' : 'gray';
-    } else {
-      return 'gray';
-    }
-  }, [sortedDirectionValue, sortedField]);
-  return /*#__PURE__*/React.createElement(TableHeadCellBase, _extends({}, props, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Dropdown, {
-    tabIndex: 0,
-    disabled: setDisabled(sortedData),
-    ref: innerRef
-  }, /*#__PURE__*/React.createElement(DropdownButton, {
+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);
+    },
+    disabled: disabled
+  }, props), /*#__PURE__*/React.createElement(DropdownButton, {
     variant: "link",
-    underline: sortedField === name ? true : false
+    tabIndex: 0,
+    underline: active
   }, children, /*#__PURE__*/React.createElement(CaretContainer, {
     marginLeft: 1
-  }, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
-    return /*#__PURE__*/React.createElement(CaretIcon, {
-      key: index,
-      direction: obj.value == 1 ? 'up' : 'down',
-      size: "m",
-      variant: setCaretColor(obj.value)
-    });
-  }))), /*#__PURE__*/React.createElement(DropdownContent, null, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
-    return /*#__PURE__*/React.createElement(NavVertical, {
-      key: index
-    }, /*#__PURE__*/React.createElement(NavVerticalItem, _extends({}, sortedField === name && sortedDirectionValue === obj.value && {
-      active: true
-    }, {
-      tabIndex: 0,
-      onClick: function onClick() {
-        if (setSortAscDesc) {
-          setSortAscDesc(name, obj.value);
-          innerRef.current.open = false;
-        }
-      },
-      onKeyDown: function onKeyDown(e) {
-        _onKeyDown(e, name, obj.value);
+  }, /*#__PURE__*/React.createElement(CaretIcon, {
+    direction: 'up',
+    size: "m",
+    variant: direction === 1 ? 'dark' : 'gray'
+  }), /*#__PURE__*/React.createElement(CaretIcon, {
+    direction: 'down',
+    size: "m",
+    variant: direction === -1 ? 'dark' : 'gray'
+  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+    active: direction === 1,
+    tabIndex: 0,
+    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: obj.value == 1 ? 'up' : 'down',
-      marginRight: 1,
-      marginTop: 1,
-      size: "m"
-    }), obj.label));
-  }))));
+    }
+  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavVerticalItem, {
+    active: direction === -1,
+    tabIndex: 0,
+    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);
+      }
+    }
+  }, _ref3, labels.desc))));
 });
 export * from '@digigov/react-core/TableContainer';
 export * from '@digigov/react-core/Table';
@@ -177,5 +94,4 @@ export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
 export * from '@digigov/react-core/TableNoDataRow';
 export * from '@digigov/ui/core/Table/TableFloatingScroll';
-export { TableHeadCellSort, useSortableData };
 export default Table;

package/esm/hooks/useSort.js

@@ -0,0 +1,54 @@
+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);
+
+    if (sortableItems.length === 0) {
+      return [];
+    }
+
+    if (sortDataBy) {
+      sortableItems.sort(function (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, {
+          numeric: true
+        }) * (direction > 0 ? 1 : -1);
+      });
+    }
+
+    return sortableItems;
+  }, [data, direction, sortDataBy]);
+
+  var setSortedField = function setSortedField(item, value) {
+    if (item === sortDataBy && value === direction) {
+      setDirection(0);
+      setSortDataBy('');
+      return;
+    }
+
+    setDirection(value);
+    setSortDataBy(item);
+  };
+
+  return {
+    sortedData: sortedItems,
+    setSortedField: setSortedField,
+    field: sortDataBy,
+    direction: direction
+  };
+};

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.33.0
+/** @license Digigov v0.35.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/registry.js

@@ -161,6 +161,7 @@ import * as _digigov_ui_hooks_useLineHeight from '@digigov/ui/hooks/useLineHeigh
 import * as _digigov_ui_hooks_useNavList from '@digigov/ui/hooks/useNavList';
 import * as _digigov_ui_hooks_useOutdatedBrowserCheck from '@digigov/ui/hooks/useOutdatedBrowserCheck';
 import * as _digigov_ui_hooks_useSearch from '@digigov/ui/hooks/useSearch';
+import * as _digigov_ui_hooks_useSort from '@digigov/ui/hooks/useSort';
 import * as _digigov_ui_hooks_useTheme from '@digigov/ui/hooks/useTheme';
 import * as _digigov_ui_hooks_useTogglableNav from '@digigov/ui/hooks/useTogglableNav';
 import * as _digigov_ui_hooks_useTogglableTab from '@digigov/ui/hooks/useTogglableTab';
@@ -374,6 +375,7 @@ export default {
   '@digigov/ui/hooks/useNavList': lazyImport(_digigov_ui_hooks_useNavList),
   '@digigov/ui/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/hooks/useSearch': lazyImport(_digigov_ui_hooks_useSearch),
+  '@digigov/ui/hooks/useSort': lazyImport(_digigov_ui_hooks_useSort),
   '@digigov/ui/hooks/useTheme': lazyImport(_digigov_ui_hooks_useTheme),
   '@digigov/ui/hooks/useTogglableNav': lazyImport(_digigov_ui_hooks_useTogglableNav),
   '@digigov/ui/hooks/useTogglableTab': lazyImport(_digigov_ui_hooks_useTogglableTab),

package/hooks/useSort.d.ts

@@ -0,0 +1,9 @@
+import { SortDirection } from '@digigov/ui/core/Table';
+export interface UseSortResult {
+    sortedData: any[];
+    setSortedField: (item: string, value: SortDirection) => void;
+    field: string;
+    direction: SortDirection;
+}
+export declare type SortData = Record<string, any>[];
+export declare const useSort: (data: SortData) => UseSortResult;

package/hooks/useSort.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSort = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useSort = function useSort(data) {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      sortDataBy = _useState2[0],
+      setSortDataBy = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      direction = _useState4[0],
+      setDirection = _useState4[1];
+
+  var sortedItems = (0, _react.useMemo)(function () {
+    var sortableItems = (0, _toConsumableArray2["default"])(data);
+
+    if (sortableItems.length === 0) {
+      return [];
+    }
+
+    if (sortDataBy) {
+      sortableItems.sort(function (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, {
+          numeric: true
+        }) * (direction > 0 ? 1 : -1);
+      });
+    }
+
+    return sortableItems;
+  }, [data, direction, sortDataBy]);
+
+  var setSortedField = function setSortedField(item, value) {
+    if (item === sortDataBy && value === direction) {
+      setDirection(0);
+      setSortDataBy('');
+      return;
+    }
+
+    setDirection(value);
+    setSortDataBy(item);
+  };
+
+  return {
+    sortedData: sortedItems,
+    setSortedField: setSortedField,
+    field: sortDataBy,
+    direction: direction
+  };
+};
+
+exports.useSort = useSort;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -20,8 +20,8 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "0.24.0",
-    "@digigov/react-extensions": "0.22.0"
+    "@digigov/react-core": "0.25.1",
+    "@digigov/react-extensions": "0.23.0"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -162,6 +162,7 @@ declare var _default: {
     '@digigov/ui/hooks/useNavList': {};
     '@digigov/ui/hooks/useOutdatedBrowserCheck': {};
     '@digigov/ui/hooks/useSearch': {};
+    '@digigov/ui/hooks/useSort': {};
     '@digigov/ui/hooks/useTheme': {};
     '@digigov/ui/hooks/useTogglableNav': {};
     '@digigov/ui/hooks/useTogglableTab': {};

package/registry.js

@@ -333,6 +333,8 @@ var _digigov_ui_hooks_useOutdatedBrowserCheck = _interopRequireWildcard(require(
 
 var _digigov_ui_hooks_useSearch = _interopRequireWildcard(require("@digigov/ui/hooks/useSearch"));
 
+var _digigov_ui_hooks_useSort = _interopRequireWildcard(require("@digigov/ui/hooks/useSort"));
+
 var _digigov_ui_hooks_useTheme = _interopRequireWildcard(require("@digigov/ui/hooks/useTheme"));
 
 var _digigov_ui_hooks_useTogglableNav = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableNav"));
@@ -689,6 +691,7 @@ var _default = {
   '@digigov/ui/hooks/useNavList': lazyImport(_digigov_ui_hooks_useNavList),
   '@digigov/ui/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/hooks/useSearch': lazyImport(_digigov_ui_hooks_useSearch),
+  '@digigov/ui/hooks/useSort': lazyImport(_digigov_ui_hooks_useSort),
   '@digigov/ui/hooks/useTheme': lazyImport(_digigov_ui_hooks_useTheme),
   '@digigov/ui/hooks/useTogglableNav': lazyImport(_digigov_ui_hooks_useTogglableNav),
   '@digigov/ui/hooks/useTogglableTab': lazyImport(_digigov_ui_hooks_useTogglableTab),

package/src/admin/Dropdown/index.tsx

@@ -22,75 +22,91 @@ export interface DropdownProps extends DropdownBaseProps {
  * Dropdown component is used for showing more options with a button.
  */
 
-export const Dropdown = React.forwardRef(function Dropdown(
-  { closeBehaviour = 'clickOutside', float = false, ...props }: DropdownProps,
-  ref: React.MutableRefObject<HTMLDetailsElement>
-): React.ReactElement {
-  const innerRef =
-    ref || (useRef() as React.MutableRefObject<HTMLDetailsElement>);
-  useEffect(() => {
-    const keyDownHandler = (event) => {
-      if (event.key === 'Escape') {
-        innerRef.current.open = false;
-        event.preventDefault();
-      }
-    };
-    const handleClickOutside = (event) => {
-      if (innerRef.current && !innerRef.current.contains(event.target)) {
-        innerRef.current.open = false;
-      }
-    };
+export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
+  function Dropdown(
+    { closeBehaviour = 'clickOutside', float = false, ...props },
+    ref
+  ) {
+    const innerRef = useRef<HTMLDetailsElement | null>(null);
 
-    if (closeBehaviour === 'clickOutside') {
-      document.addEventListener('click', handleClickOutside, true);
-    }
-    document.addEventListener('keydown', keyDownHandler);
-    const toggleFloat = () => {
-      const tbody = innerRef.current.closest('tbody') as HTMLElement;
-      const parentElement = innerRef.current?.parentElement as HTMLElement;
-      if (innerRef.current.open) {
-        tbody.style.position = 'static';
-        const rect = innerRef.current?.getBoundingClientRect();
-        const parentRect = parentElement.getBoundingClientRect();
-        innerRef.current.style.position = 'static';
-        // arbitrary spacing of 12 pixels because CSS
-        const top = rect.top + window.pageYOffset;
-        const left = rect.left + window.pageXOffset;
-        parentElement.style.height = `${parentRect.height}px`;
-        parentElement.style.width = `${parentRect.width}px`;
-        innerRef.current.style.top = `${top}px`;
-        innerRef.current.style.left = `${left}px`;
-        innerRef.current.style.position = `absolute`;
-        innerRef.current.style.display = `block`;
-        innerRef.current.style.background = 'white';
-      } else {
-        tbody.style.position = 'relative';
-        parentElement.style.height = '';
-        parentElement.style.width = '';
-        innerRef.current.style.top = `0`;
-        innerRef.current.style.left = `0`;
-        innerRef.current.style.position = `relative`;
-        innerRef.current.style.display = `table-cell`;
-        innerRef.current.style.background = 'transparent';
+    useEffect(() => {
+      const element = innerRef.current;
+      if (!element) {
+        return;
       }
-    };
-    if (float) {
-      innerRef.current.addEventListener('toggle', toggleFloat);
-    }
-    return () => {
+      const keyDownHandler = (event) => {
+        if (event.key === 'Escape') {
+          element.open = false;
+          event.preventDefault();
+        }
+      };
+      const handleClickOutside = (event) => {
+        if (element && !element.contains(event.target)) {
+          element.open = false;
+        }
+      };
+
       if (closeBehaviour === 'clickOutside') {
-        document.removeEventListener('click', handleClickOutside, true);
+        document.addEventListener('click', handleClickOutside, true);
       }
+      document.addEventListener('keydown', keyDownHandler);
+      const toggleFloat = () => {
+        const tbody = element.closest('tbody') as HTMLElement;
+        const parentElement = element?.parentElement as HTMLElement;
+        if (element.open) {
+          tbody.style.position = 'static';
+          const rect = element?.getBoundingClientRect();
+          const parentRect = parentElement.getBoundingClientRect();
+          element.style.position = 'static';
+          // arbitrary spacing of 12 pixels because CSS
+          const top = rect.top + window.pageYOffset;
+          const left = rect.left + window.pageXOffset;
+          parentElement.style.height = `${parentRect.height}px`;
+          parentElement.style.width = `${parentRect.width}px`;
+          element.style.top = `${top}px`;
+          element.style.left = `${left}px`;
+          element.style.position = `absolute`;
+          element.style.display = `block`;
+          element.style.background = 'white';
+        } else {
+          tbody.style.position = 'relative';
+          parentElement.style.height = '';
+          parentElement.style.width = '';
+          element.style.top = `0`;
+          element.style.left = `0`;
+          element.style.position = `relative`;
+          element.style.display = `table-cell`;
+          // element.style.background = 'transparent';
+        }
+      };
       if (float) {
-        innerRef.current.removeEventListener('toggle', toggleFloat);
+        element.addEventListener('toggle', toggleFloat);
       }
-      document.removeEventListener('keydown', keyDownHandler);
-    };
-  }, []);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return <DropdownBase ref={innerRef} {...props} />;
-});
+      return () => {
+        if (closeBehaviour === 'clickOutside') {
+          document.removeEventListener('click', handleClickOutside, true);
+        }
+        if (float) {
+          element.removeEventListener('toggle', toggleFloat);
+        }
+        document.removeEventListener('keydown', keyDownHandler);
+      };
+    }, []);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return (
+      <DropdownBase
+        ref={(el) => {
+          innerRef.current = el;
+          if (typeof ref === 'function') {
+            ref(el);
+          }
+        }}
+        {...props}
+      />
+    );
+  }
+);
 
 export { DropdownBase };
 export default Dropdown;

package/src/core/Table/Table.stories.js

@@ -16,6 +16,7 @@ export * from './__stories__/VerticalHeaders';
 export * from './__stories__/ZebraProp';
 export * from './__stories__/NumericDataType';
 export * from './__stories__/VerticalBorders';
+export * from './__stories__/Stacked';
 export * from './__stories__/DarkVariant';
 export * from './__stories__/DarkVariantWithVerticalHeaders';
 export * from './__stories__/WithLoader';