@veeqo/ui 9.9.0 → 9.9.2

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

@@ -0,0 +1,38 @@
+import { useMemo, useCallback } from 'react';
+
+/**
+ * Hook which manages interop between sorting props and the internal TanStack sorting state.
+ */
+const useSortingState = ({ columns, sortState, onSortChanged }) => {
+    const internalSortState = useMemo(() => {
+        if (!sortState || !onSortChanged)
+            return undefined;
+        return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortState]);
+    const setInternalSortState = useCallback((onUpdate) => {
+        if (!onSortChanged)
+            return;
+        // TanStack can either pass us a functional updater method, or the new sort object directly.
+        const newSortState = typeof onUpdate === 'function' ? onUpdate(internalSortState) : onUpdate;
+        if (!newSortState || newSortState.length === 0)
+            return;
+        const [{ id, desc }] = newSortState;
+        onSortChanged({
+            columnId: id,
+            direction: desc ? 'desc' : 'asc',
+        });
+    }, [onSortChanged, internalSortState]);
+    const enableSorting = useMemo(() => onSortChanged !== undefined && columns.some((column) => column.sortable), [columns, onSortChanged]);
+    return {
+        enableSorting,
+        sorting: internalSortState,
+        onSortingChange: setInternalSortState,
+        manualSorting: true,
+        enableSortingRemoval: false,
+        enableMultiRemove: false,
+    };
+};
+
+export { useSortingState };
+//# sourceMappingURL=useSortingState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSortingState.js","sources":["../../../../src/components/DataGrid/hooks/useSortingState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, SortingState } from '@tanstack/react-table';\n\nimport { ColumnDefinition } from '../types';\nimport { SortState } from '../types/SortState';\n\ntype UseSortingStateProps = {\n  columns: ColumnDefinition<any>[];\n\n  sortState?: SortState;\n  onSortChanged?: (sortState: SortState) => void;\n};\n\n/**\n * Hook which manages interop between sorting props and the internal TanStack sorting state.\n */\nexport const useSortingState = ({ columns, sortState, onSortChanged }: UseSortingStateProps) => {\n  const internalSortState = useMemo(() => {\n    if (!sortState || !onSortChanged) return undefined;\n\n    return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sortState]);\n\n  const setInternalSortState: OnChangeFn<SortingState> = useCallback(\n    (onUpdate) => {\n      if (!onSortChanged) return;\n\n      // TanStack can either pass us a functional updater method, or the new sort object directly.\n      const newSortState =\n        typeof onUpdate === 'function' ? onUpdate(internalSortState as SortingState) : onUpdate;\n\n      if (!newSortState || newSortState.length === 0) return;\n\n      const [{ id, desc }] = newSortState;\n\n      onSortChanged({\n        columnId: id,\n        direction: desc ? 'desc' : 'asc',\n      });\n    },\n    [onSortChanged, internalSortState],\n  );\n\n  const enableSorting = useMemo(\n    () => onSortChanged !== undefined && columns.some((column) => column.sortable),\n    [columns, onSortChanged],\n  );\n\n  return {\n    enableSorting,\n    sorting: internalSortState,\n    onSortingChange: setInternalSortState,\n\n    manualSorting: true,\n    enableSortingRemoval: false,\n    enableMultiRemove: false,\n  };\n};\n"],"names":[],"mappings":";;AAcA;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAwB,KAAI;AAC7F,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;AACrC,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAElD,QAAA,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;;AAE3E,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,oBAAoB,GAA6B,WAAW,CAChE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,MAAM,YAAY,GAChB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,iBAAiC,CAAC,GAAG,QAAQ;AAEzF,QAAA,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE;QAEhD,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,YAAY;AAEnC,QAAA,aAAa,CAAC;AACZ,YAAA,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK;AACjC,SAAA,CAAC;AACJ,KAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,CAAC,CACnC;AAED,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,MAAM,aAAa,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,EAC9E,CAAC,OAAO,EAAE,aAAa,CAAC,CACzB;IAED,OAAO;QACL,aAAa;AACb,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,eAAe,EAAE,oBAAoB;AAErC,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,oBAAoB,EAAE,KAAK;AAC3B,QAAA,iBAAiB,EAAE,KAAK;KACzB;AACH;;;;"}

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

@@ -27,6 +27,10 @@ export type BaseColumnDefinition = {
      * provided to ensure columns are given necessary default width's for your content.
      */
     resizeable?: boolean;
+    /**
+     * Indicates whether the column is sortable or not.
+     */
+    sortable?: boolean;
     /**
      * Column width, only used when resizeable columns are enabled, otherwise the default table
      * layout algorithm will be used to determine the best fit.
@@ -46,8 +50,6 @@ export type BaseColumnDefinition = {
     /**
      * Optional getter used to create an `aria-label` for the column header. If none is provided, the
      * column's `title` will be used.
-     *
-     * TODO: Add sort direction and other information.
      */
     getAriaLabel?: () => string;
     /**

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

@@ -1,7 +1,9 @@
 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';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -58,6 +60,10 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Column ordering, an array of column ID's, can be used to reorder columns in the table.
      */
     columnOrdering?: string[];
+    /**
+     * Pinned columns, an object with two arrays of column ID's, one for columns pinned to the left and another for the right.
+     */
+    pinnedColumns?: PinnedColumnState;
     /** Rows */
     /**
      * Data to render within the table.
@@ -67,4 +73,30 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Getter which returns the ID to use for a row (a string). If one isn't provided, the row index will be used instead.
      */
     getRowId?: (row: any, index: number, parent?: any) => string;
+    /** Sorting */
+    /**
+     * The current sort state, including the selected column ID and sort direction.
+     */
+    sortState?: SortState;
+    /**
+     * 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/PinnedColumnState.d.ts

@@ -0,0 +1,4 @@
+export type PinnedColumnState = {
+    left: string[];
+    right: string[];
+};

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

@@ -0,0 +1,5 @@
+import { SortDirection } from './enums';
+export type SortState = {
+    columnId: string;
+    direction: SortDirection;
+};

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

@@ -1,2 +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,6 @@
-export { ResizeMode, BorderMode } from './enums';
+export { ResizeMode, BorderMode, SelectionMode, SortDirection } from './enums';
 export { DataGridProps } from './DataGridProps';
 export { AriaRoles } from './AriaRoles';
 export { ColumnDefinition } from './ColumnDefinition';
+export { SortState } from './SortState';
+export { PinnedColumnState } from './PinnedColumnState';

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

@@ -61,6 +61,7 @@ class ColumnMapper {
         const sharedColumnProps = {
             id: definition.id,
             enableResizing: !!definition.resizeable,
+            enableSorting: !!definition.sortable,
             header: (_a = definition.renderHeader) !== null && _a !== undefined ? _a : definition.title,
             footer: definition.renderFooter,
             size: (_b = definition.width) !== null && _b !== undefined ? _b : constants.DEFAULT_COLUMN_WIDTH,

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n \n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}

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

@@ -59,6 +59,7 @@ class ColumnMapper {
         const sharedColumnProps = {
             id: definition.id,
             enableResizing: !!definition.resizeable,
+            enableSorting: !!definition.sortable,
             header: (_a = definition.renderHeader) !== null && _a !== undefined ? _a : definition.title,
             footer: definition.renderFooter,
             size: (_b = definition.width) !== null && _b !== undefined ? _b : DEFAULT_COLUMN_WIDTH,

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n \n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,4 @@
 export { isLastColumn } from './isLastColumn';
 export { ColumnMapper } from './ColumnMapper';
 export { getAriaRoles } from './getAriaRoles';
+export { getPinnedColumnStyles, getPinnedColumnClassNames } from './pinnedColumnUtils';

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var DataGrid_module = require('../DataGrid.module.css.cjs');
+
+const getPinnedColumnStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    if (!isPinned) {
+        return {};
+    }
+    return {
+        left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,
+        right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,
+        opacity: isPinned ? 0.95 : undefined,
+        position: isPinned ? 'sticky' : undefined,
+        zIndex: isPinned ? 1 : undefined,
+    };
+};
+const getPinnedColumnClassNames = (column) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+    if (isLastLeftPinnedColumn) {
+        return DataGrid_module.pinnedColumnLeft;
+    }
+    if (isFirstRightPinnedColumn) {
+        return DataGrid_module.pinnedColumnRight;
+    }
+    return '';
+};
+
+exports.getPinnedColumnClassNames = getPinnedColumnClassNames;
+exports.getPinnedColumnStyles = getPinnedColumnStyles;
+//# sourceMappingURL=pinnedColumnUtils.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pinnedColumnUtils.cjs","sources":["../../../../src/components/DataGrid/utils/pinnedColumnUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nimport { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css';\n\nexport const getPinnedColumnStyles = (column: Column<any>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n\n  if (!isPinned) {\n    return {};\n  }\n\n  return {\n    left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,\n    right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,\n    opacity: isPinned ? 0.95 : undefined,\n    position: isPinned ? 'sticky' : undefined,\n    zIndex: isPinned ? 1 : undefined,\n  };\n};\n\nexport const getPinnedColumnClassNames = (column: Column<any>) => {\n  const isPinned = column.getIsPinned();\n\n  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  if (isLastLeftPinnedColumn) {\n    return pinnedColumnLeft;\n  }\n\n  if (isFirstRightPinnedColumn) {\n    return pinnedColumnRight;\n  }\n\n  return '';\n};\n"],"names":["pinnedColumnLeft","pinnedColumnRight"],"mappings":";;;;AAKa,MAAA,qBAAqB,GAAG,CAAC,MAAmB,KAAmB;AAC1E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAErC,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;AACV;IAED,OAAO;AACL,QAAA,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;AACnE,QAAA,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;QACrE,OAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;QACpC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS;QACzC,MAAM,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS;KACjC;AACH;AAEa,MAAA,yBAAyB,GAAG,CAAC,MAAmB,KAAI;AAC/D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;AAErC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC;AACpF,IAAA,MAAM,wBAAwB,GAAG,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAEzF,IAAA,IAAI,sBAAsB,EAAE;AAC1B,QAAA,OAAOA,gCAAgB;AACxB;AAED,IAAA,IAAI,wBAAwB,EAAE;AAC5B,QAAA,OAAOC,iCAAiB;AACzB;AAED,IAAA,OAAO,EAAE;AACX;;;;;"}

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

@@ -0,0 +1,4 @@
+import { Column } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+export declare const getPinnedColumnStyles: (column: Column<any>) => CSSProperties;
+export declare const getPinnedColumnClassNames: (column: Column<any>) => any;

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

@@ -0,0 +1,30 @@
+import { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css.js';
+
+const getPinnedColumnStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    if (!isPinned) {
+        return {};
+    }
+    return {
+        left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,
+        right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,
+        opacity: isPinned ? 0.95 : undefined,
+        position: isPinned ? 'sticky' : undefined,
+        zIndex: isPinned ? 1 : undefined,
+    };
+};
+const getPinnedColumnClassNames = (column) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+    if (isLastLeftPinnedColumn) {
+        return pinnedColumnLeft;
+    }
+    if (isFirstRightPinnedColumn) {
+        return pinnedColumnRight;
+    }
+    return '';
+};
+
+export { getPinnedColumnClassNames, getPinnedColumnStyles };
+//# sourceMappingURL=pinnedColumnUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pinnedColumnUtils.js","sources":["../../../../src/components/DataGrid/utils/pinnedColumnUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nimport { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css';\n\nexport const getPinnedColumnStyles = (column: Column<any>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n\n  if (!isPinned) {\n    return {};\n  }\n\n  return {\n    left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,\n    right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,\n    opacity: isPinned ? 0.95 : undefined,\n    position: isPinned ? 'sticky' : undefined,\n    zIndex: isPinned ? 1 : undefined,\n  };\n};\n\nexport const getPinnedColumnClassNames = (column: Column<any>) => {\n  const isPinned = column.getIsPinned();\n\n  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  if (isLastLeftPinnedColumn) {\n    return pinnedColumnLeft;\n  }\n\n  if (isFirstRightPinnedColumn) {\n    return pinnedColumnRight;\n  }\n\n  return '';\n};\n"],"names":[],"mappings":";;AAKa,MAAA,qBAAqB,GAAG,CAAC,MAAmB,KAAmB;AAC1E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAErC,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;AACV;IAED,OAAO;AACL,QAAA,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;AACnE,QAAA,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;QACrE,OAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;QACpC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS;QACzC,MAAM,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS;KACjC;AACH;AAEa,MAAA,yBAAyB,GAAG,CAAC,MAAmB,KAAI;AAC/D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;AAErC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC;AACpF,IAAA,MAAM,wBAAwB,GAAG,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAEzF,IAAA,IAAI,sBAAsB,EAAE;AAC1B,QAAA,OAAO,gBAAgB;AACxB;AAED,IAAA,IAAI,wBAAwB,EAAE;AAC5B,QAAA,OAAO,iBAAiB;AACzB;AAED,IAAA,OAAO,EAAE;AACX;;;;"}

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/package.json

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