@digigov/ui 0.32.2 → 0.34.0

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,67 +21,92 @@ 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>;
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (innerRef.current && !innerRef.current.contains(event.target)) {
-        innerRef.current.open = false;
-      }
-    };
-    if (closeBehaviour === 'clickOutside') {
-      document.addEventListener('click', handleClickOutside, true);
-    }
-    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';
+export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
+  function Dropdown(
+    { closeBehaviour = 'clickOutside', float = false, ...props },
+    ref
+  ) {
+    const innerRef = useRef<HTMLDetailsElement | null>(null);
+
+    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);
       }
-    };
-  }, []);
-  // 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/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

@@ -16,11 +16,13 @@ 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';
 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__/Stacked.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/core/Table';
+
+export const Stacked = () => {
+  return (
+    <TableContainer>
+      <Table stacked="always">
+        <TableCaption>Περίοδος και ποσά</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>Περίοδος</TableHeadCell>
+            <TableHeadCell>Κανονικό ποσό</TableHeadCell>
+            <TableHeadCell>Μειωμένο ποσό</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableDataCell data-label="Περίοδος">
+              Πρώτες 6 εβδομάδες
+            </TableDataCell>
+            <TableDataCell data-label="Κανονικό ποσό">
+              €109.80 / εβδομάδα
+            </TableDataCell>
+            <TableDataCell data-label="Μειωμένο ποσό">
+              €69.80 / εβδομάδα
+            </TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell data-label="Περίοδος">
+              Επόμενες 33 εβδομάδες
+            </TableDataCell>
+            <TableDataCell data-label="Κανονικό ποσό">
+              €99.80 / εβδομάδα
+            </TableDataCell>
+            <TableDataCell data-label="Μειωμένο ποσό">
+              €64.80 / εβδομάδα
+            </TableDataCell>
+          </TableRow>
+          <TableRow>
+            <TableDataCell data-label="Περίοδος">Συνολικό ποσό </TableDataCell>
+            <TableDataCell data-label="Κανονικό ποσό">€4.282,20 </TableDataCell>
+            <TableDataCell data-label="Μειωμένο ποσό"> €3.282,20</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default Stacked;

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

@@ -0,0 +1,152 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+  TableNoDataRow,
+  TableSortLabel,
+} from '@digigov/ui/core/Table';
+import { useSort } from '@digigov/ui/hooks/useSort';
+
+const headerConfig = [
+  {
+    name: 'product',
+    label: 'Προϊόν',
+    sortLabels: {
+      asc: 'Αλφαβητική σειρά (Α -> Ω)',
+      desc: 'Αλφαβητική σειρά (Ω -> Α)',
+    },
+  },
+  {
+    name: 'price',
+    label: 'Τιμή',
+    sortLabels: {
+      asc: 'Αύξουσα σειρά',
+      desc: 'Φθίνουσα σειρά',
+    },
+  },
+  {
+    name: 'stock',
+    label: 'Στοκ',
+    sortLabels: {
+      asc: 'Αύξουσα σειρά',
+      desc: 'Φθίνουσα σειρά',
+    },
+  },
+  {
+    name: 'date',
+    label: 'Ημερομηνία',
+    sortLabels: {
+      asc: 'Αύξουσα σειρά',
+      desc: 'Φθίνουσα σειρά',
+    },
+  },
+];
+
+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, setSortedField, field, direction } = useSort(data);
+
+  return (
+    <div className="example">
+      <TableContainer>
+        <Table>
+          <TableCaption>Table of products</TableCaption>
+          <TableHead>
+            <TableRow>
+              {headerConfig.map((header, index) => {
+                return (
+                  <TableHeadCell key={index}>
+                    <TableSortLabel
+                      labels={header.sortLabels}
+                      onSort={(dir) => setSortedField(header.name, dir)}
+                      direction={header.name === field ? direction : 0}
+                    >
+                      {header.label}
+                    </TableSortLabel>
+                  </TableHeadCell>
+                );
+              })}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {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,115 @@
+import React, { useRef } from 'react';
+import Table from '@digigov/react-core/Table';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+  DropdownProps,
+} 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 CaretContainer from '@digigov/ui/core/CaretContainer';
+
+export type SortDirection = 1 | -1 | 0;
+
+export interface TableSortLabelProps extends DropdownProps {
+  labels: {
+    asc: string;
+    desc: string;
+  };
+  disabled?: boolean;
+  direction?: SortDirection;
+  onSort: (direction: SortDirection) => void;
+}
+
+export const TableSortLabel = React.forwardRef<
+  HTMLDetailsElement,
+  TableSortLabelProps
+>(function TableSortLabel(
+  { labels, disabled, children, direction = 0, onSort, ...props },
+  ref
+) {
+  // TODO: this is a workaround for the dropdown component
+  // https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
+  const dropdownRef = useRef<HTMLDetailsElement | null>(null);
+  const active = [-1, 1].includes(direction);
+  return (
+    <Dropdown
+      ref={(el) => {
+        dropdownRef.current = el;
+        typeof ref === 'function' && ref(el);
+      }}
+      disabled={disabled}
+      {...props}
+    >
+      <DropdownButton variant="link" tabIndex={0} underline={active}>
+        {children}
+        <CaretContainer marginLeft={1}>
+          <CaretIcon
+            direction={'up'}
+            size="m"
+            variant={direction === 1 ? 'dark' : 'gray'}
+          />
+          <CaretIcon
+            direction={'down'}
+            size="m"
+            variant={direction === -1 ? 'dark' : 'gray'}
+          />
+        </CaretContainer>
+      </DropdownButton>
+      <DropdownContent>
+        <NavVertical>
+          <NavVerticalItem
+            active={direction === 1}
+            tabIndex={0}
+            onClick={() => {
+              onSort(1);
+              dropdownRef.current && (dropdownRef.current.open = false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                onSort(1);
+                dropdownRef.current && (dropdownRef.current.open = false);
+              }
+            }}
+          >
+            <CaretIcon
+              direction={'up'}
+              marginRight={1}
+              marginTop={1}
+              size="m"
+            />
+            {labels.asc}
+          </NavVerticalItem>
+          <NavVerticalItem
+            active={direction === -1}
+            tabIndex={0}
+            onClick={() => {
+              onSort(-1);
+              dropdownRef.current && (dropdownRef.current.open = false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                onSort(-1);
+                dropdownRef.current && (dropdownRef.current.open = false);
+              }
+            }}
+          >
+            <CaretIcon
+              direction={'down'}
+              marginRight={1}
+              marginTop={1}
+              size="m"
+            />
+            {labels.desc}
+          </NavVerticalItem>
+        </NavVertical>
+      </DropdownContent>
+    </Dropdown>
+  );
+});
+
 export * from '@digigov/react-core/TableContainer';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';
@@ -8,6 +120,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';
-
-import Table from '@digigov/react-core/Table';
 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/hooks/useSort.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { useMemo } from 'react';
+import { SortDirection } from '@digigov/ui/core/Table';
+
+export interface UseSortResult {
+  sortedData: any[];
+  setSortedField: (item: string, value: SortDirection) => void;
+  field: string;
+  direction: SortDirection;
+}
+export type SortData = Record<string, any>[];
+export const useSort = (data: SortData): UseSortResult => {
+  const [sortDataBy, setSortDataBy] = useState('');
+  const [direction, setDirection] = useState<-1 | 1 | 0>(0);
+  const sortedItems = useMemo(() => {
+    const sortableItems = [...data];
+    if (sortableItems.length === 0) {
+      return [];
+    }
+    if (sortDataBy) {
+      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, {
+              numeric: true,
+            }) * (direction > 0 ? 1 : -1)
+        );
+      });
+    }
+    return sortableItems;
+  }, [data, direction, sortDataBy]);
+
+  const setSortedField = (item, value) => {
+    if (item === sortDataBy && value === direction) {
+      setDirection(0);
+      setSortDataBy('');
+      return;
+    }
+    setDirection(value);
+    setSortDataBy(item);
+  };
+
+  return {
+    sortedData: sortedItems,
+    setSortedField,
+    field: sortDataBy,
+    direction,
+  };
+};

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),