Allow an item to have the selecting state without moving the mouse (useful to have a visual indicator that the item is clicked)

.babelrc

@@ -1,8 +1,11 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/typescript",
+    ["@babel/preset-typescript", { "allowDeclareFields": true }],
     ["@babel/preset-env", { "modules": false }]
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": [
+    [ "@babel/plugin-transform-typescript", { "allowDeclareFields": true } ],
+    "@babel/plugin-proposal-class-properties"
+  ]
 }

.eslintrc.js

@@ -6,9 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
-    'prettier',
-    'prettier/react',
-    'prettier/@typescript-eslint',
+    'prettier'
   ],
   env: {
     browser: true,

.gitignore

@@ -1,6 +1,5 @@
 website/bundle.js
-lib
-dist
+#dist
 build
 node_modules
 .DS_Store

dist/CreateSelectable.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TSelectableItemState, TSelectableItemProps } from './Selectable.types';
+declare type TAddedProps = Partial<Pick<TSelectableItemProps, 'isSelected'>>;
+export declare const createSelectable: <T extends unknown>(WrappedComponent: React.ComponentType<TSelectableItemState & {
+    selectableRef(node: HTMLElement | null): void;
+} & T>) => React.ComponentType<T & Partial<Pick<TSelectableItemProps, "isSelected">>>;
+export {};

dist/DeselectAll.d.ts

@@ -0,0 +1,17 @@
+import React, { Component, FunctionComponent, ReactNode } from 'react';
+import { SelectableGroupContext } from './SelectableGroup.context';
+declare type TDeselectAllProps = {
+    children: ReactNode;
+    component?: string | FunctionComponent;
+    className?: string;
+    [key: string]: any;
+};
+export declare class DeselectAll extends Component<TDeselectAllProps> {
+    static contextType: React.Context<import("./Selectable.types").TSelectableGroupContext>;
+    context: React.ContextType<typeof SelectableGroupContext>;
+    root: HTMLDivElement | null;
+    componentDidMount(): void;
+    getRootRef: (ref: HTMLDivElement | null) => void;
+    render(): JSX.Element;
+}
+export {};

dist/SelectAll.d.ts

@@ -0,0 +1,17 @@
+import React, { Component, ReactNode, FunctionComponent } from 'react';
+import { SelectableGroupContext } from './SelectableGroup.context';
+declare type TSelectAllProps = {
+    children: ReactNode;
+    component?: string | FunctionComponent;
+    className?: string;
+    [key: string]: any;
+};
+export declare class SelectAll extends Component<TSelectAllProps> {
+    static contextType: React.Context<import("./Selectable.types").TSelectableGroupContext>;
+    context: React.ContextType<typeof SelectableGroupContext>;
+    root: HTMLDivElement | null;
+    componentDidMount(): void;
+    getRootRef: (ref: HTMLDivElement | null) => void;
+    render(): JSX.Element;
+}
+export {};

dist/Selectable.types.d.ts

@@ -0,0 +1,28 @@
+import { Maybe, TComputedBounds, TGetBoundsForNodeArgs } from './utils';
+declare type TSelectableContext = {
+    register(selectableItem: TSelectableItem): void;
+    unregister(selectableItem: TSelectableItem): void;
+    selectAll(): void;
+    clearSelection(): void;
+    getScrolledContainer(): Maybe<HTMLElement>;
+};
+declare type TSelectableGroupContext = {
+    selectable: TSelectableContext;
+};
+declare type TSelectableItemState = {
+    isSelected: boolean;
+    isSelecting: boolean;
+};
+declare type TSelectableItem = {
+    updateBounds(containerScroll?: TGetBoundsForNodeArgs): void;
+    registerSelectable(containerScroll?: TGetBoundsForNodeArgs): void;
+    setState(state: any): void;
+    state: TSelectableItemState;
+    deselected: boolean;
+    node: Maybe<HTMLElement>;
+    bounds: Maybe<TComputedBounds[]>;
+};
+declare type TSelectableItemProps = TSelectableItemState & {
+    selectableRef(node: HTMLElement | null): void;
+};
+export { TSelectableGroupContext, TSelectableItemState, TSelectableItem, TSelectableItemProps };

dist/SelectableGroup.context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TSelectableGroupContext } from './Selectable.types';
+export declare const SelectableGroupContext: React.Context<TSelectableGroupContext>;