@darajs/ui-components 0.4.8

package/dist/utils/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as Chevron } from './chevron';
+export { default as SubtleLabel } from './label';
+export { List, NoItemsLabel } from './list-styles';
+export { default as useInfiniteLoader, InfiniteLoader } from './use-infinite-loader';
+export { default as matchWidthToReference } from './match-width-to-reference';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as Chevron } from './chevron';
+export { default as SubtleLabel } from './label';
+export { List, NoItemsLabel } from './list-styles';
+export { default as useInfiniteLoader } from './use-infinite-loader';
+export { default as matchWidthToReference } from './match-width-to-reference';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAkB,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/utils/label.d.ts

@@ -0,0 +1,3 @@
+declare const SubtleLabel: import("styled-components").StyledComponent<"label", import("@darajs/styled-components").DefaultTheme, {}, never>;
+export default SubtleLabel;
+//# sourceMappingURL=label.d.ts.map

package/dist/utils/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/utils/label.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,WAAW,mHAIhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/utils/label.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import styled from '@darajs/styled-components';
+const SubtleLabel = styled.label `
+    margin-bottom: 0;
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.grey6};
+`;
+export default SubtleLabel;
+//# sourceMappingURL=label.js.map

package/dist/utils/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../src/utils/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;aAGnB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC/C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/utils/list-styles.d.ts

@@ -0,0 +1,8 @@
+interface ListProps {
+    isOpen: boolean;
+    maxItems?: number;
+}
+declare const List: import("styled-components").StyledComponent<"div", import("@darajs/styled-components").DefaultTheme, ListProps, never>;
+declare const NoItemsLabel: import("styled-components").StyledComponent<"span", import("@darajs/styled-components").DefaultTheme, {}, never>;
+export { List, NoItemsLabel };
+//# sourceMappingURL=list-styles.d.ts.map

package/dist/utils/list-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.d.ts","sourceRoot":"","sources":["../../src/utils/list-styles.tsx"],"names":[],"mappings":"AAkBA,UAAU,SAAS;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,wHAUT,CAAC;AAEF,QAAA,MAAM,YAAY,kHAYjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC"}

package/dist/utils/list-styles.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import styled from '@darajs/styled-components';
+const List = styled.div `
+    z-index: 5000;
+
+    overflow-y: auto;
+    display: ${(props) => (props.isOpen ? 'flex' : 'none')};
+    flex-direction: column;
+
+    max-height: calc(${(props) => (props.maxItems || 5) * 2}em + 2px);
+
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+`;
+const NoItemsLabel = styled.span `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+
+    height: 2rem;
+
+    font-size: 1rem;
+    color: ${(props) => props.theme.colors.text};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+`;
+export { List, NoItemsLabel };
+//# sourceMappingURL=list-styles.js.map

package/dist/utils/list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../src/utils/list-styles.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAO/C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAW;;;;eAInB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;uBAGnC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC;;wBAEnC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC1D,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;aASnB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;wBAEvB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC1D,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC"}

package/dist/utils/match-width-to-reference.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Middleware } from '@floating-ui/react';
+/**
+ * A middleware for Floating UI that auto sizes the floating content to be the same as the reference element.
+ * Optionally, a delta can be added to the width.
+ */
+declare const matchWidthToReference: (delta?: number) => Middleware;
+export default matchWidthToReference;
+//# sourceMappingURL=match-width-to-reference.d.ts.map

package/dist/utils/match-width-to-reference.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match-width-to-reference.d.ts","sourceRoot":"","sources":["../../src/utils/match-width-to-reference.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAoC,UAAU,EAAQ,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,QAAA,MAAM,qBAAqB,sBAAgB,UAOrC,CAAC;AAEP,eAAe,qBAAqB,CAAC"}

package/dist/utils/match-width-to-reference.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { size } from '@floating-ui/react';
+/**
+ * A middleware for Floating UI that auto sizes the floating content to be the same as the reference element.
+ * Optionally, a delta can be added to the width.
+ */
+const matchWidthToReference = (delta = 0) => size({
+    apply({ rects, elements }) {
+        Object.assign(elements.floating.style, {
+            width: `${rects.reference.width + delta}px`,
+        });
+    },
+});
+export default matchWidthToReference;
+//# sourceMappingURL=match-width-to-reference.js.map

package/dist/utils/match-width-to-reference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match-width-to-reference.js","sourceRoot":"","sources":["../../src/utils/match-width-to-reference.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAgD,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,qBAAqB,GAAG,CAAC,KAAK,GAAG,CAAC,EAAc,EAAE,CACpD,IAAI,CAAC;IACD,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA+C;QAClE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;YACnC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,IAAI;SAC9C,CAAC,CAAC;IACP,CAAC;CACJ,CAAC,CAAC;AAEP,eAAe,qBAAqB,CAAC"}

package/dist/utils/syncKbdHighlightIdx.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Synchronizes the highlighted index with keyboard navigation and resets it for mouse movements.
+ *
+ * This function returns an object with an `onHighlightedIndexChange` method that handles changes to the highlighted index.
+ * It updates the `setKbdHighlightIdx` callback to force a rerender when the element is highlighted using the keyboard,
+ * and resets the index when the mouse is used to let CSS :hover take over the styling.
+ *
+ * @param {function} setKbdHighlightIdx - Callback function to set the highlighted index for keyboard navigation.
+ * @returns {object} An object containing the `onHighlightedIndexChange` method.
+ *
+ * @example
+ * const { onHighlightedIndexChange } = syncKbdHighlightIdx(setKbdHighlightIdx);
+ *
+ * // Use this method in the Downshift hook to handle highlighted index changes
+ * useSelect({
+ *   items,
+ *   onHighlightedIndexChange
+ * });
+ */
+export declare const syncKbdHighlightIdx: (setKbdHighlightIdx: (idx: number) => void) => {
+    onHighlightedIndexChange: ({ highlightedIndex, type }: any) => void;
+};
+//# sourceMappingURL=syncKbdHighlightIdx.d.ts.map

package/dist/utils/syncKbdHighlightIdx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"syncKbdHighlightIdx.d.ts","sourceRoot":"","sources":["../../src/utils/syncKbdHighlightIdx.ts"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,mBAAmB,uBACR,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,KAC1C;IAAE,wBAAwB,EAAE,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,GAAG,KAAK,IAAI,CAAA;CAWtE,CAAC"}

package/dist/utils/syncKbdHighlightIdx.js

@@ -0,0 +1,41 @@
+import { useCombobox, useSelect } from 'downshift';
+const { stateChangeTypes: useSelectChangeTypes } = useSelect;
+const { stateChangeTypes: useComboboxChangeTypes } = useCombobox;
+const setTypes = new Set([
+    useSelectChangeTypes.ToggleButtonKeyDownArrowDown,
+    useSelectChangeTypes.ToggleButtonKeyDownArrowUp,
+    useComboboxChangeTypes.InputKeyDownArrowDown,
+    useComboboxChangeTypes.InputKeyDownArrowUp,
+]);
+/**
+ * Synchronizes the highlighted index with keyboard navigation and resets it for mouse movements.
+ *
+ * This function returns an object with an `onHighlightedIndexChange` method that handles changes to the highlighted index.
+ * It updates the `setKbdHighlightIdx` callback to force a rerender when the element is highlighted using the keyboard,
+ * and resets the index when the mouse is used to let CSS :hover take over the styling.
+ *
+ * @param {function} setKbdHighlightIdx - Callback function to set the highlighted index for keyboard navigation.
+ * @returns {object} An object containing the `onHighlightedIndexChange` method.
+ *
+ * @example
+ * const { onHighlightedIndexChange } = syncKbdHighlightIdx(setKbdHighlightIdx);
+ *
+ * // Use this method in the Downshift hook to handle highlighted index changes
+ * useSelect({
+ *   items,
+ *   onHighlightedIndexChange
+ * });
+ */
+export const syncKbdHighlightIdx = (setKbdHighlightIdx) => ({
+    onHighlightedIndexChange: ({ highlightedIndex, type }) => {
+        // Hack to force a rerender of an element when highlighted with a keyboard
+        if (setTypes.has(type)) {
+            setKbdHighlightIdx(highlightedIndex);
+        }
+        // Reset the highlighted index to let CSS :hover take over the styling
+        if (type === useSelectChangeTypes.ItemMouseMove) {
+            setKbdHighlightIdx(undefined);
+        }
+    },
+});
+//# sourceMappingURL=syncKbdHighlightIdx.js.map

package/dist/utils/syncKbdHighlightIdx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"syncKbdHighlightIdx.js","sourceRoot":"","sources":["../../src/utils/syncKbdHighlightIdx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,GAAG,SAAS,CAAC;AAC7D,MAAM,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,GAAG,WAAW,CAAC;AAEjE,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC;IACrB,oBAAoB,CAAC,4BAA4B;IACjD,oBAAoB,CAAC,0BAA0B;IAC/C,sBAAsB,CAAC,qBAAqB;IAC5C,sBAAsB,CAAC,mBAAmB;CAC7C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAC/B,kBAAyC,EAC8B,EAAE,CAAC,CAAC;IAC3E,wBAAwB,EAAE,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAO,EAAE,EAAE;QAC1D,0EAA0E;QAC1E,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QACzC,CAAC;QACD,sEAAsE;QACtE,IAAI,IAAI,KAAK,oBAAoB,CAAC,aAAa,EAAE,CAAC;YAC9C,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;CACJ,CAAC,CAAC"}

package/dist/utils/use-infinite-loader.d.ts

@@ -0,0 +1,32 @@
+interface LoadReturn<T> {
+    data: Array<T>;
+    totalCount: number;
+}
+export interface ItemsRenderedPayload {
+    overscanStartIndex: number;
+    overscanStopIndex: number;
+}
+export interface InfiniteLoader<T> {
+    /** A function to get the actual value of an item, based on it's absolute index in the list */
+    getItem: (index: number) => T;
+    /** The total count of items in the list */
+    itemCount: number;
+    /** A handler for the onItemsRendered function exposed by the react-window components */
+    onItemsRendered: (payload: ItemsRenderedPayload) => Promise<void>;
+    /**
+     * A function to force a refresh of the data, will trigger a refetch of the current window and discard anything
+     * outside that window
+     */
+    refresh: () => void;
+}
+/**
+ * This is a helper hook that plugs into the react-window components and allows them to load data infinitely by simply
+ * passing a load data function to the constructor and passing the returned props into the virtualized list components.
+ * The key difference between this and the infinite loader library is that this hook allows for polling, simply by
+ * calling the refresh function that it exposes in a useEffect hook.
+ *
+ * @param onLoadData a function that should load the data between startIndex and stopIndex
+ */
+declare function useInfiniteLoader<T>(onLoadData: (startIndex: number, stopIndex: number) => Promise<LoadReturn<T>>, onError?: (err: Error) => void | Promise<void>, batchSize?: number): InfiniteLoader<T>;
+export default useInfiniteLoader;
+//# sourceMappingURL=use-infinite-loader.d.ts.map

package/dist/utils/use-infinite-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-loader.d.ts","sourceRoot":"","sources":["../../src/utils/use-infinite-loader.tsx"],"names":[],"mappings":"AAoBA,UAAU,UAAU,CAAC,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,8FAA8F;IAC9F,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,eAAe,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAC7E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAC9C,SAAS,SAAK,GACf,cAAc,CAAC,CAAC,CAAC,CAmGnB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/utils/use-infinite-loader.js

@@ -0,0 +1,119 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDeepCompare } from '@darajs/ui-utils';
+/**
+ * This is a helper hook that plugs into the react-window components and allows them to load data infinitely by simply
+ * passing a load data function to the constructor and passing the returned props into the virtualized list components.
+ * The key difference between this and the infinite loader library is that this hook allows for polling, simply by
+ * calling the refresh function that it exposes in a useEffect hook.
+ *
+ * @param onLoadData a function that should load the data between startIndex and stopIndex
+ */
+function useInfiniteLoader(onLoadData, onError, batchSize = 50) {
+    // Use a ref on the onLoadData function to get the updated version into the onItemsRendered function as only the
+    // first instance passed is ever called by react-window
+    const onLoadRef = useRef(onLoadData);
+    const [internalData, setInternalData] = useState([]);
+    const [itemCount, setItemCount] = useState(0);
+    const [currentStartIdx, setStartIdx] = useState(0);
+    const [currentStopIdx, setStopIdx] = useState(0);
+    const [currentRange, setCurrentRange] = useState({
+        overscanStartIndex: 0,
+        overscanStopIndex: 50,
+    });
+    const getItem = useCallback((index) => {
+        const adjustedIndex = index - currentStartIdx;
+        if (adjustedIndex < 0 || adjustedIndex > internalData.length) {
+            return;
+        }
+        return internalData[adjustedIndex];
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useDeepCompare([currentStartIdx, internalData]));
+    const onItemsRendered = useCallback((_a, forceRefresh_1) => __awaiter(this, [_a, forceRefresh_1], void 0, function* ({ overscanStartIndex, overscanStopIndex }, forceRefresh) {
+        try {
+            const isFirstItemLoaded = overscanStartIndex >= currentStartIdx && overscanStartIndex <= currentStopIdx;
+            const isLastItemLoaded = overscanStopIndex >= currentStartIdx && overscanStopIndex <= currentStopIdx;
+            setCurrentRange({ overscanStartIndex, overscanStopIndex });
+            // Nothing to do if everything is loaded and it's not a forced refresh
+            if (isFirstItemLoaded && isLastItemLoaded && !forceRefresh) {
+                return;
+            }
+            // If both are loaded then forceRefresh is true or both are not loaded and we're starting from nothing. In
+            // either case we need to calculate the window to fetch from the backend.
+            if (isFirstItemLoaded === isLastItemLoaded) {
+                const mid = Math.floor((overscanStopIndex - overscanStartIndex) / 2 + overscanStartIndex);
+                const start = Math.max(mid - batchSize / 2, 0);
+                const end = mid + batchSize / 2;
+                setStartIdx(start);
+                setStopIdx(end);
+                const { data, totalCount } = yield onLoadRef.current(start, end);
+                setInternalData(data);
+                setItemCount(totalCount);
+                return;
+            }
+            // This branch covers scrolling up from the bottom of the list and loading as it goes
+            if (!isFirstItemLoaded) {
+                const start = Math.max(currentStartIdx - batchSize, 0);
+                const res = onLoadRef.current(start, currentStartIdx);
+                setStartIdx(start);
+                const { data, totalCount } = yield res;
+                setInternalData((current) => [...data, ...current]);
+                setItemCount(totalCount);
+                return;
+            }
+            // This branch covers scrolling down from the top and loading as it goes
+            const end = currentStopIdx + batchSize;
+            const res = onLoadRef.current(currentStopIdx, end);
+            setStopIdx(end);
+            const { data, totalCount } = yield res;
+            setInternalData((current) => [...current, ...data]);
+            setItemCount(totalCount);
+        }
+        catch (err) {
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        }
+    }), [batchSize, currentStartIdx, currentStopIdx, onError]);
+    useEffect(() => {
+        onLoadRef.current = onLoadData;
+        onItemsRendered(currentRange, true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onLoadData]);
+    const refresh = useCallback(() => {
+        onItemsRendered(currentRange, true);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useDeepCompare([currentRange]));
+    return {
+        getItem,
+        itemCount,
+        onItemsRendered,
+        refresh,
+    };
+}
+export default useInfiniteLoader;
+//# sourceMappingURL=use-infinite-loader.js.map

package/dist/utils/use-infinite-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-loader.js","sourceRoot":"","sources":["../../src/utils/use-infinite-loader.tsx"],"names":[],"mappings":"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"}

package/dist/utils/use-on-click-outside.d.ts

@@ -0,0 +1,3 @@
+declare function useOnClickOutside(element: any, handler: () => void): void;
+export default useOnClickOutside;
+//# sourceMappingURL=use-on-click-outside.d.ts.map

package/dist/utils/use-on-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-click-outside.d.ts","sourceRoot":"","sources":["../../src/utils/use-on-click-outside.tsx"],"names":[],"mappings":"AAkBA,iBAAS,iBAAiB,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI,CAgBlE;AAED,eAAe,iBAAiB,CAAC"}

package/dist/utils/use-on-click-outside.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect } from 'react';
+function useOnClickOutside(element, handler) {
+    useEffect(() => {
+        const listener = (event) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!element || element.contains(event.target)) {
+                return;
+            }
+            handler();
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [element, handler]);
+}
+export default useOnClickOutside;
+//# sourceMappingURL=use-on-click-outside.js.map

package/dist/utils/use-on-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-click-outside.js","sourceRoot":"","sources":["../../src/utils/use-on-click-outside.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,SAAS,iBAAiB,CAAC,OAAY,EAAE,OAAmB;IACxD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACzC,8DAA8D;YAC9D,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC7C,OAAO;YACX,CAAC;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACjD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACpD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACzD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@darajs/ui-components",
+  "version": "0.4.8",
+  "description": "The core React UI kit for Dara",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "jsnext:main": "dist/index.js",
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "format": "prettier src --write",
+    "format:check": "prettier src --check",
+    "lint": "tsc --noemit && eslint src --ext .tsx --max-warnings 0 && stylelint './src/**/*.tsx'",
+    "lint:fix": "eslint src --ext .tsx --max-warnings 0 --fix && stylelint './src/**/*.tsx' --fix",
+    "test-watch": "jest --watch",
+    "test": "jest",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "author": "Krzysztof Bielikowicz <krzysztof@causalens.com>",
+  "license": "Apache-2.0",
+  "prettier": "@darajs/prettier-config",
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@darajs/eslint-config": "0.4.8",
+    "@darajs/prettier-config": "0.4.8",
+    "@darajs/stylelint-config": "0.4.8",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-styling": "^0.3.2",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/theming": "^6.5.16",
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.0",
+    "@types/lodash": "^4.14.155",
+    "@types/react": "^18.0",
+    "@types/react-collapse": "^5.0.1",
+    "@types/react-datepicker": "^4.0.0",
+    "@types/react-dom": "^18.0",
+    "@types/react-table": "^7.0.19",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.2",
+    "@types/styled-components": "^5.1.26",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-styled-components": "^1.13.2",
+    "eslint": "^7.2.0",
+    "eslint-plugin-jest": "^26.1.1",
+    "jest": "^29.5.0",
+    "jest-css-modules": "^2.1.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "^3.0.0",
+    "react-docgen-typescript-plugin": "^1.0.5",
+    "react-test-renderer": "^17.0",
+    "rimraf": "^3.0.2",
+    "storybook-dark-mode": "^2.1.1",
+    "stylelint": "^15.0.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "@darajs/styled-components": "0.4.8",
+    "@darajs/ui-icons": "0.4.8",
+    "@darajs/ui-utils": "0.4.8",
+    "@floating-ui/react": "^0.26.12",
+    "@fortawesome/free-regular-svg-icons": "~6.4.0",
+    "@fortawesome/free-solid-svg-icons": "~6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tippyjs/react": "4.1.0",
+    "date-fns": "2.9.0",
+    "downshift": "^7.0.0",
+    "lodash": "4.17.21",
+    "memoize-one": "^6.0.0",
+    "nanoid": "^3.3.0",
+    "polished": "3.6.4",
+    "prism-react-renderer": "^1.2.0",
+    "react": "^18.0",
+    "react-collapse": "^5.1.1",
+    "react-compound-slider": "3.3.0",
+    "react-datepicker": "4.8.0",
+    "react-dom": "^18.0",
+    "react-dropzone": "11.0.1",
+    "react-markdown": "^9.0.1",
+    "react-table": "7.7.0",
+    "react-table-sticky": "^1.1.3",
+    "react-virtualized-auto-sizer": "1.0.6",
+    "react-window": "1.8.10",
+    "remark-gfm": "^4.0.0",
+    "tippy.js": "6.2.6"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "28ec9380d883a6f5f0fcd05f27beda7e412fa95f"
+}