From a1c1f801c2e8ab47d0a901b461db60d07e84dda6 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Mon, 14 Aug 2023 11:22:38 -0400
Subject: [PATCH 001/196] Initial commit
From 23fc9bba486c6813fde46c8cafd1211273381a10 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Mon, 14 Aug 2023 14:56:59 -0400
Subject: [PATCH 002/196] useId added to label date table by current month
---
.../itwinui-react/src/core/DatePicker/DatePicker.tsx | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx
index 3bdccac81d8..93eca4b8e8d 100644
--- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx
+++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx
@@ -11,6 +11,7 @@ import {
SvgChevronRightDouble,
isBefore,
Box,
+ useId,
} from '../utils/index.js';
import type { PolymorphicForwardRefComponent } from '../utils/index.js';
import { IconButton } from '../Buttons/IconButton/index.js';
@@ -226,6 +227,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
startDate,
endDate,
isDateDisabled,
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ id = useId(),
...rest
} = props;
@@ -555,6 +558,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
{monthNames[displayedMonthIndex]}
@@ -587,7 +591,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
))}
-
+
{weeks.map((weekDays, weekIndex) => {
return (
Date: Mon, 14 Aug 2023 15:51:45 -0400
Subject: [PATCH 003/196] aria label added to DatePicker button in Menu ex
---
examples/DatePicker.menu.tsx | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/examples/DatePicker.menu.tsx b/examples/DatePicker.menu.tsx
index c61c3876a78..f60d00d9db3 100644
--- a/examples/DatePicker.menu.tsx
+++ b/examples/DatePicker.menu.tsx
@@ -12,7 +12,11 @@ export default () => {
return (
<>
- setOpened(!opened)} id='picker-button'>
+ setOpened(!opened)}
+ id='picker-button'
+ aria-label='date picker'
+ >
{currentDate.toString()}
From ee7425e745ad4b1ebbfbaded9ea9d06eda160b2c Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Mon, 14 Aug 2023 16:45:36 -0400
Subject: [PATCH 004/196] changeset
---
.changeset/pink-shirts-trade.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 .changeset/pink-shirts-trade.md
diff --git a/.changeset/pink-shirts-trade.md b/.changeset/pink-shirts-trade.md
new file mode 100644
index 00000000000..f27f22cd5a0
--- /dev/null
+++ b/.changeset/pink-shirts-trade.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+DatePicker date tables now have accessible labels.
From 9c9f1d00e7f9cc3ec499fccbb5549154a7f2c72f Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 15 Aug 2023 15:20:28 -0400
Subject: [PATCH 005/196] variable created for useId()
---
packages/itwinui-react/src/core/DatePicker/DatePicker.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx
index 93eca4b8e8d..657bf50dd30 100644
--- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx
+++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx
@@ -227,8 +227,6 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
startDate,
endDate,
isDateDisabled,
- // eslint-disable-next-line react-hooks/rules-of-hooks
- id = useId(),
...rest
} = props;
@@ -528,6 +526,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
return dayClass;
};
+ const dateTableId = useId();
+
return (
{
{monthNames[displayedMonthIndex]}
@@ -594,7 +594,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
{weeks.map((weekDays, weekIndex) => {
return (
From 4a1712ca56b43d9d95b7e1467ac0d00f1768e335 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 15 Aug 2023 15:25:51 -0400
Subject: [PATCH 006/196] changeset update
---
.changeset/pink-shirts-trade.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.changeset/pink-shirts-trade.md b/.changeset/pink-shirts-trade.md
index f27f22cd5a0..19b2ed7f258 100644
--- a/.changeset/pink-shirts-trade.md
+++ b/.changeset/pink-shirts-trade.md
@@ -1,5 +1,5 @@
---
-'@itwin/itwinui-react': minor
+'@itwin/itwinui-react': patch
---
DatePicker date tables now have accessible labels.
From 4e60dd9c07558fec535d9b0f7180057ca6deff4f Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 15 Aug 2023 15:29:37 -0400
Subject: [PATCH 007/196] menu ex updated
---
examples/DatePicker.menu.tsx | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/examples/DatePicker.menu.tsx b/examples/DatePicker.menu.tsx
index f60d00d9db3..135be4864d7 100644
--- a/examples/DatePicker.menu.tsx
+++ b/examples/DatePicker.menu.tsx
@@ -12,11 +12,7 @@ export default () => {
return (
<>
-
setOpened(!opened)}
- id='picker-button'
- aria-label='date picker'
- >
+ setOpened(!opened)} label='Date picker'>
{currentDate.toString()}
From 4510505908a9c47e6a04684489bc7b298ac6c4ea Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 15 Aug 2023 15:37:55 -0400
Subject: [PATCH 008/196] menu ex label update
---
examples/DatePicker.menu.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/DatePicker.menu.tsx b/examples/DatePicker.menu.tsx
index 135be4864d7..4999fec0731 100644
--- a/examples/DatePicker.menu.tsx
+++ b/examples/DatePicker.menu.tsx
@@ -12,7 +12,7 @@ export default () => {
return (
<>
- setOpened(!opened)} label='Date picker'>
+ setOpened(!opened)} label='Choose date'>
{currentDate.toString()}
From 727751545de6a1c4371fa953e346d349260db070 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 21 Aug 2023 10:33:15 -0400
Subject: [PATCH 009/196] Partially edited index.d.ts. Playground table from
last week + removed satisfies
---
index.d.ts 1 | 924 +++++++++++++++++++++++++++++++++++
playgrounds/vite/src/App.tsx | 226 ++++++++-
react-table-config.ts 1 | 251 ++++++++++
3 files changed, 1397 insertions(+), 4 deletions(-)
create mode 100644 index.d.ts 1
create mode 100644 react-table-config.ts 1
diff --git a/index.d.ts 1 b/index.d.ts 1
new file mode 100644
index 00000000000..8988d42c4b0
--- /dev/null
+++ b/index.d.ts 1
@@ -0,0 +1,924 @@
+// Type definitions for react-table 7.7
+// Project: https://github.com/tannerlinsley/react-table
+// Definitions by: Guy Gascoigne-Piggford ,
+// Michael Stramel
+// Rohit Garg
+// Jason Clark
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+// reflects react-table@7.7.0
+
+// tslint:disable:no-empty-interface
+// no-empty-interface is disabled to allow easy extension with declaration merging
+
+// tslint:disable:no-unnecessary-generics
+// no-unnecessary-generics is disabled because many of these definitions are either used in a generic
+// context or the signatures are required to match for declaration merging
+
+// The changelog for the important changes is located in the Readme.md
+
+import {
+ ChangeEvent,
+ ComponentType,
+ CSSProperties,
+ DependencyList,
+ EffectCallback,
+ MouseEvent,
+ ReactElement,
+ ReactFragment,
+ ReactNode,
+} from 'react';
+
+export {};
+
+/**
+ * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code.
+ *
+ * @example
+ * export interface TableOptions
+ * extends
+ * UseExpandedOptions,
+ * UseFiltersOptions {}
+ * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details
+ */
+export interface TableOptions extends UseTableOptions {}
+
+export interface TableInstance
+ extends Omit, 'columns' | 'pageCount'>,
+ UseTableInstanceProps {}
+
+export interface TableState {
+ hiddenColumns?: Array> | undefined;
+}
+
+export interface Hooks extends UseTableHooks {}
+
+export interface Cell extends UseTableCellProps {}
+
+export interface ColumnInterface extends UseTableColumnOptions {}
+
+export interface ColumnInterfaceBasedOnValue {
+ Cell?: Renderer> | undefined;
+}
+
+export interface ColumnGroupInterface {
+ columns: Array>;
+}
+
+export type ColumnGroup =
+ & ColumnInterface
+ // & ColumnGroupInterface
+ & (
+ | { Header: string; }
+ | ({ id: IdType; } & {
+ Header: Renderer>;
+ })
+ )
+ // Not used, but needed for backwards compatibility
+ & { accessor?: Accessor | undefined; };
+
+type ValueOf = T[keyof T];
+
+// The accessors like `foo.bar` are not supported, use functions instead
+export type ColumnWithStrictAccessor =
+ & ColumnInterface
+ & ValueOf<{
+ [K in keyof D]: {
+ accessor: K;
+ } & ColumnInterfaceBasedOnValue;
+ }>;
+
+export type ColumnWithLooseAccessor =
+ & ColumnInterface
+ & ColumnInterfaceBasedOnValue
+ & (
+ | { Header: string }
+ | { id: IdType }
+ | { accessor: keyof D extends never ? IdType : never }
+ )
+ & { accessor?: (keyof D extends never ? IdType | Accessor : Accessor) | undefined; };
+
+export type Column =
+ | ColumnGroup
+ | ColumnWithLooseAccessor
+ | ColumnWithStrictAccessor;
+
+export interface ColumnInstance
+ extends Omit, 'id'>,
+ ColumnInterfaceBasedOnValue,
+ UseTableColumnProps {}
+
+export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {}
+
+export interface Row extends UseTableRowProps {}
+
+export interface TableCommonProps {
+ style?: CSSProperties | undefined;
+ className?: string | undefined;
+ role?: string | undefined;
+}
+
+export interface TableProps extends TableCommonProps {}
+
+export interface TableBodyProps extends TableCommonProps {}
+
+export interface TableKeyedProps extends TableCommonProps {
+ key: React.Key;
+}
+
+export interface TableHeaderGroupProps extends TableKeyedProps {}
+
+export interface TableFooterGroupProps extends TableKeyedProps {}
+
+export interface TableHeaderProps extends TableKeyedProps {}
+
+export interface TableFooterProps extends TableKeyedProps {}
+
+export interface TableRowProps extends TableKeyedProps {}
+
+export interface TableCellProps extends TableKeyedProps {}
+
+export interface TableToggleCommonProps extends TableCommonProps {
+ onChange?: ((e: ChangeEvent) => void) | undefined;
+ checked?: boolean | undefined;
+ title?: string | undefined;
+ indeterminate?: boolean | undefined;
+}
+
+export interface MetaBase {
+ instance: TableInstance;
+ userProps: any;
+}
+
+// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts
+export type Meta> = [Extension] extends [never]
+ ? M
+ : M & Extension;
+
+//#region useTable
+export function useTable(
+ options: TableOptions,
+ ...plugins: Array>
+): TableInstance;
+
+/**
+ * NOTE: To use custom options, use "Interface Merging" to add the custom options
+ */
+export type UseTableOptions = {
+ columns: ReadonlyArray>;
+ data: readonly D[];
+} & Partial<{
+ initialState: Partial>;
+ stateReducer: (newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance) => TableState;
+ useControlledState: (state: TableState, meta: Meta) => TableState;
+ defaultColumn: Partial>;
+ getSubRows: (originalRow: D, relativeIndex: number) => D[];
+ getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string;
+ autoResetHiddenColumns: boolean;
+}>;
+
+export type PropGetter> =
+ | ((props: P, meta: Meta) => P | P[])
+ | P
+ | P[];
+
+export type TablePropGetter = PropGetter;
+
+export type TableBodyPropGetter = PropGetter;
+
+export type HeaderPropGetter = PropGetter }>;
+
+export type FooterGroupPropGetter = PropGetter }>;
+
+export type HeaderGroupPropGetter = PropGetter }>;
+
+export type FooterPropGetter = PropGetter }>;
+
+export type RowPropGetter = PropGetter }>;
+
+export type CellPropGetter = PropGetter }>;
+
+export interface ReducerTableState extends TableState, Record {}
+
+export interface UseTableHooks extends Record {
+ useOptions: Array<(options: TableOptions, args: TableOptions) => TableOptions>;
+ stateReducers: Array<
+ (
+ newState: TableState,
+ action: ActionType,
+ previousState?: TableState,
+ instance?: TableInstance,
+ ) => ReducerTableState | undefined
+ >;
+ columns: Array<(columns: Array>, meta: Meta) => Array>>;
+ columnsDeps: Array<(deps: any[], meta: Meta) => any[]>;
+ allColumns: Array<(allColumns: Array>, meta: Meta) => Array>>;
+ allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>;
+ visibleColumns: Array<(allColumns: Array>, meta: Meta) => Array>>;
+ visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>;
+ headerGroups: Array<(allColumns: Array>, meta: Meta) => Array>>;
+ headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>;
+ useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>;
+ useInstance: Array<(instance: TableInstance) => void>;
+ prepareRow: Array<(row: Row, meta: Meta) => void>;
+ useControlledState: Array<(state: TableState, meta: Meta) => TableState>;
+
+ getTableProps: Array>;
+ getTableBodyProps: Array>;
+ getHeaderGroupProps: Array>;
+ getFooterGroupProps: Array>;
+ getHeaderProps: Array>;
+ getFooterProps: Array>;
+ getRowProps: Array>;
+ getCellProps: Array>;
+ useFinalInstance: Array<(instance: TableInstance) => void>;
+}
+
+export interface UseTableColumnOptions {
+ id?: IdType | undefined;
+ Header?: Renderer> | undefined;
+ Footer?: Renderer> | undefined;
+ width?: number | string | undefined;
+ minWidth?: number | undefined;
+ maxWidth?: number | undefined;
+}
+
+type UpdateHiddenColumns = (oldHidden: Array>) => Array>;
+
+export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {}
+
+export interface UseTableInstanceProps {
+ state: TableState;
+ plugins: Array>;
+ dispatch: TableDispatch;
+ columns: Array>;
+ allColumns: Array>;
+ visibleColumns: Array>;
+ headerGroups: Array>;
+ footerGroups: Array>;
+ headers: Array>;
+ flatHeaders: Array>;
+ rows: Array>;
+ rowsById: Record>;
+ getTableProps: (propGetter?: TablePropGetter) => TableProps;
+ getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps;
+ prepareRow: (row: Row) => void;
+ flatRows: Array>;
+ totalColumnsWidth: number;
+ allColumnsHidden: boolean;
+ toggleHideColumn: (columnId: IdType, value?: boolean) => void;
+ setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void;
+ toggleHideAllColumns: (value?: boolean) => void;
+ getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps;
+ getHooks: () => Hooks;
+}
+
+export interface UseTableHeaderGroupProps {
+ headers: Array>;
+ getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps;
+ getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps;
+ totalHeaderCount: number; // not documented
+}
+
+export interface UseTableColumnProps {
+ id: IdType;
+ columns?: Array> | undefined;
+ isVisible: boolean;
+ render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode;
+ totalLeft: number;
+ totalWidth: number;
+ getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps;
+ getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps;
+ toggleHidden: (value?: boolean) => void;
+ parent?: ColumnInstance | undefined; // not documented
+ getToggleHiddenProps: (userProps?: any) => any;
+ depth: number; // not documented
+ placeholderOf?: ColumnInstance | undefined;
+}
+
+export interface UseTableRowProps {
+ cells: Array>;
+ allCells: Array>;
+ values: Record, CellValue>;
+ getRowProps: (propGetter?: RowPropGetter) => TableRowProps;
+ index: number;
+ original: D;
+ id: string;
+ subRows: Array>;
+}
+
+export interface UseTableCellProps {
+ column: ColumnInstance;
+ row: Row;
+ value: CellValue;
+ getCellProps: (propGetter?: CellPropGetter) => TableCellProps;
+ render: (type: 'Cell' | string, userProps?: object) => ReactNode;
+}
+
+export type HeaderProps = TableInstance & {
+ column: ColumnInstance;
+};
+
+export type FooterProps = TableInstance & {
+ column: ColumnInstance;
+};
+
+export type CellProps = TableInstance & {
+ column: ColumnInstance;
+ row: Row;
+ cell: Cell;
+ value: CellValue;
+};
+
+export type Accessor = (
+ originalRow: D,
+ index: number,
+ sub: {
+ subRows: D[];
+ depth: number;
+ data: D[];
+ },
+) => CellValue;
+
+//#endregion
+
+// Plugins
+
+//#region useAbsoluteLayout
+export function useAbsoluteLayout(hooks: Hooks): void;
+
+export namespace useAbsoluteLayout {
+ const pluginName = 'useAbsoluteLayout';
+}
+//#endregion
+
+//#region useBlockLayout
+export function useBlockLayout(hooks: Hooks): void;
+
+export namespace useBlockLayout {
+ const pluginName = 'useBlockLayout';
+}
+//#endregion
+
+//#region useColumnOrder
+export function useColumnOrder(hooks: Hooks): void;
+
+export namespace useColumnOrder {
+ const pluginName = 'useColumnOrder';
+}
+
+export interface UseColumnOrderState {
+ columnOrder: Array>;
+}
+
+export interface UseColumnOrderInstanceProps {
+ setColumnOrder: (updater: ((columnOrder: Array>) => Array>) | Array>) => void;
+}
+
+//#endregion
+
+//#region useExpanded
+export function useExpanded(hooks: Hooks): void;
+
+export namespace useExpanded {
+ const pluginName = 'useExpanded';
+}
+
+export interface TableExpandedToggleProps extends TableKeyedProps {}
+
+export type UseExpandedOptions = Partial<{
+ manualExpandedKey: IdType;
+ paginateExpandedRows: boolean;
+ expandSubRows: boolean;
+ autoResetExpanded?: boolean | undefined;
+}>;
+
+export interface UseExpandedHooks {
+ getToggleRowsExpandedProps: Array>;
+ getToggleAllRowsExpandedProps: Array>;
+}
+
+export interface UseExpandedState {
+ expanded: Record, boolean>;
+}
+
+export interface UseExpandedInstanceProps {
+ preExpandedRows: Array>;
+ expandedRows: Array>;
+ rows: Array>;
+ expandedDepth: number;
+ isAllRowsExpanded: boolean;
+ toggleRowExpanded: (id: Array>, value?: boolean) => void;
+ toggleAllRowsExpanded: (value?: boolean) => void;
+}
+
+export interface UseExpandedRowProps {
+ isExpanded: boolean;
+ canExpand: boolean;
+ subRows: Array>;
+ toggleRowExpanded: (value?: boolean) => void;
+ getToggleRowExpandedProps: (props?: Partial) => TableExpandedToggleProps;
+ depth: number;
+}
+
+//#endregion
+
+//#region useFilters
+export function useFilters(hooks: Hooks): void;
+
+export namespace useFilters {
+ const pluginName = 'useFilters';
+}
+
+export type UseFiltersOptions = Partial<{
+ manualFilters: boolean;
+ disableFilters: boolean;
+ defaultCanFilter: boolean;
+ filterTypes: FilterTypes;
+ autoResetFilters?: boolean | undefined;
+}>;
+
+export interface UseFiltersState {
+ filters: Filters;
+}
+
+export type UseFiltersColumnOptions = Partial<{
+ Filter: Renderer>;
+ disableFilters: boolean;
+ defaultCanFilter: boolean;
+ filter: FilterType | DefaultFilterTypes | string;
+}>;
+
+export interface UseFiltersInstanceProps {
+ preFilteredRows: Array>;
+ preFilteredFlatRows: Array>;
+ preFilteredRowsById: Record>;
+ filteredRows: Array>;
+ filteredFlatRows: Array>;
+ filteredRowsById: Record>;
+ rows: Array>;
+ flatRows: Array | |