@veeqo/ui 9.9.1 → 9.9.3

package/dist/components/DataGrid/hooks/useKeyboardNavigation.js

@@ -0,0 +1,110 @@
+import { useEffect } from 'react';
+import { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors.js';
+
+/**
+ * Finds a target element to be selected within a table cell element. If the table cell
+ * contains focusable children, the first child will be returned, otherwise we'll simply
+ * focus on the table cell.
+ */
+const findTargetElement = (tableCell) => {
+    const validChildTarget = tableCell.querySelector(TABBABLE_SELECTORS);
+    return validChildTarget !== null && validChildTarget !== undefined ? validChildTarget : tableCell;
+};
+/**
+ * Finds the next available cell that can be focused by the user, within the next row.
+ */
+const findNextCell = (nextRow, nextCellIndex) => {
+    if (nextCellIndex >= nextRow.cells.length ||
+        nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')) {
+        // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.
+        return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));
+    }
+    return nextRow.cells[nextCellIndex];
+};
+/**
+ * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.
+ * @param table The table element.
+ * @param event The keyboard event.
+ */
+const handleKeyDown = (table, event) => {
+    var _a;
+    const target = event.target;
+    if (!table)
+        return;
+    const currentCell = target.closest('td, th');
+    if (!currentCell)
+        return;
+    const currentRow = currentCell.parentElement;
+    if (!currentRow)
+        return;
+    const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);
+    const cellIndex = Array.from(currentRow.children).indexOf(currentCell);
+    let nextRowIndex = rowIndex;
+    let nextCellIndex = cellIndex;
+    switch (event.key) {
+        case 'ArrowUp':
+            event.preventDefault();
+            nextRowIndex = Math.max(0, rowIndex - 1);
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);
+            break;
+        case 'ArrowLeft':
+            event.preventDefault();
+            nextCellIndex = Math.max(0, cellIndex - 1);
+            break;
+        case 'ArrowRight':
+            event.preventDefault();
+            nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);
+            break;
+        default:
+            return;
+    }
+    const nextRow = table.rows[nextRowIndex];
+    const nextCell = findNextCell(nextRow, nextCellIndex);
+    if (nextCell) {
+        const nextTarget = findTargetElement(nextCell);
+        nextTarget.setAttribute('tabindex', '0');
+        (_a = nextTarget.scrollIntoView) === null || _a === undefined ? undefined : _a.call(nextTarget, { inline: 'nearest', block: 'nearest' });
+        nextTarget.focus();
+        // Clear the tabindex when the element loses focus
+        nextTarget.addEventListener('blur', () => {
+            if (nextTarget.attributes.getNamedItem('data-first')) {
+                return;
+            }
+            nextTarget.removeAttribute('tabindex');
+        }, { once: true });
+    }
+};
+/**
+ * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled
+ * with the `enableKeyboardNavigation` prop.
+ *
+ * Supports navigating between cells and rows, with the focus directed either towards the cell element, or
+ * the first interactive child if one is present.
+ */
+const useKeyboardNavigation = ({ enableKeyboardNavigation, tableRef, }) => {
+    useEffect(() => {
+        if (!tableRef.current || !enableKeyboardNavigation) {
+            return undefined;
+        }
+        const table = tableRef.current;
+        // Find the first column header in the table, and assign it a tabindex.
+        const firstElement = table.querySelector('th');
+        if (!firstElement)
+            return undefined;
+        const firstTarget = findTargetElement(firstElement);
+        firstTarget.setAttribute('tabindex', '0');
+        firstTarget.setAttribute('data-first', '');
+        const handler = (event) => handleKeyDown(table, event);
+        table.addEventListener('keydown', handler);
+        return () => {
+            table.removeEventListener('keydown', handler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableRef, enableKeyboardNavigation]);
+};
+
+export { useKeyboardNavigation };
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/components/DataGrid/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DataGrid/hooks/useSelectionState.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
+    const internalSelectionState = React.useMemo(() => {
+        if (!selectedRows || !onSelectionChanged)
+            return {};
+        return selectedRows.reduce((acc, rowId) => ({
+            ...acc,
+            [rowId]: true,
+        }), {});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRows]);
+    const setInternalSelectionState = React.useCallback((onUpdate) => {
+        if (!onSelectionChanged)
+            return;
+        const newSelectionState = typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;
+        const rowIds = Object.entries(newSelectionState)
+            .filter(([, selected]) => selected)
+            .map(([rowId]) => rowId);
+        onSelectionChanged(rowIds);
+    }, [onSelectionChanged, internalSelectionState]);
+    // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table
+    // to consider every row "un-selectable". Otherwise, we defer to whether or not a row is present within the
+    // array of disabled row ID's.
+    const enableRowSelection = React.useMemo(() => {
+        if (selectedRows === undefined || onSelectionChanged === undefined) {
+            return false;
+        }
+        return (row) => !(disabledRows === null || disabledRows === undefined ? undefined : disabledRows.includes(row.id));
+    }, [selectedRows, onSelectionChanged, disabledRows]);
+    const enableMultiRowSelection = React.useMemo(() => {
+        if (!enableRowSelection) {
+            return false;
+        }
+        return selectionMode === 'multiple';
+    }, [enableRowSelection, selectionMode]);
+    return {
+        enableRowSelection,
+        enableMultiRowSelection,
+        rowSelection: internalSelectionState,
+        onRowSelectionChange: setInternalSelectionState,
+    };
+};
+
+exports.useSelectionState = useSelectionState;
+//# sourceMappingURL=useSelectionState.cjs.map

package/dist/components/DataGrid/hooks/useSelectionState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionState.cjs","sources":["../../../../src/components/DataGrid/hooks/useSelectionState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';\nimport { SelectionMode } from '../types/enums';\n\ntype UseSelectionProps = {\n  selectionMode?: SelectionMode;\n  selectedRows?: string[];\n  disabledRows?: string[];\n  onSelectionChanged?: (rowIds: string[]) => void;\n};\n\n/**\n * Hook which manages interop between selection props and the internal TanStack selection state.\n */\nexport const useSelectionState = ({\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n}: UseSelectionProps) => {\n  const internalSelectionState: RowSelectionState = useMemo(() => {\n    if (!selectedRows || !onSelectionChanged) return {};\n\n    return selectedRows.reduce(\n      (acc, rowId) => ({\n        ...acc,\n        [rowId]: true,\n      }),\n      {},\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedRows]);\n\n  const setInternalSelectionState: OnChangeFn<RowSelectionState> = useCallback(\n    (onUpdate) => {\n      if (!onSelectionChanged) return;\n\n      const newSelectionState =\n        typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;\n\n      const rowIds = Object.entries(newSelectionState)\n        .filter(([, selected]) => selected)\n        .map(([rowId]) => rowId);\n\n      onSelectionChanged(rowIds);\n    },\n    [onSelectionChanged, internalSelectionState],\n  );\n\n  // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table\n  // to consider every row \"un-selectable\". Otherwise, we defer to whether or not a row is present within the\n  // array of disabled row ID's.\n  const enableRowSelection = useMemo(() => {\n    if (selectedRows === undefined || onSelectionChanged === undefined) {\n      return false;\n    }\n\n    return (row: Row<any>) => !disabledRows?.includes(row.id);\n  }, [selectedRows, onSelectionChanged, disabledRows]);\n\n  const enableMultiRowSelection = useMemo(() => {\n    if (!enableRowSelection) {\n      return false;\n    }\n    return selectionMode === 'multiple';\n  }, [enableRowSelection, selectionMode]);\n\n  return {\n    enableRowSelection,\n    enableMultiRowSelection,\n    rowSelection: internalSelectionState,\n    onRowSelectionChange: setInternalSelectionState,\n  };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAYA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACA,KAAI;AACtB,IAAA,MAAM,sBAAsB,GAAsBA,aAAO,CAAC,MAAK;AAC7D,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;AAAE,YAAA,OAAO,EAAE;QAEnD,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,KAAK,MAAM;AACf,YAAA,GAAG,GAAG;YACN,CAAC,KAAK,GAAG,IAAI;SACd,CAAC,EACF,EAAE,CACH;;AAEH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,yBAAyB,GAAkCC,iBAAW,CAC1E,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,kBAAkB;YAAE;AAEzB,QAAA,MAAM,iBAAiB,GACrB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,GAAG,QAAQ;AAE9E,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB;aAC5C,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,QAAQ;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE1B,kBAAkB,CAAC,MAAM,CAAC;AAC5B,KAAC,EACD,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAC7C;;;;AAKD,IAAA,MAAM,kBAAkB,GAAGD,aAAO,CAAC,MAAK;AACtC,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE;AAClE,YAAA,OAAO,KAAK;AACb;QAED,OAAO,CAAC,GAAa,KAAK,EAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,6BAAZ,YAAY,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAC1D,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;AAEpD,IAAA,MAAM,uBAAuB,GAAGA,aAAO,CAAC,MAAK;QAC3C,IAAI,CAAC,kBAAkB,EAAE;AACvB,YAAA,OAAO,KAAK;AACb;QACD,OAAO,aAAa,KAAK,UAAU;AACrC,KAAC,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAEvC,OAAO;QACL,kBAAkB;QAClB,uBAAuB;AACvB,QAAA,YAAY,EAAE,sBAAsB;AACpC,QAAA,oBAAoB,EAAE,yBAAyB;KAChD;AACH;;;;"}

package/dist/components/DataGrid/hooks/useSelectionState.d.ts

@@ -0,0 +1,18 @@
+import { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
+import { SelectionMode } from '../types/enums';
+type UseSelectionProps = {
+    selectionMode?: SelectionMode;
+    selectedRows?: string[];
+    disabledRows?: string[];
+    onSelectionChanged?: (rowIds: string[]) => void;
+};
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+export declare const useSelectionState: ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }: UseSelectionProps) => {
+    enableRowSelection: boolean | ((row: Row<any>) => boolean);
+    enableMultiRowSelection: boolean;
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: OnChangeFn<RowSelectionState>;
+};
+export {};

package/dist/components/DataGrid/hooks/useSelectionState.js

@@ -0,0 +1,49 @@
+import { useMemo, useCallback } from 'react';
+
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
+    const internalSelectionState = useMemo(() => {
+        if (!selectedRows || !onSelectionChanged)
+            return {};
+        return selectedRows.reduce((acc, rowId) => ({
+            ...acc,
+            [rowId]: true,
+        }), {});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRows]);
+    const setInternalSelectionState = useCallback((onUpdate) => {
+        if (!onSelectionChanged)
+            return;
+        const newSelectionState = typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;
+        const rowIds = Object.entries(newSelectionState)
+            .filter(([, selected]) => selected)
+            .map(([rowId]) => rowId);
+        onSelectionChanged(rowIds);
+    }, [onSelectionChanged, internalSelectionState]);
+    // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table
+    // to consider every row "un-selectable". Otherwise, we defer to whether or not a row is present within the
+    // array of disabled row ID's.
+    const enableRowSelection = useMemo(() => {
+        if (selectedRows === undefined || onSelectionChanged === undefined) {
+            return false;
+        }
+        return (row) => !(disabledRows === null || disabledRows === undefined ? undefined : disabledRows.includes(row.id));
+    }, [selectedRows, onSelectionChanged, disabledRows]);
+    const enableMultiRowSelection = useMemo(() => {
+        if (!enableRowSelection) {
+            return false;
+        }
+        return selectionMode === 'multiple';
+    }, [enableRowSelection, selectionMode]);
+    return {
+        enableRowSelection,
+        enableMultiRowSelection,
+        rowSelection: internalSelectionState,
+        onRowSelectionChange: setInternalSelectionState,
+    };
+};
+
+export { useSelectionState };
+//# sourceMappingURL=useSelectionState.js.map

package/dist/components/DataGrid/hooks/useSelectionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionState.js","sources":["../../../../src/components/DataGrid/hooks/useSelectionState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';\nimport { SelectionMode } from '../types/enums';\n\ntype UseSelectionProps = {\n  selectionMode?: SelectionMode;\n  selectedRows?: string[];\n  disabledRows?: string[];\n  onSelectionChanged?: (rowIds: string[]) => void;\n};\n\n/**\n * Hook which manages interop between selection props and the internal TanStack selection state.\n */\nexport const useSelectionState = ({\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n}: UseSelectionProps) => {\n  const internalSelectionState: RowSelectionState = useMemo(() => {\n    if (!selectedRows || !onSelectionChanged) return {};\n\n    return selectedRows.reduce(\n      (acc, rowId) => ({\n        ...acc,\n        [rowId]: true,\n      }),\n      {},\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedRows]);\n\n  const setInternalSelectionState: OnChangeFn<RowSelectionState> = useCallback(\n    (onUpdate) => {\n      if (!onSelectionChanged) return;\n\n      const newSelectionState =\n        typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;\n\n      const rowIds = Object.entries(newSelectionState)\n        .filter(([, selected]) => selected)\n        .map(([rowId]) => rowId);\n\n      onSelectionChanged(rowIds);\n    },\n    [onSelectionChanged, internalSelectionState],\n  );\n\n  // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table\n  // to consider every row \"un-selectable\". Otherwise, we defer to whether or not a row is present within the\n  // array of disabled row ID's.\n  const enableRowSelection = useMemo(() => {\n    if (selectedRows === undefined || onSelectionChanged === undefined) {\n      return false;\n    }\n\n    return (row: Row<any>) => !disabledRows?.includes(row.id);\n  }, [selectedRows, onSelectionChanged, disabledRows]);\n\n  const enableMultiRowSelection = useMemo(() => {\n    if (!enableRowSelection) {\n      return false;\n    }\n    return selectionMode === 'multiple';\n  }, [enableRowSelection, selectionMode]);\n\n  return {\n    enableRowSelection,\n    enableMultiRowSelection,\n    rowSelection: internalSelectionState,\n    onRowSelectionChange: setInternalSelectionState,\n  };\n};\n"],"names":[],"mappings":";;AAYA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACA,KAAI;AACtB,IAAA,MAAM,sBAAsB,GAAsB,OAAO,CAAC,MAAK;AAC7D,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;AAAE,YAAA,OAAO,EAAE;QAEnD,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,KAAK,MAAM;AACf,YAAA,GAAG,GAAG;YACN,CAAC,KAAK,GAAG,IAAI;SACd,CAAC,EACF,EAAE,CACH;;AAEH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,yBAAyB,GAAkC,WAAW,CAC1E,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,kBAAkB;YAAE;AAEzB,QAAA,MAAM,iBAAiB,GACrB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,GAAG,QAAQ;AAE9E,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB;aAC5C,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,QAAQ;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE1B,kBAAkB,CAAC,MAAM,CAAC;AAC5B,KAAC,EACD,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAC7C;;;;AAKD,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;AACtC,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE;AAClE,YAAA,OAAO,KAAK;AACb;QAED,OAAO,CAAC,GAAa,KAAK,EAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,6BAAZ,YAAY,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAC1D,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;AAEpD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,IAAI,CAAC,kBAAkB,EAAE;AACvB,YAAA,OAAO,KAAK;AACb;QACD,OAAO,aAAa,KAAK,UAAU;AACrC,KAAC,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAEvC,OAAO;QACL,kBAAkB;QAClB,uBAAuB;AACvB,QAAA,YAAY,EAAE,sBAAsB;AACpC,QAAA,oBAAoB,EAAE,yBAAyB;KAChD;AACH;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts

@@ -1,6 +1,6 @@
 import React, { AriaAttributes, ReactElement } from 'react';
 import { SizeScale } from 'Theme/modules/sizes';
-import { BorderMode, ResizeMode } from './enums';
+import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
 import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
@@ -44,6 +44,11 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Additional styles to be applied to the grid container.
      */
     containerStyle?: React.CSSProperties;
+    /**
+     * Enable/disable keyboard navigation within the grid. Using the arrow keys will move users between cells and rows, selecting either the cell (if no interactive children are found),
+     * or the first interactive child within the cell (if one is present).
+     */
+    enableKeyboardNavigation?: boolean;
     /** Columns */
     /**
      * Column definitions. It is not recommended that you modify these once the table has been initialized, since internal state
@@ -82,4 +87,21 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Handler called when the sort state changes.
      */
     onSortChanged?: (sortState: SortState) => void;
+    /** Selection */
+    /**
+     * The selection mode, single or multiple.
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * An array of row ID's that are selected in the grid.
+     */
+    selectedRows?: string[];
+    /**
+     * An array of row ID's that are disabled.
+     */
+    disabledRows?: string[];
+    /**
+     * Handler called when the row selection is changed.
+     */
+    onSelectionChanged?: (selectedRows: string[]) => void;
 };

package/dist/components/DataGrid/types/enums.d.ts

@@ -1,3 +1,4 @@
 export type ResizeMode = 'onChange' | 'onEnd' | 'off';
 export type BorderMode = 'full' | 'vertical' | 'none';
 export type SortDirection = 'asc' | 'desc';
+export type SelectionMode = 'single' | 'multiple';

package/dist/components/DataGrid/types/index.d.ts

@@ -1,4 +1,4 @@
-export { ResizeMode, BorderMode } from './enums';
+export { ResizeMode, BorderMode, SelectionMode, SortDirection } from './enums';
 export { DataGridProps } from './DataGridProps';
 export { AriaRoles } from './AriaRoles';
 export { ColumnDefinition } from './ColumnDefinition';

package/dist/components/DataGrid/utils/getAriaRoles.cjs

@@ -1,9 +1,15 @@
 'use strict';
 
-const getAriaRoles = () => {
+const getAriaRoles = (enableKeyboardNavigation) => {
+    if (!enableKeyboardNavigation) {
+        return {
+            table: 'table',
+            cell: 'cell',
+        };
+    }
     return {
-        table: 'table',
-        cell: 'cell',
+        table: 'grid',
+        cell: 'gridcell',
     };
 };
 

package/dist/components/DataGrid/utils/getAriaRoles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (): AriaRoles => {\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,MAAgB;IAC1C,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}
+{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (enableKeyboardNavigation: boolean): AriaRoles => {\n  if (!enableKeyboardNavigation) {\n    return {\n      table: 'table',\n      cell: 'cell',\n    };\n  }\n\n  return {\n    table: 'grid',\n    cell: 'gridcell',\n  };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,wBAAiC,KAAe;IAC3E,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;SACb;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,UAAU;KACjB;AACH;;;;"}

package/dist/components/DataGrid/utils/getAriaRoles.d.ts

@@ -1,2 +1,2 @@
 import { AriaRoles } from '../types/AriaRoles';
-export declare const getAriaRoles: () => AriaRoles;
+export declare const getAriaRoles: (enableKeyboardNavigation: boolean) => AriaRoles;

package/dist/components/DataGrid/utils/getAriaRoles.js

@@ -1,7 +1,13 @@
-const getAriaRoles = () => {
+const getAriaRoles = (enableKeyboardNavigation) => {
+    if (!enableKeyboardNavigation) {
+        return {
+            table: 'table',
+            cell: 'cell',
+        };
+    }
     return {
-        table: 'table',
-        cell: 'cell',
+        table: 'grid',
+        cell: 'gridcell',
     };
 };
 

package/dist/components/DataGrid/utils/getAriaRoles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (): AriaRoles => {\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":"AAEO,MAAM,YAAY,GAAG,MAAgB;IAC1C,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}
+{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (enableKeyboardNavigation: boolean): AriaRoles => {\n  if (!enableKeyboardNavigation) {\n    return {\n      table: 'table',\n      cell: 'cell',\n    };\n  }\n\n  return {\n    table: 'grid',\n    cell: 'gridcell',\n  };\n};\n"],"names":[],"mappings":"AAEa,MAAA,YAAY,GAAG,CAAC,wBAAiC,KAAe;IAC3E,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;SACb;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,UAAU;KACjB;AACH;;;;"}

package/dist/components/Popover/hooks/useHandleFocus.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var tabbableSelectors = require('../../../utils/tabbableSelectors.cjs');
 
-const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
 const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLock = false, }) => {
     /**
      * Focuses first element, when this gets rendered for the first time.
@@ -10,7 +10,7 @@ const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLoc
     React.useEffect(() => {
         if (!popperElement || disableFocusLock)
             return;
-        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        const focusableElements = popperElement.querySelectorAll(tabbableSelectors.TABBABLE_SELECTORS);
         if (focusableElements.length < 1)
             return;
         setTimeout(() => {
@@ -28,7 +28,7 @@ const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLoc
             return;
         const focusWithinPopper = (event) => {
             if (event.key === 'Tab' && !event.shiftKey) {
-                const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+                const focusableElements = popperElement.querySelectorAll(tabbableSelectors.TABBABLE_SELECTORS);
                 // When nothing is focusable within the popover, close popover and allow natural tab order.
                 if (focusableElements.length < 1) {
                     onClose();
@@ -49,7 +49,7 @@ const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLoc
      * popover, or forward past the last scrollable element within.
      */
     const handleFocusTrap = (event) => {
-        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        const focusableElements = popperElement.querySelectorAll(tabbableSelectors.TABBABLE_SELECTORS);
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         // If shift tabbing (BACK) and on the first element, loop to last element.

package/dist/components/Popover/hooks/useHandleFocus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleFocus.cjs","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nconst TABBABLE_SELECTORS =\n  'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":["useEffect"],"mappings":";;;;AAEA,MAAM,kBAAkB,GACtB,oMAAoM;AASzL,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACHA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}
+{"version":3,"file":"useHandleFocus.cjs","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":["useEffect","TABBABLE_SELECTORS"],"mappings":";;;;;AAWa,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACHA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAACC,oCAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACHD,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAACC,oCAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAACA,oCAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Popover/hooks/useHandleFocus.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
+import { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors.js';
 
-const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
 const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLock = false, }) => {
     /**
      * Focuses first element, when this gets rendered for the first time.

package/dist/components/Popover/hooks/useHandleFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleFocus.js","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nconst TABBABLE_SELECTORS =\n  'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GACtB,oMAAoM;AASzL,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACH,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}
+{"version":3,"file":"useHandleFocus.js","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;AAWa,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACH,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Radio/Radio.cjs

@@ -9,13 +9,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Radio = React.forwardRef(({ checked, value, name, disabled, onChange, id, children, ...otherProps }, ref) => {
+const Radio = React.forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = React.useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = id !== null && id !== undefined ? id : generateId.generateId('radio');
     return (React__default.default.createElement(Choice.Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
+        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
         children));
 });
 

package/dist/components/Radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EACR,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.d.ts

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
+import React, { AriaAttributes, ReactNode } from 'react';
 import { ForwardedChoiceProps } from '../Choice';
 type RadioValue = string | number;
-export interface RadioProps extends ForwardedChoiceProps {
+export interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {
     id?: string;
     className?: string;
     checked: boolean;

package/dist/components/Radio/Radio.js

@@ -3,13 +3,13 @@ import { Choice } from '../Choice/Choice.js';
 import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
 
-const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, children, ...otherProps }, ref) => {
+const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = id !== null && id !== undefined ? id : generateId('radio');
     return (React__default.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
+        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
         children));
 });
 

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EACR,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      checked,\n      value,\n      name,\n      disabled,\n      onChange,\n      id,\n      children,\n      'aria-label': ariaLabel,\n      ...otherProps\n    }: RadioProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n          aria-label={ariaLabel}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/utils/tabbableSelectors.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+
+exports.TABBABLE_SELECTORS = TABBABLE_SELECTORS;
+//# sourceMappingURL=tabbableSelectors.cjs.map

package/dist/utils/tabbableSelectors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbableSelectors.cjs","sources":["../../src/utils/tabbableSelectors.ts"],"sourcesContent":["export const TABBABLE_SELECTORS =\n  'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n"],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAC7B;;;;"}

package/dist/utils/tabbableSelectors.d.ts

@@ -0,0 +1 @@
+export declare const TABBABLE_SELECTORS = "input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])";

package/dist/utils/tabbableSelectors.js

@@ -0,0 +1,4 @@
+const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+
+export { TABBABLE_SELECTORS };
+//# sourceMappingURL=tabbableSelectors.js.map

package/dist/utils/tabbableSelectors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbableSelectors.js","sources":["../../src/utils/tabbableSelectors.ts"],"sourcesContent":["export const TABBABLE_SELECTORS =\n  'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n"],"names":[],"mappings":"AAAO,MAAM,kBAAkB,GAC7B;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.9.1",
+  "version": "9.9.3",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",