@stenajs-webui/grid 17.5.0 → 17.8.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# v17.8.0 (Fri Jul 01 2022)
+
+#### 🚀 Enhancement
+
+- Replace useDomId with useId [#476](https://github.com/StenaIT/stenajs-webui/pull/476) ([@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 1
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+
+---
+
+# v17.7.0 (Fri Jul 01 2022)
+
+#### 🚀 Enhancement
+
+- Build packages with vite [#475](https://github.com/StenaIT/stenajs-webui/pull/475) ([@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 1
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+
+---
+
+# v17.6.0 (Fri Jul 01 2022)
+
+#### 🚀 Enhancement
+
+- Use Stena icons instead of Font Awesome icons [#471](https://github.com/StenaIT/stenajs-webui/pull/471) (david.zetterdahl@stenaline.com [@LordDz](https://github.com/LordDz) [@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 3
+
+- David ([@LordDz](https://github.com/LordDz))
+- David Zetterdahl (david.zetterdahl@stenaline.com)
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+
+---
+
 # v17.1.2 (Mon Jun 27 2022)
 
 #### 🐛 Bug Fix

package/dist/components/GridHooksTable.d.ts

@@ -1,26 +1,26 @@
-import * as React from "react";
-import { ReactNode } from "react";
-interface GridHooksTableProps extends GridHooksContextValue {
-    children?: ReactNode;
-}
-interface GridHooksContextValue {
-    /**
-     * Total number of rows in table. Must be set in cell hook or in GridHooksTable prop.
-     */
-    numRows?: number;
-    /**
-     * Total number of columns in table. Must be set in cell hook or in GridHooksTable prop.
-     */
-    numCols?: number;
-    /**
-     * An ID for the table, must be unique for every table in page. Must be set in cell hook or in GridHooksTable prop.
-     */
-    tableId?: string;
-    /**
-     * If true, navigation will wrap around the table. If false, navigation stops at table edge.
-     */
-    wrap?: boolean;
-}
-export declare const GridHooksContext: React.Context<GridHooksContextValue>;
-export declare const GridHooksTable: React.FC<GridHooksTableProps>;
-export {};
+import * as React from "react";
+import { ReactNode } from "react";
+interface GridHooksTableProps extends GridHooksContextValue {
+    children?: ReactNode;
+}
+interface GridHooksContextValue {
+    /**
+     * Total number of rows in table. Must be set in cell hook or in GridHooksTable prop.
+     */
+    numRows?: number;
+    /**
+     * Total number of columns in table. Must be set in cell hook or in GridHooksTable prop.
+     */
+    numCols?: number;
+    /**
+     * An ID for the table, must be unique for every table in page. Must be set in cell hook or in GridHooksTable prop.
+     */
+    tableId?: string;
+    /**
+     * If true, navigation will wrap around the table. If false, navigation stops at table edge.
+     */
+    wrap?: boolean;
+}
+export declare const GridHooksContext: React.Context<GridHooksContextValue>;
+export declare const GridHooksTable: React.FC<GridHooksTableProps>;
+export {};

package/dist/config/TableConfig.d.ts

@@ -1,11 +1,11 @@
-export declare const tableBorderColor = "var(--lhds-color-ui-300)";
-export declare const tableBorderColorExpanded = "var(--lhds-color-blue-500)";
-export declare const tableBackgroundColorExpanded = "var(--lhds-color-blue-50)";
-export declare const tableBackgroundHoverColorExpanded = "var(--lhds-color-blue-100)";
-export declare const tableBorder: string;
-export declare const tableBorderHidden = "1px solid transparent";
-export declare const tableBorderLeft = "var(--swui-expand-highlight-border-width) solid transparent";
-export declare const tableBorderLeftExpanded: string;
-export declare const defaultTableRowHeight = "40px";
-export declare const defaultTableHeadRowHeight = "40px";
-export declare const smallTableRowWidth = "40px";
+export declare const tableBorderColor = "var(--lhds-color-ui-300)";
+export declare const tableBorderColorExpanded = "var(--lhds-color-blue-500)";
+export declare const tableBackgroundColorExpanded = "var(--lhds-color-blue-50)";
+export declare const tableBackgroundHoverColorExpanded = "var(--lhds-color-blue-100)";
+export declare const tableBorder: string;
+export declare const tableBorderHidden = "1px solid transparent";
+export declare const tableBorderLeft = "var(--swui-expand-highlight-border-width) solid transparent";
+export declare const tableBorderLeftExpanded: string;
+export declare const defaultTableRowHeight = "40px";
+export declare const defaultTableHeadRowHeight = "40px";
+export declare const smallTableRowWidth = "40px";

package/dist/features/grid-cell/hooks/UseEditableCell.d.ts

@@ -1,59 +1,59 @@
-import * as React from "react";
-import { RevertableValue } from "./UseRevertableValue";
-export declare type AllowedInputType = "all" | "numeric" | "alphanumeric" | "letters" | "none";
-declare type OnStartEditingFunc = (keyEvent?: KeyDownEvent) => void;
-declare type TransformEnteredValueFunc<TValue> = (value?: string) => TValue;
-export interface UseEditableCellOptions<TValue> {
-    /**
-     * Specifies if cell is editable.
-     */
-    isEditable?: boolean;
-    /**
-     * Types of keyboard input that will start editing and pre-fill editor.
-     */
-    allowedInputType?: AllowedInputType;
-    /**
-     * Callback that is invoked when editing a cell is started.
-     * @param keyEvent
-     */
-    onStartEditing?: OnStartEditingFunc;
-    /**
-     * Callback that is invoked when editing a cell stops.
-     */
-    onStopEditing?: () => void;
-    /**
-     * Callback that is invoked when editing a cell is finished with a value result.
-     * @param value
-     */
-    onChange?: (value: TValue | undefined) => void;
-    /**
-     * Transform entered input to TValue.
-     * @param value
-     */
-    transformEnteredValue?: TransformEnteredValueFunc<TValue>;
-}
-export interface UseEditableCellResult<TValue> {
-    onKeyDown: React.KeyboardEventHandler;
-    isEditing: boolean;
-    startEditing: OnStartEditingFunc;
-    stopEditing: () => void;
-    stopEditingAndRevert: () => void;
-    lastKeyEvent: KeyDownEvent | undefined;
-    revertableValue: RevertableValue<TValue>;
-    onDoubleClick: () => void;
-}
-export interface KeyDownEvent {
-    altKey: boolean;
-    charCode: number;
-    ctrlKey: boolean;
-    key: string;
-    keyCode: number;
-    locale: string;
-    location: number;
-    metaKey: boolean;
-    repeat: boolean;
-    shiftKey: boolean;
-    which: number;
-}
-export declare const useEditableCell: <TValue>(value: TValue, { isEditable, allowedInputType, onChange, onStartEditing, onStopEditing, transformEnteredValue, }: UseEditableCellOptions<TValue>) => UseEditableCellResult<TValue>;
-export {};
+import * as React from "react";
+import { RevertableValue } from "./UseRevertableValue";
+export declare type AllowedInputType = "all" | "numeric" | "alphanumeric" | "letters" | "none";
+declare type OnStartEditingFunc = (keyEvent?: KeyDownEvent) => void;
+declare type TransformEnteredValueFunc<TValue> = (value?: string) => TValue;
+export interface UseEditableCellOptions<TValue> {
+    /**
+     * Specifies if cell is editable.
+     */
+    isEditable?: boolean;
+    /**
+     * Types of keyboard input that will start editing and pre-fill editor.
+     */
+    allowedInputType?: AllowedInputType;
+    /**
+     * Callback that is invoked when editing a cell is started.
+     * @param keyEvent
+     */
+    onStartEditing?: OnStartEditingFunc;
+    /**
+     * Callback that is invoked when editing a cell stops.
+     */
+    onStopEditing?: () => void;
+    /**
+     * Callback that is invoked when editing a cell is finished with a value result.
+     * @param value
+     */
+    onChange?: (value: TValue | undefined) => void;
+    /**
+     * Transform entered input to TValue.
+     * @param value
+     */
+    transformEnteredValue?: TransformEnteredValueFunc<TValue>;
+}
+export interface UseEditableCellResult<TValue> {
+    onKeyDown: React.KeyboardEventHandler;
+    isEditing: boolean;
+    startEditing: OnStartEditingFunc;
+    stopEditing: () => void;
+    stopEditingAndRevert: () => void;
+    lastKeyEvent: KeyDownEvent | undefined;
+    revertableValue: RevertableValue<TValue>;
+    onDoubleClick: () => void;
+}
+export interface KeyDownEvent {
+    altKey: boolean;
+    charCode: number;
+    ctrlKey: boolean;
+    key: string;
+    keyCode: number;
+    locale: string;
+    location: number;
+    metaKey: boolean;
+    repeat: boolean;
+    shiftKey: boolean;
+    which: number;
+}
+export declare const useEditableCell: <TValue>(value: TValue, { isEditable, allowedInputType, onChange, onStartEditing, onStopEditing, transformEnteredValue, }: UseEditableCellOptions<TValue>) => UseEditableCellResult<TValue>;
+export {};

package/dist/features/grid-cell/hooks/UseGridCell.d.ts

@@ -1,64 +1,64 @@
-import { KeyboardEventHandler } from "react";
-import { MoveDirection } from "../../../util/DirectionCalculator";
-import { KeyDownEvent, UseEditableCellOptions } from "./UseEditableCell";
-import { GridNavigationRequiredProps, UseGridNavigationOptions } from "./UseGridNavigation";
-export declare type UseGridCellOptions<TValue> = UseGridNavigationOptions & UseEditableCellOptions<TValue>;
-export interface UseGridCellResult<TValue> {
-    /**
-     * The current value in the editor. Pass this as value to form field components.
-     */
-    editorValue: TValue;
-    /**
-     * The setter for current value in the editor. Pass this as onChange to form field components.
-     * @param editorValue
-     */
-    setEditorValue: (editorValue: TValue) => void;
-    /**
-     * Reverts the value of form field to the value before user started editing. This is invoked by stopEditingAndRevert.
-     */
-    revertEditorValue: () => void;
-    /**
-     * Props that must be passed to the cell DOM element which can be focused.
-     */
-    requiredProps: GridCellRequiredProps;
-    /**
-     * Moves focus to a new cell in the specified direction.
-     * @param direction
-     */
-    move: (direction: MoveDirection) => void;
-    /**
-     * Opens the editor. invokes onStartEdit if provided.
-     */
-    startEditing: () => void;
-    /**
-     * Closes the editor and invokes onChange with the editor value entered by user.
-     */
-    stopEditing: () => void;
-    /**
-     * Closes the editor and reverts editor value to the previous value. Does not invoke onChange.
-     */
-    stopEditingAndRevert: () => void;
-    /**
-     * Closes the editor and moves focus to a new cell in the specified direction. Invokes onChange with editor value.
-     * @param direction
-     */
-    stopEditingAndMove: (direction: MoveDirection) => void;
-    /**
-     * True if cell is currently in editing mode.
-     */
-    isEditing: boolean;
-    /**
-     * Contains last key event if editor was started by any key other than Enter.
-     */
-    lastKeyEvent: KeyDownEvent | undefined;
-}
-export interface GridCellRequiredProps extends Pick<GridNavigationRequiredProps, "tabIndex" | "id"> {
-    onKeyDown: KeyboardEventHandler;
-    onDoubleClick: () => void;
-}
-/**
- * Hook for cell in a grid. Combines navigation and editable cell.
- * @param value The value of the current cell.
- * @param options Options for hook.
- */
-export declare const useGridCell: <TValue>(value: TValue, options: UseGridCellOptions<TValue>) => UseGridCellResult<TValue>;
+import { KeyboardEventHandler } from "react";
+import { MoveDirection } from "../../../util/DirectionCalculator";
+import { KeyDownEvent, UseEditableCellOptions } from "./UseEditableCell";
+import { GridNavigationRequiredProps, UseGridNavigationOptions } from "./UseGridNavigation";
+export declare type UseGridCellOptions<TValue> = UseGridNavigationOptions & UseEditableCellOptions<TValue>;
+export interface UseGridCellResult<TValue> {
+    /**
+     * The current value in the editor. Pass this as value to form field components.
+     */
+    editorValue: TValue;
+    /**
+     * The setter for current value in the editor. Pass this as onChange to form field components.
+     * @param editorValue
+     */
+    setEditorValue: (editorValue: TValue) => void;
+    /**
+     * Reverts the value of form field to the value before user started editing. This is invoked by stopEditingAndRevert.
+     */
+    revertEditorValue: () => void;
+    /**
+     * Props that must be passed to the cell DOM element which can be focused.
+     */
+    requiredProps: GridCellRequiredProps;
+    /**
+     * Moves focus to a new cell in the specified direction.
+     * @param direction
+     */
+    move: (direction: MoveDirection) => void;
+    /**
+     * Opens the editor. invokes onStartEdit if provided.
+     */
+    startEditing: () => void;
+    /**
+     * Closes the editor and invokes onChange with the editor value entered by user.
+     */
+    stopEditing: () => void;
+    /**
+     * Closes the editor and reverts editor value to the previous value. Does not invoke onChange.
+     */
+    stopEditingAndRevert: () => void;
+    /**
+     * Closes the editor and moves focus to a new cell in the specified direction. Invokes onChange with editor value.
+     * @param direction
+     */
+    stopEditingAndMove: (direction: MoveDirection) => void;
+    /**
+     * True if cell is currently in editing mode.
+     */
+    isEditing: boolean;
+    /**
+     * Contains last key event if editor was started by any key other than Enter.
+     */
+    lastKeyEvent: KeyDownEvent | undefined;
+}
+export interface GridCellRequiredProps extends Pick<GridNavigationRequiredProps, "tabIndex" | "id"> {
+    onKeyDown: KeyboardEventHandler;
+    onDoubleClick: () => void;
+}
+/**
+ * Hook for cell in a grid. Combines navigation and editable cell.
+ * @param value The value of the current cell.
+ * @param options Options for hook.
+ */
+export declare const useGridCell: <TValue>(value: TValue, options: UseGridCellOptions<TValue>) => UseGridCellResult<TValue>;

package/dist/features/grid-cell/hooks/UseGridNavigation.d.ts

@@ -1,82 +1,82 @@
-import { KeyboardEvent } from "react";
-import { CellIndices, MoveDirection, TableEdgeMoveMode } from "../../../util/DirectionCalculator";
-export interface UseGridNavigationOptions {
-    /**
-     * The row index for current cell.
-     */
-    rowIndex: number;
-    /**
-     * The column index for current cell.
-     */
-    colIndex: number;
-    /**
-     * Total number of rows in table. Must be set in cell hook or in GridHooksTable prop.
-     */
-    numRows?: number;
-    /**
-     * Total number of columns in table. Must be set in cell hook or in GridHooksTable prop.
-     */
-    numCols?: number;
-    /**
-     * An ID for the table, must be unique for every table in page. Must be set in cell hook or in GridHooksTable prop.
-     */
-    tableId?: string;
-    /**
-     * Edge mode. Defines how to behave when user tries to navigate outside of the table.
-     * Can be 'wrapped', 'clamped' or 'unlimited'.
-     * wrapped = focuses on other side of table.
-     * clamped = focus stays on same cell
-     * unlimited = focus is not controlled, it will try to focus on next item.
-     */
-    edgeMode?: TableEdgeMoveMode;
-    /**
-     * Callback that is invoked when user navigates to new cell by keyboard.
-     */
-    onCellMove?: CellMoveHandler;
-    /**
-     * Callback that is invoked when user navigates but don't move to new cell by keyboard.
-     */
-    onCellNavigation?: CellNavigationHandler;
-}
-export interface ValidatedUseGridNavigationOptions {
-    rowIndex: number;
-    colIndex: number;
-    numRows: number;
-    numCols: number;
-    tableId: string;
-    edgeMode?: TableEdgeMoveMode;
-    onCellMove?: CellMoveHandler;
-    onCellNavigation?: CellNavigationHandler;
-}
-export interface UseGridNavigationResult {
-    requiredProps: GridNavigationRequiredProps;
-    moveHandler: MoveHandler;
-    focusOnCell: FocusOnCellFunc;
-}
-/**
- * Props that must be passed to element with focus.
- */
-export interface GridNavigationRequiredProps {
-    tabIndex: number;
-    onKeyDown: (e: KeyboardEvent) => boolean;
-    id: string;
-}
-export declare type CellMoveHandler = (event: OnCellMoveEvent) => void;
-export declare type CellNavigationHandler = (event: OnCellNavigationEvent) => void;
-export interface OnCellMoveEvent {
-    direction: MoveDirection;
-    fromRowIndex: number;
-    fromColIndex: number;
-    rowDidChange: boolean;
-    colDidChange: boolean;
-    rowIndex: number;
-    colIndex: number;
-}
-export interface OnCellNavigationEvent extends OnCellMoveEvent {
-    cellDidChange: boolean;
-}
-export declare const useGridNavigation: (options: UseGridNavigationOptions) => UseGridNavigationResult;
-declare type MoveHandler = (direction: MoveDirection) => void;
-declare type FocusOnCellFunc = (tableId: string, pos: CellIndices) => void;
-export declare const focusOnCell: FocusOnCellFunc;
-export {};
+import { KeyboardEvent } from "react";
+import { CellIndices, MoveDirection, TableEdgeMoveMode } from "../../../util/DirectionCalculator";
+export interface UseGridNavigationOptions {
+    /**
+     * The row index for current cell.
+     */
+    rowIndex: number;
+    /**
+     * The column index for current cell.
+     */
+    colIndex: number;
+    /**
+     * Total number of rows in table. Must be set in cell hook or in GridHooksTable prop.
+     */
+    numRows?: number;
+    /**
+     * Total number of columns in table. Must be set in cell hook or in GridHooksTable prop.
+     */
+    numCols?: number;
+    /**
+     * An ID for the table, must be unique for every table in page. Must be set in cell hook or in GridHooksTable prop.
+     */
+    tableId?: string;
+    /**
+     * Edge mode. Defines how to behave when user tries to navigate outside of the table.
+     * Can be 'wrapped', 'clamped' or 'unlimited'.
+     * wrapped = focuses on other side of table.
+     * clamped = focus stays on same cell
+     * unlimited = focus is not controlled, it will try to focus on next item.
+     */
+    edgeMode?: TableEdgeMoveMode;
+    /**
+     * Callback that is invoked when user navigates to new cell by keyboard.
+     */
+    onCellMove?: CellMoveHandler;
+    /**
+     * Callback that is invoked when user navigates but don't move to new cell by keyboard.
+     */
+    onCellNavigation?: CellNavigationHandler;
+}
+export interface ValidatedUseGridNavigationOptions {
+    rowIndex: number;
+    colIndex: number;
+    numRows: number;
+    numCols: number;
+    tableId: string;
+    edgeMode?: TableEdgeMoveMode;
+    onCellMove?: CellMoveHandler;
+    onCellNavigation?: CellNavigationHandler;
+}
+export interface UseGridNavigationResult {
+    requiredProps: GridNavigationRequiredProps;
+    moveHandler: MoveHandler;
+    focusOnCell: FocusOnCellFunc;
+}
+/**
+ * Props that must be passed to element with focus.
+ */
+export interface GridNavigationRequiredProps {
+    tabIndex: number;
+    onKeyDown: (e: KeyboardEvent) => boolean;
+    id: string;
+}
+export declare type CellMoveHandler = (event: OnCellMoveEvent) => void;
+export declare type CellNavigationHandler = (event: OnCellNavigationEvent) => void;
+export interface OnCellMoveEvent {
+    direction: MoveDirection;
+    fromRowIndex: number;
+    fromColIndex: number;
+    rowDidChange: boolean;
+    colDidChange: boolean;
+    rowIndex: number;
+    colIndex: number;
+}
+export interface OnCellNavigationEvent extends OnCellMoveEvent {
+    cellDidChange: boolean;
+}
+export declare const useGridNavigation: (options: UseGridNavigationOptions) => UseGridNavigationResult;
+declare type MoveHandler = (direction: MoveDirection) => void;
+declare type FocusOnCellFunc = (tableId: string, pos: CellIndices) => void;
+export declare const focusOnCell: FocusOnCellFunc;
+export {};

package/dist/features/grid-cell/hooks/UseGridNavigationOptionsFromContext.d.ts

@@ -1,2 +1,2 @@
-import { UseGridNavigationOptions, ValidatedUseGridNavigationOptions } from "./UseGridNavigation";
-export declare const useGridNavigationOptionsFromContext: (options: UseGridNavigationOptions) => ValidatedUseGridNavigationOptions;
+import { UseGridNavigationOptions, ValidatedUseGridNavigationOptions } from "./UseGridNavigation";
+export declare const useGridNavigationOptionsFromContext: (options: UseGridNavigationOptions) => ValidatedUseGridNavigationOptions;

package/dist/features/grid-cell/hooks/UseRevertableValue.d.ts

@@ -1,9 +1,9 @@
-export interface RevertableValue<TValue> {
-    value: TValue;
-    setValue: (value: TValue) => void;
-    setRevertValue: (revertValue: TValue) => void;
-    revert: () => void;
-    commit: () => void;
-    getValue: () => TValue;
-}
-export declare const useRevertableValue: <TValue>(initialValue: TValue) => RevertableValue<TValue>;
+export interface RevertableValue<TValue> {
+    value: TValue;
+    setValue: (value: TValue) => void;
+    setRevertValue: (revertValue: TValue) => void;
+    revert: () => void;
+    commit: () => void;
+    getValue: () => TValue;
+}
+export declare const useRevertableValue: <TValue>(initialValue: TValue) => RevertableValue<TValue>;

package/dist/features/{standard-table/features/sorting/__tests__/MultitypeComparator.test.d.ts → grid-cell/hooks/__tests__/TextInput.test.d.ts}

@@ -1 +1 @@
-export {};
+export {};

package/dist/features/standard-table/components/ColGroups.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-interface ColsProps {
-}
-export declare const ColGroups: React.FC<ColsProps>;
-export {};
+import * as React from "react";
+interface ColsProps {
+}
+export declare const ColGroups: React.FC<ColsProps>;
+export {};