@povio/ui 0.0.8 → 0.0.10

package/dist/hooks/useTableNav.js

@@ -0,0 +1,394 @@
+import { logger } from "../utils/logger.js";
+const Selectors = {
+  Cell: '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],td,th',
+  Row: '[role="row"],tr',
+  RowGroup: '[role="rowgroup"],thead,tbody,tfoot',
+  /** Selector from here: https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/focus.ts#L10 */
+  Focusable: 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not([aria-disabled="true"]):not([tabindex="-1"]):not(:disabled),*[tabindex]'
+};
+class DataGridNav {
+  constructor(config = {}) {
+    this.keys = [];
+    this.activeCell = null;
+    this.debugLog = (functionName, message) => {
+      if (this.debug) {
+        logger.info(`[${functionName}]: ${message}`);
+      }
+    };
+    const { selectors = {}, pageUpDown, debug = false } = config;
+    this.selectors = { ...Selectors, ...selectors };
+    this.pageUpDown = pageUpDown;
+    this.keys = [];
+    this.debug = debug;
+    this.disabled = false;
+  }
+  /**
+   * Disables the keyboard listener in cases
+   * that elements inside the grid need to use
+   * arrows keys etc., like select dropdowns
+   */
+  disable() {
+    this.disabled = true;
+  }
+  /**
+   * Enables the keyboard listeners
+   */
+  enable() {
+    this.disabled = false;
+  }
+  // oxlint-disable-next-line class-methods-use-this
+  isFocusable(el) {
+    return el instanceof HTMLElement || el instanceof SVGElement;
+  }
+  getActiveCell() {
+    return this.activeCell;
+  }
+  /** Used as a keyboard listener for key up */
+  tableKeyUp() {
+    this.keys = [];
+  }
+  /** Used as a keyboard listener for key down */
+  tableKeyDown(e) {
+    if (this.disabled) {
+      return;
+    }
+    if ("ArrowDown" === e.key || "ArrowUp" === e.key || "ArrowLeft" === e.key || "ArrowRight" === e.key) {
+      e.preventDefault();
+    }
+    if (this.keys.length === 0 || this.keys[this.keys.length - 1] !== e.key) {
+      this.keys.push(e.key);
+    }
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+    const cell = e.target.parentElement?.closest(`${this.selectors.Cell},${this.selectors.Row}`);
+    if (!cell) {
+      return;
+    }
+    if (cell.matches(this.selectors.Cell)) {
+      this.cellNavigation(e);
+    } else {
+      this.gridNavigation(e);
+    }
+  }
+  /**
+   * Handles the navigation inside a cell
+   */
+  cellNavigation(e) {
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+    if (e.key === "Escape") {
+      const cell = e.target.closest(this.selectors.Cell);
+      if (cell && this.isFocusable(cell)) {
+        cell.focus();
+        return;
+      }
+    }
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      const cell = e.target.closest(this.selectors.Cell);
+      if (!cell) {
+        return;
+      }
+      const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
+      const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
+      const nextFocusable = widgetIdx === focusableWidgets.length - 1 ? 0 : widgetIdx + 1;
+      const widgetToFocus = focusableWidgets[nextFocusable];
+      if (this.isFocusable(widgetToFocus)) {
+        widgetToFocus.focus();
+      }
+      return;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      const cell = e.target.closest(this.selectors.Cell);
+      if (!cell) {
+        return;
+      }
+      const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
+      const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
+      const previousFocusable = widgetIdx === 0 ? focusableWidgets.length - 1 : widgetIdx - 1;
+      const widgetToFocus = focusableWidgets[previousFocusable];
+      if (this.isFocusable(widgetToFocus)) {
+        widgetToFocus.focus();
+      }
+    }
+  }
+  /**
+   * Handles the navigation outside a cell
+   * on the grid level
+   */
+  gridNavigation(e) {
+    const { target } = e;
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+    if (!(target instanceof Element)) {
+      return;
+    }
+    if (this.keys.length === 1) {
+      if (/^[a-zA-Z0-9]$/.test(e.key)) {
+        const cell = e.target.querySelector(this.selectors.Focusable);
+        if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
+          cell.focus();
+          cell.value = `${cell.value}${e.key}`;
+          e.preventDefault();
+        }
+        return;
+      }
+      if (e.key === "Backspace") {
+        const cell = e.target.querySelector(this.selectors.Focusable);
+        if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
+          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+          if (nativeInputValueSetter) {
+            nativeInputValueSetter.call(cell, "");
+            const ev = new Event("input", { bubbles: true });
+            cell.dispatchEvent(ev);
+          }
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        const cell = e.target.querySelector(this.selectors.Focusable);
+        if (cell && this.isFocusable(cell)) {
+          if (cell.getAttribute("data-type") === "select-trigger") {
+            cell.click();
+            return;
+          }
+          cell.focus();
+          e.preventDefault();
+        }
+        return;
+      }
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        const direction = e.key === "ArrowLeft" ? "prev" : "next";
+        const cell = e.target.closest(this.selectors.Cell);
+        let nextCell = null;
+        if (direction === "next" && cell?.nextElementSibling instanceof HTMLElement) {
+          nextCell = cell.nextElementSibling;
+        }
+        if (direction === "prev" && cell?.previousElementSibling instanceof HTMLElement) {
+          nextCell = cell.previousElementSibling;
+        }
+        if (nextCell && this.isFocusable(nextCell)) {
+          nextCell.focus();
+          e.preventDefault();
+        }
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        this.verticalCellNavigation(e);
+        return;
+      }
+      if (e.key === "PageUp" || e.key === "PageDown") {
+        this.pageCellNavigation(e);
+        return;
+      }
+      if (e.key === "Home" || e.key === "End") {
+        const row = e.target.closest(this.selectors.Row);
+        const rowChildren = [...row?.children || []];
+        if (e.key === "End") {
+          rowChildren.reverse();
+        }
+        this.focusOnFirstCell(rowChildren);
+      }
+    } else {
+      const [firstKey, secondKey] = this.keys;
+      if (firstKey === "Control" && // oxlint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+      (secondKey === "Home" || secondKey === "End")) {
+        const row = e.target.closest(this.selectors.Row);
+        const siblings = row.parentElement?.children;
+        if (!siblings) {
+          return;
+        }
+        const rowToFocus = secondKey === "Home" ? siblings[0] : siblings[siblings.length - 1];
+        const rowChildren = [...rowToFocus?.children || []];
+        if (secondKey === "End") {
+          rowChildren.reverse();
+        }
+        this.focusOnFirstCell(rowChildren);
+      }
+    }
+  }
+  pageCellNavigation(e) {
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+    const row = e.target.closest(this.selectors.Row);
+    const cell = e.target.closest(this.selectors.Cell);
+    if (row && cell) {
+      const position = this.getColumnIndex(cell);
+      if (position === void 0) {
+        return;
+      }
+      const direction = e.key === "PageUp" ? "prev" : "next";
+      const siblings = row.parentElement?.children;
+      if (!siblings) {
+        return;
+      }
+      let destinationRow;
+      if (this.pageUpDown) {
+        const methodClbk = direction === "prev" ? "previousSibling" : "nextSibling";
+        let sibling = row[methodClbk];
+        if (sibling === null) {
+          return;
+        }
+        let lastVisitedSibling = sibling;
+        for (let i = 0; i < this.pageUpDown - 1 && sibling; i++) {
+          sibling = sibling[methodClbk];
+          if (sibling) {
+            lastVisitedSibling = sibling;
+          }
+        }
+        destinationRow = sibling || lastVisitedSibling;
+      } else {
+        destinationRow = direction === "prev" ? siblings[0] : siblings[siblings.length - 1];
+      }
+      if (!destinationRow || !(destinationRow instanceof Element)) {
+        return;
+      }
+      const child = destinationRow.children[position];
+      if (child && this.isFocusable(child)) {
+        child.focus();
+      }
+    }
+  }
+  verticalCellNavigation(e) {
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+    const row = e.target.closest(this.selectors.Row);
+    const cell = e.target.closest(this.selectors.Cell);
+    if (row && cell) {
+      const cellPosition = this.getColumnIndex(cell);
+      const rowPosition = this.getRowIndex(row);
+      if (cellPosition === void 0 || rowPosition === void 0) {
+        return;
+      }
+      const direction = e.key === "ArrowUp" ? "prev" : "next";
+      if (rowPosition === 0 && direction === "prev") {
+        const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
+        const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
+        const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
+        if (currentRowGroupIdx !== 0) {
+          const previousRowGroup = siblingRowGroups[currentRowGroupIdx - 1];
+          const rows = [...previousRowGroup.querySelectorAll(this.selectors.Row)];
+          const child2 = rows[rows.length - 1].children[cellPosition];
+          if (child2 && this.isFocusable(child2)) {
+            child2.focus();
+          }
+          return;
+        }
+      }
+      const siblingRows = [...row.parentElement?.querySelectorAll(this.selectors.Row) || []];
+      if (rowPosition === siblingRows.length - 1 && direction === "next") {
+        const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
+        const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
+        const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
+        if (currentRowGroupIdx !== siblingRowGroups.length - 1) {
+          const nextRowGroup = siblingRowGroups[currentRowGroupIdx + 1];
+          const rows = [...nextRowGroup.querySelectorAll(this.selectors.Row)];
+          const child2 = rows[0].children[cellPosition];
+          if (child2 && this.isFocusable(child2)) {
+            child2.focus();
+          }
+          return;
+        }
+        return;
+      }
+      const destinationRow = this.findUntil(direction, row, this.selectors.Row);
+      if (!destinationRow) {
+        return;
+      }
+      const child = destinationRow.children[cellPosition];
+      if (child && this.isFocusable(child)) {
+        child.focus();
+      }
+    }
+  }
+  /**
+   * Sending a row `Element` and then the first cell will be focused.
+   *
+   * If you want to focus the last cell then the row children can be passed in
+   * reversed order
+   */
+  focusOnFirstCell(el) {
+    for (let i = 0; i < el.length; i++) {
+      const child = el[i];
+      if (this.isFocusable(child)) {
+        child.focus();
+        return;
+      }
+    }
+  }
+  /**
+   * Get the column index of a `cell` based on the first `row` parent.
+   * `cellIndex` could be used, but it's not supported in HTML tables.
+   */
+  getColumnIndex(cell) {
+    let position = 0;
+    const siblings = cell?.parentNode?.children;
+    if (!siblings) {
+      return void 0;
+    }
+    while (cell !== siblings[position] && siblings[position] !== void 0) {
+      position++;
+    }
+    if (siblings[position] === void 0) {
+      return void 0;
+    }
+    return position;
+  }
+  /**
+   * Get the row index of a `row` based
+   * on its sibling rows
+   */
+  getRowIndex(row) {
+    let position = 0;
+    const siblings = row?.parentNode?.children;
+    if (!siblings) {
+      return void 0;
+    }
+    while (row !== siblings[position] && siblings[position] !== void 0) {
+      position++;
+    }
+    if (siblings[position] === void 0) {
+      return void 0;
+    }
+    return position;
+  }
+  /**
+   * Equivalent to prevUntil/nextUntil in jQuery
+   * https://api.jquery.com/prevUntil/
+   */
+  // oxlint-disable-next-line class-methods-use-this
+  findUntil(direction, el, matchSelector, exitSelector) {
+    let element = el;
+    const method = direction === "next" ? "nextSibling" : "previousSibling";
+    while (element[method]) {
+      const sibling = element[method];
+      if (!sibling) {
+        return null;
+      }
+      if (exitSelector && sibling instanceof Element && sibling.matches(exitSelector)) {
+        return null;
+      }
+      if (sibling instanceof Element && sibling.matches(matchSelector)) {
+        return sibling;
+      }
+      element = sibling;
+    }
+    return null;
+  }
+}
+function useTableNav(options) {
+  const nav = new DataGridNav(options);
+  return {
+    listeners: {
+      onKeyDown: (e) => nav.tableKeyDown(e),
+      onKeyUp: () => nav.tableKeyUp()
+    },
+    tableNav: nav
+  };
+}
+export {
+  useTableNav
+};

package/dist/hooks/useTranslationMemo.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+function useTranslationMemo(func) {
+  const { t } = useTranslation();
+  return useMemo(() => {
+    if (func.length === 1) {
+      return func(t);
+    }
+    return func();
+  }, [func, t]);
+}
+export {
+  useTranslationMemo
+};

package/dist/index.js

@@ -0,0 +1,284 @@
+import { AlignCenterIcon } from "./assets/icons/AlignCenter.js";
+import { AlignLeftIcon } from "./assets/icons/AlignLeft.js";
+import { AlignLeftRightIcon } from "./assets/icons/AlignLeftRight.js";
+import { AlignRightIcon } from "./assets/icons/AlignRight.js";
+import { ArrowDropDownIcon } from "./assets/icons/ArrowDropDown.js";
+import { ArrowDropUpIcon } from "./assets/icons/ArrowDropUp.js";
+import { ArrowLeftIcon } from "./assets/icons/ArrowLeft.js";
+import { ArrowRightIcon } from "./assets/icons/ArrowRight.js";
+import { BoldIcon } from "./assets/icons/Bold.js";
+import { BulletedListIcon } from "./assets/icons/BulletedList.js";
+import { CalendarIcon } from "./assets/icons/Calendar.js";
+import { CheckIcon } from "./assets/icons/Check.js";
+import { CheckboxCheckmarkIcon } from "./assets/icons/CheckboxCheckmark.js";
+import { CheckboxIndeterminateIcon } from "./assets/icons/CheckboxIndeterminate.js";
+import { ChevronDownIcon } from "./assets/icons/ChevronDown.js";
+import { ChevronLeftIcon } from "./assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "./assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "./assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "./assets/icons/ChevronsRight.js";
+import { ChevronUpIcon } from "./assets/icons/ChevronUp.js";
+import { ClockIcon } from "./assets/icons/Clock.js";
+import { CloseIcon } from "./assets/icons/Close.js";
+import { DateTimeIcon } from "./assets/icons/DateTime.js";
+import { HighlightIcon } from "./assets/icons/Highlight.js";
+import { HighlightOnIcon } from "./assets/icons/HighlightOn.js";
+import { InfoIcon } from "./assets/icons/Info.js";
+import { ItalicIcon } from "./assets/icons/Italic.js";
+import { LinkIcon } from "./assets/icons/Link.js";
+import { MenuIcon } from "./assets/icons/Menu.js";
+import { NumberedListIcon } from "./assets/icons/NumberedList.js";
+import { PointerHorizontalIcon } from "./assets/icons/PointerHorizontal.js";
+import { PointerVerticalIcon } from "./assets/icons/PointerVertical.js";
+import { SendIcon } from "./assets/icons/Send.js";
+import { StrikethroughIcon } from "./assets/icons/Strikethrough.js";
+import { TextColorIcon } from "./assets/icons/TextColor.js";
+import { UnderlinedIcon } from "./assets/icons/Underlined.js";
+import { ViewIcon } from "./assets/icons/View.js";
+import { ViewOffIcon } from "./assets/icons/ViewOff.js";
+import { Button } from "./components/buttons/Button/Button.js";
+import { IconButton } from "./components/buttons/IconButton/IconButton.js";
+import { InlineIconButton } from "./components/buttons/InlineIconButton/InlineIconButton.js";
+import { PillButton } from "./components/buttons/PillButton/PillButton.js";
+import { SplitButton } from "./components/buttons/SplitButton/SplitButton.js";
+import { TextButton } from "./components/buttons/TextButton/TextButton.js";
+import { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton.js";
+import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
+import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
+import { DateRangePicker } from "./components/inputs/DateTime/DateRangePicker/DateRangePicker.js";
+import { DateTimePicker } from "./components/inputs/DateTime/DateTimePicker/DateTimePicker.js";
+import { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker.js";
+import { FileUpload } from "./components/inputs/File/FileUpload.js";
+import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
+import { InputUpload } from "./components/inputs/File/InputUpload.js";
+import { FormField } from "./components/inputs/FormField/FormField.js";
+import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
+import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
+import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
+import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
+import { Form } from "./components/inputs/Inputs/Form.js";
+import { Inputs } from "./components/inputs/Inputs/Inputs.js";
+import { RadioGroup } from "./components/inputs/RadioGroup/RadioGroup.js";
+import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
+import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/QueryAutocomplete.js";
+import { Select } from "./components/inputs/Selection/Select/Select.js";
+import { Slider } from "./components/inputs/Slider/Slider.js";
+import { TextEditor } from "./components/inputs/TextEditor/TextEditor.js";
+import { Toggle } from "./components/inputs/Toggle/Toggle.js";
+import { Menu } from "./components/Menu/Menu.js";
+import { MenuPopover } from "./components/Menu/MenuPopover.js";
+import { uiOutlineClass } from "./components/outline.clsx.js";
+import { ActionModal } from "./components/overlays/ActionModal/ActionModal.js";
+import { BottomSheet } from "./components/overlays/BottomSheet/BottomSheet.js";
+import { Drawer } from "./components/overlays/Drawer/Drawer.js";
+import { Modal } from "./components/overlays/Modal/Modal.js";
+import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
+import { Tooltip } from "./components/overlays/Tooltip/Tooltip.js";
+import { TooltipEllipsis } from "./components/overlays/Tooltip/TooltipEllipsis.js";
+import { Segment } from "./components/segment/Segment.js";
+import { Pagination } from "./components/shared/pagination/Pagination.js";
+import { PaginationList } from "./components/shared/pagination/PaginationList.js";
+import { Alert } from "./components/status/Alert/Alert.js";
+import { Loader } from "./components/status/Loader/Loader.js";
+import { Toast, ToastContainer } from "./components/status/Toast/Toast.js";
+import { useToast } from "./components/status/Toast/useToast.js";
+import { CellText } from "./components/table/CellText.js";
+import { ColumnConfigModal } from "./components/table/ColumnConfig.js";
+import { HeaderText } from "./components/table/HeaderText.js";
+import { InfiniteTable } from "./components/table/InfiniteTable.js";
+import { PaginatedTable } from "./components/table/PaginatedTable.js";
+import { Table } from "./components/table/Table.js";
+import { Link } from "./components/text/Link/Link.js";
+import { Tag } from "./components/text/Tag/Tag.js";
+import { Typography } from "./components/text/Typography/Typography.js";
+import { Confirmation } from "./config/confirmation.context.js";
+import { ns, resources } from "./config/i18n.js";
+import { UIRouter } from "./config/router.context.js";
+import { UIConfig } from "./config/uiConfig.context.js";
+import { UIStyle } from "./config/uiStyle.context.js";
+import { dynamicColumns } from "./helpers/dynamicColumns.js";
+import { dynamicInputs } from "./helpers/dynamicInputs.js";
+import { useAutosave } from "./hooks/useAutosave.js";
+import { useBreakpoint } from "./hooks/useBreakpoint.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
+import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./hooks/useDeepCompare.js";
+import { useFilters } from "./hooks/useFilters.js";
+import { useForm } from "./hooks/useForm.js";
+import { useFormAutosave } from "./hooks/useFormAutosave.js";
+import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
+import { useLocalStorage } from "./hooks/useLocalStorage.js";
+import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
+import { usePagination } from "./hooks/usePagination.js";
+import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
+import { useSorting } from "./hooks/useSorting.js";
+import { useStateAndRef } from "./hooks/useStateAndRef.js";
+import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
+import { useTableNav } from "./hooks/useTableNav.js";
+import { useTranslationMemo } from "./hooks/useTranslationMemo.js";
+import { ArrayUtils } from "./utils/array.utils.js";
+import { compoundMapper } from "./utils/compoundMapper.js";
+import { DateUtils } from "./utils/date.utils.js";
+import { DateTimeUtils } from "./utils/date-time.utils.js";
+import { DomUtils } from "./utils/dom.utils.js";
+import { FileUtils } from "./utils/file.utils.js";
+import { isEqual } from "./utils/isEqual.js";
+import { logger } from "./utils/logger.js";
+import { ObjectUtils } from "./utils/object.utils.js";
+import { QueriesUtils } from "./utils/queries.utils.js";
+import { RestUtils } from "./utils/rest.utils.js";
+import { RoutingUtils } from "./utils/routing.utils.js";
+import { StringUtils } from "./utils/string.utils.js";
+import { createAclGuard } from "./utils/vendor/acl/AclGuard.js";
+import { AbilityContext } from "./utils/vendor/acl/ability.context.js";
+import { Can } from "./utils/vendor/acl/Can.js";
+import { AuthGuard } from "./utils/vendor/auth/AuthGuard.js";
+import { AuthContext } from "./utils/vendor/auth/auth.context.js";
+import { withPrivateAuthGuard } from "./utils/vendor/auth/withPrivateAuthGuard.js";
+import { ApplicationException, ErrorHandler, SharedErrorHandler } from "./utils/vendor/error-handling.js";
+import { RestInterceptor } from "./utils/vendor/rest-interceptor.js";
+export {
+  AbilityContext,
+  ActionModal,
+  Alert,
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignLeftRightIcon,
+  AlignRightIcon,
+  ApplicationException,
+  ArrayUtils,
+  ArrowDropDownIcon,
+  ArrowDropUpIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  AuthContext,
+  AuthGuard,
+  Autocomplete,
+  BoldIcon,
+  BottomSheet,
+  BulletedListIcon,
+  Button,
+  CalendarIcon,
+  Can,
+  CellText,
+  CheckIcon,
+  Checkbox,
+  CheckboxCheckmarkIcon,
+  CheckboxIndeterminateIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  ClockIcon,
+  CloseIcon,
+  ColumnConfigModal,
+  Confirmation,
+  DatePicker,
+  DateRangePicker,
+  DateTimeIcon,
+  DateTimePicker,
+  DateTimeUtils,
+  DateUtils,
+  DomUtils,
+  Drawer,
+  ErrorHandler,
+  FileUpload,
+  FileUploadContainer,
+  FileUtils,
+  Form,
+  FormField,
+  HeaderText,
+  HighlightIcon,
+  HighlightOnIcon,
+  IconButton,
+  InfiniteTable,
+  InfoIcon,
+  InlineIconButton,
+  InputUpload,
+  Inputs,
+  ItalicIcon,
+  Link,
+  LinkIcon,
+  Loader,
+  Menu,
+  MenuIcon,
+  MenuPopover,
+  Modal,
+  NumberInput,
+  NumberedListIcon,
+  ObjectUtils,
+  PaginatedTable,
+  Pagination,
+  PaginationList,
+  PasswordInput,
+  PillButton,
+  PointerHorizontalIcon,
+  PointerVerticalIcon,
+  QueriesUtils,
+  QueryAutocomplete,
+  RadioGroup,
+  ResponsivePopover,
+  RestInterceptor,
+  RestUtils,
+  RoutingUtils,
+  Segment,
+  Select,
+  SendIcon,
+  SharedErrorHandler,
+  Slider,
+  SplitButton,
+  StrikethroughIcon,
+  StringUtils,
+  Table,
+  Tag,
+  TextArea,
+  TextButton,
+  TextColorIcon,
+  TextEditor,
+  TextInput,
+  TimePicker,
+  Toast,
+  ToastContainer,
+  Toggle,
+  ToggleButton,
+  Tooltip,
+  TooltipEllipsis,
+  Typography,
+  UIConfig,
+  UIRouter,
+  UIStyle,
+  UnderlinedIcon,
+  ViewIcon,
+  ViewOffIcon,
+  compoundMapper,
+  createAclGuard,
+  dynamicColumns,
+  dynamicInputs,
+  isEqual,
+  logger,
+  ns,
+  resources,
+  uiOutlineClass,
+  useAutosave,
+  useBreakpoint,
+  useDebounceCallback,
+  useDeepCompareEffect,
+  useDeepCompareLayoutEffect,
+  useDeepCompareMemo,
+  useFilters,
+  useForm,
+  useFormAutosave,
+  useIntersectionObserver,
+  useLocalStorage,
+  useLongPressRepeat,
+  usePagination,
+  useScrollableListBox,
+  useSorting,
+  useStateAndRef,
+  useTableColumnConfig,
+  useTableNav,
+  useToast,
+  useTranslationMemo,
+  withPrivateAuthGuard
+};