@linzjs/lui 17.10.3 → 17.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [17.11.0](https://github.com/linz/lui/compare/v17.10.3...v17.11.0) (2022-08-17)
+
+
+### Features
+
+* **LuiListBox:** Adding LuiListBox an ARIA compliant listbox implementation ([#734](https://github.com/linz/lui/issues/734)) ([c22bb4f](https://github.com/linz/lui/commit/c22bb4fa5647057e72c7dbb65c11a2439ba07136))
+
 ## [17.10.3](https://github.com/linz/lui/compare/v17.10.2...v17.10.3) (2022-08-17)
 
 ## [17.10.2](https://github.com/linz/lui/compare/v17.10.1...v17.10.2) (2022-08-17)

package/dist/components/LuiListBox/LuiListBox.d.ts

@@ -0,0 +1,33 @@
+import './LuiListBox.scss';
+import { HTMLAttributes, Key, ReactNode } from 'react';
+import { SelectionBehavior, SelectionMode } from '@react-types/shared';
+import { AriaListBoxOptions } from '@react-aria/listbox';
+export declare type ItemWithKey<T> = T & {
+    key: Key;
+};
+export interface ILuiListBoxItem extends Object {
+    key: Key;
+    label: ReactNode;
+}
+export interface ILuiListBoxProps<T = ILuiListBoxItem> extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    items?: T[];
+    value?: Key | Key[];
+    disabled?: boolean;
+    onChange?: (keys: Key[], items: T[]) => void;
+    ariaProps?: Omit<AriaListBoxOptions<ItemWithKey<T>>, 'children' | 'selectedKeys' | 'onSelectionChange' | 'selectionMode'>;
+    selectionMode?: SelectionMode;
+    selectionBehavior?: SelectionBehavior;
+    itemRenderer?: (props: IItemRendererProps<T>) => ReactNode;
+    getKey?: (item: T) => Key;
+    loadingIndicator?: () => ReactNode;
+    emptyIndicator?: () => ReactNode;
+}
+export interface IItemRendererProps<T> {
+    item: T;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isFocusVisible: boolean;
+}
+export default function LuiListBox<T extends object = ILuiListBoxItem>({ ariaLabel, ariaLabelledBy, itemRenderer, loadingIndicator, emptyIndicator, selectionMode, selectionBehavior, disabled, items, value, onChange, getKey, ariaProps, className, ...ulProps }: ILuiListBoxProps<T>): JSX.Element;

package/dist/components/LuiListBox/LuiListBoxItem.d.ts

@@ -0,0 +1,10 @@
+import { Node } from '@react-types/shared';
+import { ReactNode } from 'react';
+import { IItemRendererProps } from './LuiListBox';
+import { ListState } from '@react-stately/list';
+export interface ILuiListBoxItemProps<T> {
+    node: Node<T>;
+    state: ListState<T>;
+    renderer?: (item: IItemRendererProps<T>) => ReactNode;
+}
+export default function LuiListBoxItem<T>({ node, state, renderer, }: ILuiListBoxItemProps<T>): JSX.Element;

package/dist/components/LuiListBox/Renderers/CheckboxItemRenderer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './CheckboxItemRenderer.scss';
+import { IItemRendererProps, ILuiListBoxItem } from '../LuiListBox';
+export default function CheckboxItemRenderer({ item, isSelected, }: IItemRendererProps<ILuiListBoxItem>): JSX.Element;

package/dist/components/LuiListBox/Renderers/DefaultItemRenderer.d.ts

@@ -0,0 +1,3 @@
+import { IItemRendererProps } from '../LuiListBox';
+import { ReactNode } from 'react';
+export default function DefaultItemRenderer<T extends object>({ item, }: IItemRendererProps<T>): ReactNode;

package/dist/components/LuiListBox/Renderers/RadioItemRenderer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './RadioItemRenderer.scss';
+import { IItemRendererProps, ILuiListBoxItem } from '../LuiListBox';
+export default function RadioItemRenderer({ item, isSelected, }: IItemRendererProps<ILuiListBoxItem>): JSX.Element;

package/dist/components/LuiListBox/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ListProps } from '@react-stately/list';
+import { ILuiListBoxProps, ItemWithKey } from './LuiListBox';
+export declare function mapToAriaListBoxProps<T extends object>({ selectionMode, selectionBehavior, items, value, onChange, ariaProps, getKey, }: ILuiListBoxProps<T>): ListProps<ItemWithKey<T>>;