@darajs/ui-utils 0.4.8

package/dist/use-intersection-observer.js

@@ -0,0 +1,51 @@
+/**
+ * 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, useState } from 'react';
+/**
+ * The useIntersectionObserver hook allows a component to track whether an element is intersecting with an ancestor
+ * element or with a top-level document's viewport.
+ *
+ * @param ref the ref to the element that is to be observed
+ * @param rootMargin the amount of the element that is to be intersecting for the observer's callback to be executed.
+ * @param threshold Either a single number or an array of numbers which indicate at what percentage of the target's
+ * visibility the observer's callback should be executed.
+ * @returns boolean indicating whether element is intersecting or not
+ */
+function useIntersectionObserver(ref, rootMargin = '0px', threshold = 1.0) {
+    const [isIntersecting, setIntersecting] = useState(false);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), {
+            rootMargin,
+            threshold,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        const currentRef = ref.current;
+        return () => {
+            if (currentRef) {
+                observer.unobserve(currentRef);
+            }
+            else {
+                observer.disconnect();
+            }
+        };
+    }, [ref, rootMargin, threshold]);
+    return isIntersecting;
+}
+export default useIntersectionObserver;
+//# sourceMappingURL=use-intersection-observer.js.map

package/dist/use-intersection-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-intersection-observer.js","sourceRoot":"","sources":["../src/use-intersection-observer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAoB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;;;;;GASG;AAEH,SAAS,uBAAuB,CAC5B,GAAwB,EACxB,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,GAAG;IAEf,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;YAC1F,UAAU;YACV,SAAS;SACZ,CAAC,CAAC;QACH,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC;QAED,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC;QAE/B,OAAO,GAAG,EAAE;YACR,IAAI,UAAU,EAAE,CAAC;gBACb,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACJ,QAAQ,CAAC,UAAU,EAAE,CAAC;YAC1B,CAAC;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IACjC,OAAO,cAAc,CAAC;AAC1B,CAAC;AAED,eAAe,uBAAuB,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * The useOnClickOutside hook allows for a component to track whether a click was made outside an element
+ *
+ * @param element any element that the hook should handle the click outside of
+ * @param handler callback for when a click outside of the given element occurs
+ */
+declare function useOnClickOutside(element: HTMLElement, handler: () => void): void;
+export default useOnClickOutside;
+//# sourceMappingURL=use-on-click-outside.d.ts.map

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

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

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

@@ -0,0 +1,42 @@
+/**
+ * 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';
+/**
+ * The useOnClickOutside hook allows for a component to track whether a click was made outside an element
+ *
+ * @param element any element that the hook should handle the click outside of
+ * @param handler callback for when a click outside of the given element occurs
+ */
+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/use-on-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-click-outside.js","sourceRoot":"","sources":["../src/use-on-click-outside.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;GAKG;AAEH,SAAS,iBAAiB,CAAC,OAAoB,EAAE,OAAmB;IAChE,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,MAAc,CAAC,EAAE,CAAC;gBACrD,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/dist/use-throttle.d.ts

@@ -0,0 +1,25 @@
+interface ThrottleOptions {
+    leading?: boolean;
+    trailing?: boolean;
+}
+/**
+ * Create a throttled version of the callback passed. A hook is required to persist the state of the throttle between
+ * renders
+ *
+ * @param cb the function to throttle
+ * @param delay how long between each throttled event
+ * @param options whether to throttle on the leading or trailing edge, see lodash throttle docs for context
+ */
+export declare function useThrottle(cb: (...args: Array<any>) => any, delay: number, options?: ThrottleOptions): (...args: Array<any>) => any;
+/**
+ * A throttled version of useState that allows for state to only be updated every so often. This is useful when setting
+ * state that may trigger network requests. Exposes a throttled and immediate version of the setState function for
+ * greater control
+ *
+ * @param initialValue the initial state value
+ * @param delay how long between each throttled update
+ * @param options whether to throttle on the leading or trailing edge, see lodash throttle docs for context
+ */
+export declare function useThrottledState<T>(initialValue: T, delay: number, options?: ThrottleOptions): [T, (value: T) => void, (value: T) => void];
+export {};
+//# sourceMappingURL=use-throttle.d.ts.map

package/dist/use-throttle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttle.d.ts","sourceRoot":"","sources":["../src/use-throttle.tsx"],"names":[],"mappings":"AAmBA,UAAU,eAAe;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACvB,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,EAChC,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,eAAe,GAC1B,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAU9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAC/B,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,eAAoD,GAC9D,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAI7C"}

package/dist/use-throttle.js

@@ -0,0 +1,49 @@
+/**
+ * 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 throttle from 'lodash/throttle';
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Create a throttled version of the callback passed. A hook is required to persist the state of the throttle between
+ * renders
+ *
+ * @param cb the function to throttle
+ * @param delay how long between each throttled event
+ * @param options whether to throttle on the leading or trailing edge, see lodash throttle docs for context
+ */
+export function useThrottle(cb, delay, options) {
+    const cbRef = useRef(cb);
+    useEffect(() => {
+        cbRef.current = cb;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback(throttle((...args) => cbRef.current(...args), delay, options), [delay, options]);
+}
+/**
+ * A throttled version of useState that allows for state to only be updated every so often. This is useful when setting
+ * state that may trigger network requests. Exposes a throttled and immediate version of the setState function for
+ * greater control
+ *
+ * @param initialValue the initial state value
+ * @param delay how long between each throttled update
+ * @param options whether to throttle on the leading or trailing edge, see lodash throttle docs for context
+ */
+export function useThrottledState(initialValue, delay, options = { leading: false, trailing: true }) {
+    const [value, setValue] = useState(initialValue);
+    const throttledSetValue = useThrottle(setValue, delay, options);
+    return [value, throttledSetValue, setValue];
+}
+//# sourceMappingURL=use-throttle.js.map

package/dist/use-throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttle.js","sourceRoot":"","sources":["../src/use-throttle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOjE;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CACvB,EAAgC,EAChC,KAAa,EACb,OAAyB;IAEzB,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IACzB,SAAS,CAAC,GAAG,EAAE;QACX,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IACH,uDAAuD;IACvD,OAAO,WAAW,CACd,QAAQ,CAAC,CAAC,GAAG,IAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,EACzE,CAAC,KAAK,EAAE,OAAO,CAAC,CACnB,CAAC;AACN,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAC7B,YAAe,EACf,KAAa,EACb,UAA2B,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;IAE7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,iBAAiB,GAAG,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAChE,OAAO,CAAC,KAAK,EAAE,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAChD,CAAC"}

package/dist/use-update-effect.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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';
+/**
+ * Like React useEffect except ignores the first invocation.
+ *
+ * @param effect Imperative function that can return a cleanup function
+ * @param deps If present, effect will only activate if the values in the list change.
+ */
+declare const useUpdateEffect: typeof useEffect;
+export default useUpdateEffect;
+//# sourceMappingURL=use-update-effect.d.ts.map

package/dist/use-update-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-update-effect.d.ts","sourceRoot":"","sources":["../src/use-update-effect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAE1C;;;;;GAKG;AACH,QAAA,MAAM,eAAe,EAAE,OAAO,SAW7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/use-update-effect.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, useRef } from 'react';
+/**
+ * Like React useEffect except ignores the first invocation.
+ *
+ * @param effect Imperative function that can return a cleanup function
+ * @param deps If present, effect will only activate if the values in the list change.
+ */
+const useUpdateEffect = (effect, deps) => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
+        return effect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};
+export default useUpdateEffect;
+//# sourceMappingURL=use-update-effect.js.map

package/dist/use-update-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-update-effect.js","sourceRoot":"","sources":["../src/use-update-effect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,eAAe,GAAqB,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;IACvD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACrB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,OAAO;QACX,CAAC;QACD,OAAO,MAAM,EAAE,CAAC;QAChB,uDAAuD;IAC3D,CAAC,EAAE,IAAI,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@darajs/ui-utils",
+  "version": "0.4.8",
+  "description": "General utilities for the Dara UI framework",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "jsnext:main": "dist/index.js",
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "lint": "eslint src --ext .tsx --max-warnings 0 && stylelint './src/**/*.tsx'",
+    "format": "prettier src --write",
+    "format:check": "prettier src --check",
+    "lint:fix": "eslint src --ext .tsx --max-warnings 0 --fix && stylelint './src/**/*.tsx' --fix",
+    "test-watch": "jest --watch"
+  },
+  "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",
+    "@darajs/eslint-config": "0.4.8",
+    "@darajs/prettier-config": "0.4.8",
+    "@darajs/stylelint-config": "0.4.8",
+    "@types/jest": "^25.2.3",
+    "@types/lodash": "^4.14.155",
+    "@types/react": "^18.0",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-styled-components": "^1.13.2",
+    "eslint": "^7.32.0",
+    "jest": "^29.5.0",
+    "prettier": "^3.0.0",
+    "react-test-renderer": "^17.0",
+    "rimraf": "^3.0.2",
+    "stylelint": "^15.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "d3-scale": "3.2.1",
+    "lodash": "4.17.21",
+    "nanoid": "^3.3.0",
+    "react": "^18.0",
+    "rxjs": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "28ec9380d883a6f5f0fcd05f27beda7e412fa95f"
+}