@digigov/ui 0.32.2 → 0.33.0

package/registry.js

@@ -153,6 +153,8 @@ var _digigov_ui_core_Button_ThemeToggleButton = _interopRequireWildcard(require(
 
 var _digigov_ui_core_Card = _interopRequireWildcard(require("@digigov/ui/core/Card"));
 
+var _digigov_ui_core_CaretContainer = _interopRequireWildcard(require("@digigov/ui/core/CaretContainer"));
+
 var _digigov_ui_core_Checkbox = _interopRequireWildcard(require("@digigov/ui/core/Checkbox"));
 
 var _digigov_ui_core_DateInputContainer = _interopRequireWildcard(require("@digigov/ui/core/DateInputContainer"));
@@ -597,6 +599,7 @@ var _default = {
   '@digigov/ui/core/Button': lazyImport(_digigov_ui_core_Button),
   '@digigov/ui/core/Button/ThemeToggleButton': lazyImport(_digigov_ui_core_Button_ThemeToggleButton),
   '@digigov/ui/core/Card': lazyImport(_digigov_ui_core_Card),
+  '@digigov/ui/core/CaretContainer': lazyImport(_digigov_ui_core_CaretContainer),
   '@digigov/ui/core/Checkbox': lazyImport(_digigov_ui_core_Checkbox),
   '@digigov/ui/core/DateInputContainer': lazyImport(_digigov_ui_core_DateInputContainer),
   '@digigov/ui/core/Details': lazyImport(_digigov_ui_core_Details),

package/src/admin/Drawer/__stories__/Default.tsx

@@ -69,9 +69,10 @@ export const Default = () => {
 
   const layout = 'vertical';
   const border = false;
+  const fixed = false;
 
   return (
-    <Drawer direction="left" open={open}>
+    <Drawer upRelative="m" direction="left" open={open}>
       <DrawerHeading onClick={() => toggleDrawer()}>
         <Title size="md">Menu</Title>
       </DrawerHeading>
@@ -79,6 +80,7 @@ export const Default = () => {
         layout={layout}
         links={links}
         border={border}
+        fixed={fixed}
         aria-label="Nav list"
       >
         {links.map((item, key) => (

package/src/admin/Dropdown/index.tsx

@@ -21,22 +21,30 @@ export interface DropdownProps extends DropdownBaseProps {
 /**
  * Dropdown component is used for showing more options with a button.
  */
-export const Dropdown = ({
-  closeBehaviour = 'clickOutside',
-  float = false,
-  ...props
-}: DropdownProps): React.ReactElement => {
-  const innerRef = useRef() as React.MutableRefObject<HTMLDetailsElement>;
 
+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;
       }
     };
+
     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;
@@ -76,12 +84,13 @@ export const Dropdown = ({
       if (float) {
         innerRef.current.removeEventListener('toggle', toggleFloat);
       }
+      document.removeEventListener('keydown', keyDownHandler);
     };
   }, []);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return <DropdownBase ref={innerRef} {...props} />;
-};
+});
 
 export { DropdownBase };
 export default Dropdown;

package/src/core/CaretContainer/index.tsx

@@ -0,0 +1,3 @@
+import CaretContainer from '@digigov/react-core/CaretContainer';
+export * from '@digigov/react-core/CaretContainer';
+export default CaretContainer;

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

@@ -22,5 +22,6 @@ export * from './__stories__/WithLoader';
 export * from './__stories__/DefinedWidth';
 export * from './__stories__/Densed';
 export * from './__stories__/MultipleProps';
+export * from './__stories__/WithSortFilters';
 export * from './__stories__/WithFloatingScroll';
 export * from './__stories__/Full';

package/src/core/Table/Table.stories.playwright.json

@@ -16,6 +16,22 @@
           "title": "Toggle Loading"
         }
       ]
+    },
+    "digigov-ui-core-table--with-sort-filters": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>table>thead>tr>th:nth-child(2)>details>summary"
+              }
+            }
+          ],
+          "id": "Gdm_Fpollj7d",
+          "title": "Table with filter action"
+        }
+      ]
     }
   }
 }

package/src/core/Table/__stories__/WithSortFilters.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCellSort,
+  TableDataCell,
+  TableNoDataRow,
+  useSortableData,
+} from '@digigov/ui/core/Table';
+
+const headerItems = [
+  {
+    name: 'product',
+    label: 'Προϊόν',
+    sortLabels: [
+      {
+        label: 'Αλφαβητική σειρά (Α -> Ω)',
+        direction: 'asc',
+        value: 1,
+      },
+      {
+        label: 'Αλφαβητική σειρά (Ω -> Α)',
+        direction: 'desc',
+        value: -1,
+      },
+    ],
+  },
+  {
+    name: 'price',
+    label: 'Τιμή',
+    sortLabels: [
+      {
+        label: 'Αύξουσα σειρά',
+        direction: 'ascending',
+        value: 1,
+      },
+      {
+        label: 'Φθίνουσα σειρά',
+        direction: 'descending',
+        value: -1,
+      },
+    ],
+  },
+  {
+    name: 'stock',
+    label: 'Στοκ',
+    sortLabels: [
+      {
+        label: 'Αύξουσα σειρά',
+        direction: 'ascending',
+        value: 1,
+      },
+      {
+        label: 'Φθίνουσα σειρά',
+        direction: 'descending',
+        value: -1,
+      },
+    ],
+  },
+  {
+    name: 'date',
+    label: 'Ημερομηνία',
+    sortLabels: [
+      {
+        label: 'Αύξουσα σειρά',
+        direction: 'ascending',
+        value: 1,
+      },
+      {
+        label: 'Φθίνουσα σειρά',
+        direction: 'descending',
+        value: -1,
+      },
+    ],
+  },
+];
+
+const data = [
+  {
+    id: 1,
+    product: 'Τυρί',
+    price: '4.9€',
+    stock: 20,
+    date: '2013-04-01',
+  },
+  {
+    id: 2,
+    product: 'Γάλα',
+    price: '1.9€',
+    stock: 32,
+    date: '2013-01-01',
+  },
+  {
+    id: 3,
+    product: 'Γιαούρτι',
+    price: '2.4€',
+    stock: 12,
+    date: '2002-04-12',
+  },
+  {
+    id: 4,
+    product: 'Κρέμα',
+    price: '3.9€',
+    stock: 8,
+    date: '2011-12-12',
+  },
+  {
+    id: 5,
+    product: 'Βούτυρο',
+    price: '0.9€',
+    stock: 99,
+    date: '2019-06-01',
+  },
+  {
+    id: 6,
+    product: 'Καφές',
+    price: '2.9€',
+    stock: 86,
+    date: '2023-02-11',
+  },
+  {
+    id: 7,
+    product: 'Ψωμί',
+    price: '99€',
+    stock: 12,
+    date: '2000-12-12',
+  },
+];
+
+export const WithSortFilters = () => {
+  const { sortedData, sortedProps } = useSortableData(data);
+
+  return (
+    <div className="example">
+      <TableContainer
+      /* Possible style solution in order to display dropdown properly when we have only one table row
+       * style={{
+       *   overflow: 'inherit',
+       *  }}
+       */
+      >
+        <Table>
+          <TableCaption>Table of products</TableCaption>
+          <TableHead>
+            <TableRow>
+              {headerItems &&
+                headerItems.length > 0 &&
+                headerItems.map((header, index) => {
+                  return (
+                    <TableHeadCellSort
+                      key={index}
+                      {...sortedProps}
+                      headerItems={header}
+                    >
+                      {header.label}
+                    </TableHeadCellSort>
+                  );
+                })}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {sortedData && sortedData.length > 0 ? (
+              sortedData.map((d, index) => {
+                return (
+                  <TableRow key={index}>
+                    <TableDataCell>{d.product}</TableDataCell>
+                    <TableDataCell>{d.price}</TableDataCell>
+                    <TableDataCell>{d.stock}</TableDataCell>
+                    <TableDataCell>
+                      {new Date(d.date).toLocaleDateString('en-GB')}
+                    </TableDataCell>
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableNoDataRow>No data</TableNoDataRow>
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};
+export default WithSortFilters;

package/src/core/Table/index.tsx

@@ -1,3 +1,197 @@
+import React, { useCallback, useState, 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, {
+  TableHeadCellProps as TableHeadCellSortProps,
+} from '@digigov/react-core/TableHeadCell';
+import CaretContainer from '@digigov/ui/core/CaretContainer';
+
+export interface sortedProps extends TableHeadCellSortProps {
+  sortedAscDesc?: (x: any, y: number) => void;
+  sortedField?: string;
+  sortedDirectionValue?: number;
+  headerItems?: any;
+  sortedData?: any[];
+}
+
+const useSortableData = (items) => {
+  const [field, setField] = useState('');
+  const [directionValue, setDirectionValue] = useState(0);
+  const sortedItems = useMemo(() => {
+    const sortableItems = [...items];
+    if (sortableItems.length === 0) {
+      return;
+    }
+    if (field) {
+      sortableItems.sort((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]);
+
+  const sortAscDesc = (item, value) => {
+    setDirectionValue(value);
+    setField(item);
+  };
+
+  return {
+    sortedData: sortedItems,
+    sortedProps: {
+      sortedData: sortedItems,
+      sortedDirectionValue: directionValue,
+      sortedField: field,
+      sortedAscDesc: sortAscDesc,
+    },
+  };
+};
+const TableHeadCellSort = React.forwardRef<HTMLTableCellElement, sortedProps>(
+  function TableHeadCellSort({ ...props }, ref) {
+    return <TableHeadCellSortBase ref={ref} {...props} />;
+  }
+);
+
+export const TableHeadCellSortBase = React.forwardRef<
+  HTMLTableCellElement,
+  sortedProps
+>(function TableHeadCellSortBase(
+  {
+    sortedAscDesc,
+    sortedField,
+    sortedDirectionValue,
+    headerItems,
+    sortedData,
+    children,
+    ...props
+  },
+  ref
+) {
+  const innerRef = useRef() as React.MutableRefObject<HTMLDetailsElement>;
+  const { name, sortLabels } = headerItems || {};
+  const [sortDirection, setSortDirection] = useState(0);
+  const setSortAscDesc = useCallback(
+    (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]
+  );
+  const onKeyDown = useCallback(
+    (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]
+  );
+  const setDisabled = useCallback(
+    (sortedData) => {
+      return sortedData === undefined || sortedData.length === 0 ? true : false;
+    },
+    [sortedData]
+  );
+  const setCaretColor = useCallback(
+    (value: number) => {
+      if (sortedField === name) {
+        return sortedDirectionValue === value ? 'dark' : 'gray';
+      } else {
+        return 'gray';
+      }
+    },
+    [sortedDirectionValue, sortedField]
+  );
+  return (
+    <TableHeadCellBase {...props} ref={ref}>
+      <Dropdown tabIndex={0} disabled={setDisabled(sortedData)} ref={innerRef}>
+        <DropdownButton
+          variant="link"
+          underline={sortedField === name ? true : false}
+        >
+          {children}
+          <CaretContainer marginLeft={1}>
+            {sortLabels &&
+              sortLabels.length > 0 &&
+              sortLabels.map((obj, index) => {
+                return (
+                  <CaretIcon
+                    key={index}
+                    direction={obj.value == 1 ? 'up' : 'down'}
+                    size="m"
+                    variant={setCaretColor(obj.value)}
+                  />
+                );
+              })}
+          </CaretContainer>
+        </DropdownButton>
+        <DropdownContent>
+          {sortLabels &&
+            sortLabels.length > 0 &&
+            sortLabels.map((obj, index) => {
+              return (
+                <NavVertical key={index}>
+                  <NavVerticalItem
+                    {...(sortedField === name &&
+                      sortedDirectionValue === obj.value && { active: true })}
+                    tabIndex={0}
+                    onClick={() => {
+                      if (setSortAscDesc) {
+                        setSortAscDesc(name, obj.value);
+                        innerRef.current.open = false;
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      onKeyDown(e, name, obj.value);
+                    }}
+                  >
+                    <CaretIcon
+                      direction={obj.value == 1 ? 'up' : 'down'}
+                      marginRight={1}
+                      marginTop={1}
+                      size="m"
+                    />
+                    {obj.label}
+                  </NavVerticalItem>
+                </NavVertical>
+              );
+            })}
+        </DropdownContent>
+      </Dropdown>
+    </TableHeadCellBase>
+  );
+});
+
 export * from '@digigov/react-core/TableContainer';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';
@@ -8,6 +202,5 @@ 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';
-
-import Table from '@digigov/react-core/Table';
+export { TableHeadCellSort, useSortableData };
 export default Table;

package/src/core/index.ts

@@ -6,6 +6,7 @@ export * from '@digigov/ui/core/Accordion';
 export * from '@digigov/ui/core/Blockquote';
 export * from '@digigov/ui/core/Breadcrumbs';
 export * from '@digigov/ui/core/Card';
+export * from '@digigov/ui/core/CaretContainer';
 export * from '@digigov/ui/core/Checkbox';
 export * from '@digigov/ui/core/DateInputContainer';
 export * from '@digigov/ui/core/Details';

package/src/registry.js

@@ -72,6 +72,7 @@ import * as _digigov_ui_core_Button_Icon from '@digigov/ui/core/Button/Icon';
 import * as _digigov_ui_core_Button from '@digigov/ui/core/Button';
 import * as _digigov_ui_core_Button_ThemeToggleButton from '@digigov/ui/core/Button/ThemeToggleButton';
 import * as _digigov_ui_core_Card from '@digigov/ui/core/Card';
+import * as _digigov_ui_core_CaretContainer from '@digigov/ui/core/CaretContainer';
 import * as _digigov_ui_core_Checkbox from '@digigov/ui/core/Checkbox';
 import * as _digigov_ui_core_DateInputContainer from '@digigov/ui/core/DateInputContainer';
 import * as _digigov_ui_core_Details from '@digigov/ui/core/Details';
@@ -287,6 +288,7 @@ export default {
   '@digigov/ui/core/Button': lazyImport(_digigov_ui_core_Button),
   '@digigov/ui/core/Button/ThemeToggleButton': lazyImport(_digigov_ui_core_Button_ThemeToggleButton),
   '@digigov/ui/core/Card': lazyImport(_digigov_ui_core_Card),
+  '@digigov/ui/core/CaretContainer': lazyImport(_digigov_ui_core_CaretContainer),
   '@digigov/ui/core/Checkbox': lazyImport(_digigov_ui_core_Checkbox),
   '@digigov/ui/core/DateInputContainer': lazyImport(_digigov_ui_core_DateInputContainer),
   '@digigov/ui/core/Details': lazyImport(_digigov_ui_core_Details),