@sproutsocial/seeds-react-hooks 1.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/index.d.mts +66 -0
  2. package/dist/index.d.ts +66 -0
  3. package/dist/index.js +17 -0
  4. package/dist/index.mjs +8 -0
  5. package/package.json +10 -15
  6. package/__flow__/index.flow.js +0 -8
  7. package/__flow__/index.js +0 -3
  8. package/__flow__/useInteractiveColor/useInteractiveColor.flow.js +0 -3
  9. package/__flow__/useMultiselect/useMultiselect.flow.js +0 -17
  10. package/__flow__/useMutationObserver/useMutationObserver.flow.js +0 -19
  11. package/__flow__/useSelect/useSelect.flow.js +0 -10
  12. package/__flow__/useTextContent/useTextContent.flow.js +0 -21
  13. package/__flow__/useWhyDidYouUpdate/useWhyDidYouUpdate.flow.js +0 -3
  14. package/commonjs/index.flow.js +0 -71
  15. package/commonjs/index.js +0 -82
  16. package/commonjs/index.js.flow +0 -3
  17. package/commonjs/useInteractiveColor/useInteractiveColor.flow.js +0 -1
  18. package/commonjs/useInteractiveColor/useInteractiveColor.js +0 -32
  19. package/commonjs/useMeasure/useMeasure.js +0 -65
  20. package/commonjs/useMultiselect/useMultiselect.flow.js +0 -1
  21. package/commonjs/useMultiselect/useMultiselect.js +0 -77
  22. package/commonjs/useMutationObserver/useMutationObserver.flow.js +0 -1
  23. package/commonjs/useMutationObserver/useMutationObserver.js +0 -58
  24. package/commonjs/useSelect/useSelect.flow.js +0 -1
  25. package/commonjs/useSelect/useSelect.js +0 -38
  26. package/commonjs/useTextContent/useTextContent.flow.js +0 -25
  27. package/commonjs/useTextContent/useTextContent.js +0 -26
  28. package/commonjs/useWhyDidYouUpdate/useWhyDidYouUpdate.flow.js +0 -1
  29. package/commonjs/useWhyDidYouUpdate/useWhyDidYouUpdate.js +0 -46
  30. package/dist/types/index.d.ts +0 -8
  31. package/dist/types/index.d.ts.map +0 -1
  32. package/dist/types/useInteractiveColor/useInteractiveColor.d.ts +0 -9
  33. package/dist/types/useInteractiveColor/useInteractiveColor.d.ts.map +0 -1
  34. package/dist/types/useMeasure/useMeasure.d.ts +0 -14
  35. package/dist/types/useMeasure/useMeasure.d.ts.map +0 -1
  36. package/dist/types/useMultiselect/useMultiselect.d.ts +0 -11
  37. package/dist/types/useMultiselect/useMultiselect.d.ts.map +0 -1
  38. package/dist/types/useMutationObserver/useMutationObserver.d.ts +0 -18
  39. package/dist/types/useMutationObserver/useMutationObserver.d.ts.map +0 -1
  40. package/dist/types/useSelect/useSelect.d.ts +0 -10
  41. package/dist/types/useSelect/useSelect.d.ts.map +0 -1
  42. package/dist/types/useTextContent/useTextContent.d.ts +0 -5
  43. package/dist/types/useTextContent/useTextContent.d.ts.map +0 -1
  44. package/dist/types/useWhyDidYouUpdate/useWhyDidYouUpdate.d.ts +0 -2
  45. package/dist/types/useWhyDidYouUpdate/useWhyDidYouUpdate.d.ts.map +0 -1
  46. package/lib/index.flow.js +0 -6
  47. package/lib/index.js +0 -7
  48. package/lib/index.js.flow +0 -3
  49. package/lib/useInteractiveColor/useInteractiveColor.flow.js +0 -0
  50. package/lib/useInteractiveColor/useInteractiveColor.js +0 -27
  51. package/lib/useMeasure/useMeasure.js +0 -59
  52. package/lib/useMultiselect/useMultiselect.flow.js +0 -0
  53. package/lib/useMultiselect/useMultiselect.js +0 -71
  54. package/lib/useMutationObserver/useMutationObserver.flow.js +0 -0
  55. package/lib/useMutationObserver/useMutationObserver.js +0 -51
  56. package/lib/useSelect/useSelect.flow.js +0 -0
  57. package/lib/useSelect/useSelect.js +0 -32
  58. package/lib/useTextContent/useTextContent.flow.js +0 -23
  59. package/lib/useTextContent/useTextContent.js +0 -20
  60. package/lib/useWhyDidYouUpdate/useWhyDidYouUpdate.flow.js +0 -0
  61. package/lib/useWhyDidYouUpdate/useWhyDidYouUpdate.js +0 -40
@@ -0,0 +1,66 @@
1
+ import { RefObject } from 'react';
2
+
3
+ interface DOMRectObject {
4
+ x: number;
5
+ y: number;
6
+ width: number;
7
+ height: number;
8
+ top: number;
9
+ right: number;
10
+ bottom: number;
11
+ left: number;
12
+ }
13
+ declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>): Readonly<DOMRectObject>;
14
+
15
+ type TypeSingleSelectProps<T extends string> = {
16
+ initialValue?: T | "";
17
+ onChange?: (value: string | T) => any;
18
+ };
19
+ declare const useSelect: <T extends string>({ initialValue, onChange: userOnChange, }?: TypeSingleSelectProps<T>) => {
20
+ value: string | T;
21
+ onChange: (newValue: string) => void;
22
+ };
23
+
24
+ type TypeMultiSelectProps<T extends string> = {
25
+ initialValue?: T[];
26
+ onChange?: (value: Array<string | T>) => any;
27
+ };
28
+ declare const useMultiselect: <T extends string>({ initialValue, onChange: userOnChange, }?: TypeMultiSelectProps<T>) => {
29
+ value: (string | T)[];
30
+ onChange: (newValue: string) => void;
31
+ onClear: () => void;
32
+ };
33
+
34
+ type TypeMutationObserverInitRequired = {
35
+ childList: true;
36
+ } | {
37
+ attributes: true;
38
+ } | {
39
+ characterData: true;
40
+ };
41
+ type TypeMutationObserverInit = {
42
+ subtree?: boolean;
43
+ attributeOldValue?: boolean;
44
+ characterDataOldValue?: boolean;
45
+ attributeFilter?: Array<string>;
46
+ } & TypeMutationObserverInitRequired;
47
+ type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
48
+ declare function useMutationObserver(targetNode: Node | null, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): undefined;
49
+ declare function useMutationObserverOnce(targetNode: Node | null, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): undefined;
50
+
51
+ type textContentRef = ((node: Node) => void) & {
52
+ current?: string;
53
+ };
54
+ declare function useTextContent(initial: string): textContentRef;
55
+
56
+ declare function useWhyDidYouUpdate(name: string, props: object): void;
57
+
58
+ /**
59
+ * The useInteractiveColor hook has context of theme mode (light or dark)
60
+ * and can be used to lighten or darken a color dynamically
61
+ *
62
+ * note: colors are limited to our theme colors
63
+ */
64
+ declare const useInteractiveColor: (themeColor: string) => string;
65
+
66
+ export { type textContentRef, useInteractiveColor, useMeasure, useMultiselect, useMutationObserver, useMutationObserverOnce, useSelect, useTextContent, useWhyDidYouUpdate };
@@ -0,0 +1,66 @@
1
+ import { RefObject } from 'react';
2
+
3
+ interface DOMRectObject {
4
+ x: number;
5
+ y: number;
6
+ width: number;
7
+ height: number;
8
+ top: number;
9
+ right: number;
10
+ bottom: number;
11
+ left: number;
12
+ }
13
+ declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>): Readonly<DOMRectObject>;
14
+
15
+ type TypeSingleSelectProps<T extends string> = {
16
+ initialValue?: T | "";
17
+ onChange?: (value: string | T) => any;
18
+ };
19
+ declare const useSelect: <T extends string>({ initialValue, onChange: userOnChange, }?: TypeSingleSelectProps<T>) => {
20
+ value: string | T;
21
+ onChange: (newValue: string) => void;
22
+ };
23
+
24
+ type TypeMultiSelectProps<T extends string> = {
25
+ initialValue?: T[];
26
+ onChange?: (value: Array<string | T>) => any;
27
+ };
28
+ declare const useMultiselect: <T extends string>({ initialValue, onChange: userOnChange, }?: TypeMultiSelectProps<T>) => {
29
+ value: (string | T)[];
30
+ onChange: (newValue: string) => void;
31
+ onClear: () => void;
32
+ };
33
+
34
+ type TypeMutationObserverInitRequired = {
35
+ childList: true;
36
+ } | {
37
+ attributes: true;
38
+ } | {
39
+ characterData: true;
40
+ };
41
+ type TypeMutationObserverInit = {
42
+ subtree?: boolean;
43
+ attributeOldValue?: boolean;
44
+ characterDataOldValue?: boolean;
45
+ attributeFilter?: Array<string>;
46
+ } & TypeMutationObserverInitRequired;
47
+ type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
48
+ declare function useMutationObserver(targetNode: Node | null, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): undefined;
49
+ declare function useMutationObserverOnce(targetNode: Node | null, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): undefined;
50
+
51
+ type textContentRef = ((node: Node) => void) & {
52
+ current?: string;
53
+ };
54
+ declare function useTextContent(initial: string): textContentRef;
55
+
56
+ declare function useWhyDidYouUpdate(name: string, props: object): void;
57
+
58
+ /**
59
+ * The useInteractiveColor hook has context of theme mode (light or dark)
60
+ * and can be used to lighten or darken a color dynamically
61
+ *
62
+ * note: colors are limited to our theme colors
63
+ */
64
+ declare const useInteractiveColor: (themeColor: string) => string;
65
+
66
+ export { type textContentRef, useInteractiveColor, useMeasure, useMultiselect, useMutationObserver, useMutationObserverOnce, useSelect, useTextContent, useWhyDidYouUpdate };
package/dist/index.js ADDED
@@ -0,0 +1,17 @@
1
+ 'use strict';
2
+
3
+ var react = require('react');
4
+ var seedsReactUtilities = require('@sproutsocial/seeds-react-utilities');
5
+ var polished = require('polished');
6
+ var styledComponents = require('styled-components');
7
+
8
+ var v=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function q(r){let[t,e]=react.useState(v);return react.useLayoutEffect(()=>{if(!r.current||!("ResizeObserver"in window))return;let n=new ResizeObserver(([o])=>{let{x:u,y:a,width:i,height:p,top:m,right:b,bottom:d,left:g}=o.contentRect;e({x:u,y:a,width:i,height:p,top:m,right:b,bottom:d,left:g});});return n.observe(r.current),()=>{n.disconnect();}},[r]),t}var U=({initialValue:r="",onChange:t=()=>{}}={initialValue:"",onChange:()=>{}})=>{let[e,s]=react.useState(r),n=react.useCallback(o=>{o!==e&&(s(o),t(o));},[t,e]);return {value:e,onChange:n}};var R=(r,t)=>{let e=new Set(r);switch(t.type){case"reset":return new Set;case"toggle_item":default:return t.value&&(e.has(t.value)?e.delete(t.value):e.add(t.value)),e}},K=({initialValue:r=[],onChange:t=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,s]=react.useReducer(R,new Set(r)),n=i=>Array.from(i),o=react.useCallback(i=>{s({type:"toggle_item",value:i});},[s]),u=react.useRef(!0);react.useEffect(()=>{if(u.current){u.current=!1;return}t(n(e));},[t,e]);let a=react.useCallback(()=>{s({type:"reset"});},[s]);return {value:n(e),onChange:o,onClear:a}};var E=r=>r;function k(r,t,e=E){if(!seedsReactUtilities.canUseDOM())return;let[s,n]=react.useState(void 0),o=react.useMemo(()=>new MutationObserver((u,a)=>{let i=e(u,a);n(i);}),[e]);return react.useEffect(()=>{if(r)return o.observe(r,t),()=>{o.disconnect();}},[r,t,o]),s}function H(r,t,e){let[s,n]=react.useState(!0),u=k(s?r:null,t,e);return u!==void 0&&s&&n(!1),u}function X(r){let[t,e]=react.useState(r),s=react.useCallback(n=>{n&&n.textContent!==null&&e(n.textContent);},[]);return s.current=t,s}function ee(r,t){let e=react.useRef({});react.useEffect(()=>{if(e.current){let s=Object.keys({...e.current,...t}),n={};s.forEach(o=>{e.current[o]!==t[o]&&(n[o]={from:e.current[o],to:t[o]});}),Object.keys(n).length&&console.log("[why-did-you-update]",r,n);}e.current=t;});}var oe=r=>{if(!styledComponents.useTheme())throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");return styledComponents.useTheme().mode==="dark"?polished.lighten(.2,r):polished.darken(.2,r)};
9
+
10
+ exports.useInteractiveColor = oe;
11
+ exports.useMeasure = q;
12
+ exports.useMultiselect = K;
13
+ exports.useMutationObserver = k;
14
+ exports.useMutationObserverOnce = H;
15
+ exports.useSelect = U;
16
+ exports.useTextContent = X;
17
+ exports.useWhyDidYouUpdate = ee;
package/dist/index.mjs ADDED
@@ -0,0 +1,8 @@
1
+ import { useState, useLayoutEffect, useCallback, useReducer, useRef, useEffect, useMemo } from 'react';
2
+ import { canUseDOM } from '@sproutsocial/seeds-react-utilities';
3
+ import { lighten, darken } from 'polished';
4
+ import { useTheme } from 'styled-components';
5
+
6
+ var v=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function q(r){let[t,e]=useState(v);return useLayoutEffect(()=>{if(!r.current||!("ResizeObserver"in window))return;let n=new ResizeObserver(([o])=>{let{x:u,y:a,width:i,height:p,top:m,right:b,bottom:d,left:g}=o.contentRect;e({x:u,y:a,width:i,height:p,top:m,right:b,bottom:d,left:g});});return n.observe(r.current),()=>{n.disconnect();}},[r]),t}var U=({initialValue:r="",onChange:t=()=>{}}={initialValue:"",onChange:()=>{}})=>{let[e,s]=useState(r),n=useCallback(o=>{o!==e&&(s(o),t(o));},[t,e]);return {value:e,onChange:n}};var R=(r,t)=>{let e=new Set(r);switch(t.type){case"reset":return new Set;case"toggle_item":default:return t.value&&(e.has(t.value)?e.delete(t.value):e.add(t.value)),e}},K=({initialValue:r=[],onChange:t=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,s]=useReducer(R,new Set(r)),n=i=>Array.from(i),o=useCallback(i=>{s({type:"toggle_item",value:i});},[s]),u=useRef(!0);useEffect(()=>{if(u.current){u.current=!1;return}t(n(e));},[t,e]);let a=useCallback(()=>{s({type:"reset"});},[s]);return {value:n(e),onChange:o,onClear:a}};var E=r=>r;function k(r,t,e=E){if(!canUseDOM())return;let[s,n]=useState(void 0),o=useMemo(()=>new MutationObserver((u,a)=>{let i=e(u,a);n(i);}),[e]);return useEffect(()=>{if(r)return o.observe(r,t),()=>{o.disconnect();}},[r,t,o]),s}function H(r,t,e){let[s,n]=useState(!0),u=k(s?r:null,t,e);return u!==void 0&&s&&n(!1),u}function X(r){let[t,e]=useState(r),s=useCallback(n=>{n&&n.textContent!==null&&e(n.textContent);},[]);return s.current=t,s}function ee(r,t){let e=useRef({});useEffect(()=>{if(e.current){let s=Object.keys({...e.current,...t}),n={};s.forEach(o=>{e.current[o]!==t[o]&&(n[o]={from:e.current[o],to:t[o]});}),Object.keys(n).length&&console.log("[why-did-you-update]",r,n);}e.current=t;});}var oe=r=>{if(!useTheme())throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");return useTheme().mode==="dark"?lighten(.2,r):darken(.2,r)};
7
+
8
+ export { oe as useInteractiveColor, q as useMeasure, K as useMultiselect, k as useMutationObserver, H as useMutationObserverOnce, U as useSelect, X as useTextContent, ee as useWhyDidYouUpdate };
package/package.json CHANGED
@@ -1,36 +1,31 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-hooks",
3
- "version": "1.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "Seeds React Hooks",
5
- "main": "commonjs/index.js",
6
- "module": "lib/index.mjs",
7
- "types": "dist/types/index.d.ts",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
8
  "author": "Sprout Social, Inc.",
9
9
  "license": "MIT",
10
10
  "files": [
11
- "__flow__",
12
- "commonjs",
13
- "dist",
14
- "lib"
11
+ "dist"
15
12
  ],
16
13
  "scripts": {
17
- "build": "yarn build:ts-declarations && tsx scripts/build.ts",
18
- "build:ts-declarations": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json"
14
+ "build": "tsup"
19
15
  },
20
16
  "dependencies": {
21
- "@sproutsocial/seeds-react-utilities": "*",
17
+ "@sproutsocial/seeds-react-utilities": "^2.0.0",
18
+ "@sproutsocial/seeds-react-theme": "^1.0.0",
22
19
  "polished": "^3.4.1"
23
20
  },
24
21
  "devDependencies": {
25
22
  "@types/styled-components": "^5.1.26",
26
23
  "@sproutsocial/eslint-config-seeds": "*",
27
- "@sproutsocial/seeds-build-flow": "*",
28
- "@sproutsocial/seeds-react-theme": "*",
29
- "flow-bin": "0.131.0",
30
24
  "react": "^17.0.2",
31
25
  "styled-components": "^5.2.3",
32
26
  "typescript": "^5.1.6",
33
- "tsx": "3.13.0"
27
+ "tsx": "3.13.0",
28
+ "tsup": "^8.0.2"
34
29
  },
35
30
  "peerDependencies": {
36
31
  "styled-components": "^5.2.3"
@@ -1,8 +0,0 @@
1
- // @flow
2
-
3
- export * from "./useSelect/useSelect";
4
- export * from "./useMultiselect/useMultiselect";
5
- export * from "./useMutationObserver/useMutationObserver";
6
- export * from "./useTextContent/useTextContent";
7
- export * from "./useWhyDidYouUpdate/useWhyDidYouUpdate";
8
- export * from "./useInteractiveColor/useInteractiveColor";
package/__flow__/index.js DELETED
@@ -1,3 +0,0 @@
1
- // @flow
2
- export * from './index.flow';
3
-
@@ -1,3 +0,0 @@
1
- //@flow strict-local
2
-
3
- declare export var useInteractiveColor: (themeColor: string) => string;
@@ -1,17 +0,0 @@
1
- // @flow
2
-
3
- type TypeMultiSelectProps<T: string> = {|
4
- initialValue?: T[],
5
- onChange?: (value: Array<string | T>) => any,
6
- |};
7
- declare var valueReducer: (state: Set<string>, action: {|
8
- type: string
9
- |} | {|
10
- type: string,
11
- value: string,
12
- |}) => Set<string>;
13
- declare export var useMultiselect: <T: string>(props?: TypeMultiSelectProps<T>) => {|
14
- onChange: (newValue: string) => void,
15
- onClear: () => void,
16
- value: Array<string | T>,
17
- |};
@@ -1,19 +0,0 @@
1
- type TypeMutationObserverInitRequired = {|
2
- childList: true
3
- |} | {|
4
- attributes: true
5
- |} | {|
6
- characterData: true
7
- |};
8
- type TypeMutationObserverInit = {
9
- ...TypeMutationObserverInitRequired,
10
- subtree?: boolean,
11
- attributeOldValue?: boolean,
12
- characterDataOldValue?: boolean,
13
- attributeFilter?: Array<string>,
14
- ...
15
- };
16
- type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
17
- declare var defaultCallback: TypeMutationObserverCallback;
18
- declare export function useMutationObserver(targetNode: ?Node, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): void | any;
19
- declare export function useMutationObserverOnce(targetNode: ?Node, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): void | any;
@@ -1,10 +0,0 @@
1
- // @flow
2
-
3
- type TypeSingleSelectProps<T: string> = {|
4
- initialValue?: T | "",
5
- onChange?: (value: string | T) => any,
6
- |};
7
- declare export var useSelect: <T: string>(props?: TypeSingleSelectProps<T>) => {|
8
- onChange: (newValue: string) => void,
9
- value: T | string,
10
- |};
@@ -1,21 +0,0 @@
1
- // @flow
2
-
3
- import { useState, useCallback } from "react";
4
- type ReturnType<F> = $PropertyType<$ObjMap<{
5
- x: F,
6
- ...
7
- }, <R>(f: (...any) => R) => R>, "x">;
8
- const useTextContentClone = (initial: string) => {
9
- const [textContent, setTextContent] = useState(initial);
10
- const ref = useCallback((node: Node) => {
11
- if (node !== null) {
12
- setTextContent(node.textContent);
13
- }
14
- }, []);
15
- ref.current = textContent;
16
- return ref;
17
- };
18
-
19
- // Couldn't find a way to achieve this with flow type syntax - open to suggestions
20
- // Tried https://github.com/facebook/flow/issues/2840#issuecomment-452934068 but it didn't work
21
- declare export function useTextContent(initial: string): ReturnType<typeof useTextContentClone>;
@@ -1,3 +0,0 @@
1
- // @flow
2
-
3
- declare export function useWhyDidYouUpdate(name: string, props: any): void;
@@ -1,71 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _useSelect = require("./useSelect/useSelect");
7
- Object.keys(_useSelect).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _useSelect[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function get() {
13
- return _useSelect[key];
14
- }
15
- });
16
- });
17
- var _useMultiselect = require("./useMultiselect/useMultiselect");
18
- Object.keys(_useMultiselect).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _useMultiselect[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function get() {
24
- return _useMultiselect[key];
25
- }
26
- });
27
- });
28
- var _useMutationObserver = require("./useMutationObserver/useMutationObserver");
29
- Object.keys(_useMutationObserver).forEach(function (key) {
30
- if (key === "default" || key === "__esModule") return;
31
- if (key in exports && exports[key] === _useMutationObserver[key]) return;
32
- Object.defineProperty(exports, key, {
33
- enumerable: true,
34
- get: function get() {
35
- return _useMutationObserver[key];
36
- }
37
- });
38
- });
39
- var _useTextContent = require("./useTextContent/useTextContent");
40
- Object.keys(_useTextContent).forEach(function (key) {
41
- if (key === "default" || key === "__esModule") return;
42
- if (key in exports && exports[key] === _useTextContent[key]) return;
43
- Object.defineProperty(exports, key, {
44
- enumerable: true,
45
- get: function get() {
46
- return _useTextContent[key];
47
- }
48
- });
49
- });
50
- var _useWhyDidYouUpdate = require("./useWhyDidYouUpdate/useWhyDidYouUpdate");
51
- Object.keys(_useWhyDidYouUpdate).forEach(function (key) {
52
- if (key === "default" || key === "__esModule") return;
53
- if (key in exports && exports[key] === _useWhyDidYouUpdate[key]) return;
54
- Object.defineProperty(exports, key, {
55
- enumerable: true,
56
- get: function get() {
57
- return _useWhyDidYouUpdate[key];
58
- }
59
- });
60
- });
61
- var _useInteractiveColor = require("./useInteractiveColor/useInteractiveColor");
62
- Object.keys(_useInteractiveColor).forEach(function (key) {
63
- if (key === "default" || key === "__esModule") return;
64
- if (key in exports && exports[key] === _useInteractiveColor[key]) return;
65
- Object.defineProperty(exports, key, {
66
- enumerable: true,
67
- get: function get() {
68
- return _useInteractiveColor[key];
69
- }
70
- });
71
- });
package/commonjs/index.js DELETED
@@ -1,82 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _useMeasure = require("./useMeasure/useMeasure");
7
- Object.keys(_useMeasure).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _useMeasure[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function get() {
13
- return _useMeasure[key];
14
- }
15
- });
16
- });
17
- var _useSelect = require("./useSelect/useSelect");
18
- Object.keys(_useSelect).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _useSelect[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function get() {
24
- return _useSelect[key];
25
- }
26
- });
27
- });
28
- var _useMultiselect = require("./useMultiselect/useMultiselect");
29
- Object.keys(_useMultiselect).forEach(function (key) {
30
- if (key === "default" || key === "__esModule") return;
31
- if (key in exports && exports[key] === _useMultiselect[key]) return;
32
- Object.defineProperty(exports, key, {
33
- enumerable: true,
34
- get: function get() {
35
- return _useMultiselect[key];
36
- }
37
- });
38
- });
39
- var _useMutationObserver = require("./useMutationObserver/useMutationObserver");
40
- Object.keys(_useMutationObserver).forEach(function (key) {
41
- if (key === "default" || key === "__esModule") return;
42
- if (key in exports && exports[key] === _useMutationObserver[key]) return;
43
- Object.defineProperty(exports, key, {
44
- enumerable: true,
45
- get: function get() {
46
- return _useMutationObserver[key];
47
- }
48
- });
49
- });
50
- var _useTextContent = require("./useTextContent/useTextContent");
51
- Object.keys(_useTextContent).forEach(function (key) {
52
- if (key === "default" || key === "__esModule") return;
53
- if (key in exports && exports[key] === _useTextContent[key]) return;
54
- Object.defineProperty(exports, key, {
55
- enumerable: true,
56
- get: function get() {
57
- return _useTextContent[key];
58
- }
59
- });
60
- });
61
- var _useWhyDidYouUpdate = require("./useWhyDidYouUpdate/useWhyDidYouUpdate");
62
- Object.keys(_useWhyDidYouUpdate).forEach(function (key) {
63
- if (key === "default" || key === "__esModule") return;
64
- if (key in exports && exports[key] === _useWhyDidYouUpdate[key]) return;
65
- Object.defineProperty(exports, key, {
66
- enumerable: true,
67
- get: function get() {
68
- return _useWhyDidYouUpdate[key];
69
- }
70
- });
71
- });
72
- var _useInteractiveColor = require("./useInteractiveColor/useInteractiveColor");
73
- Object.keys(_useInteractiveColor).forEach(function (key) {
74
- if (key === "default" || key === "__esModule") return;
75
- if (key in exports && exports[key] === _useInteractiveColor[key]) return;
76
- Object.defineProperty(exports, key, {
77
- enumerable: true,
78
- get: function get() {
79
- return _useInteractiveColor[key];
80
- }
81
- });
82
- });
@@ -1,3 +0,0 @@
1
- // @flow
2
- export * from '../__flow__';
3
-
@@ -1 +0,0 @@
1
- "use strict";
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useInteractiveColor = void 0;
7
- var _polished = require("polished");
8
- var _styledComponents = require("styled-components");
9
- /**
10
- * The useInteractiveColor hook has context of theme mode (light or dark)
11
- * and can be used to lighten or darken a color dynamically
12
- *
13
- * note: colors are limited to our theme colors
14
- */
15
- var useInteractiveColor = exports.useInteractiveColor = function useInteractiveColor(themeColor) {
16
- // Throw error if used outside of a ThemeProvider (styled-components)
17
- if (!(0, _styledComponents.useTheme)()) {
18
- throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
19
- }
20
-
21
- // Get the current theme mode ie. 'light' or 'dark'
22
- var theme = (0, _styledComponents.useTheme)();
23
- var themeMode = theme.mode;
24
-
25
- // If the theme mode is dark, return a lightened version of the themeValue
26
- if (themeMode === "dark") {
27
- return (0, _polished.lighten)(0.2, themeColor);
28
- } else {
29
- // If the theme mode is light, return a darkened version of the themeValue
30
- return (0, _polished.darken)(0.2, themeColor);
31
- }
32
- };
@@ -1,65 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useMeasure = useMeasure;
7
- var _react = require("react");
8
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
12
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
13
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
- var initialBounds = Object.freeze({
15
- x: 0,
16
- y: 0,
17
- width: 0,
18
- height: 0,
19
- top: 0,
20
- right: 0,
21
- bottom: 0,
22
- left: 0
23
- });
24
- function useMeasure(ref) {
25
- var _useState = (0, _react.useState)(initialBounds),
26
- _useState2 = _slicedToArray(_useState, 2),
27
- bounds = _useState2[0],
28
- setContentRect = _useState2[1];
29
- (0, _react.useLayoutEffect)(function () {
30
- var element = ref.current;
31
- if (!element ||
32
- // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined
33
- !("ResizeObserver" in window)) {
34
- return;
35
- }
36
- var resizeObserver = new ResizeObserver(function (_ref) {
37
- var _ref2 = _slicedToArray(_ref, 1),
38
- entry = _ref2[0];
39
- var _entry$contentRect = entry.contentRect,
40
- x = _entry$contentRect.x,
41
- y = _entry$contentRect.y,
42
- width = _entry$contentRect.width,
43
- height = _entry$contentRect.height,
44
- top = _entry$contentRect.top,
45
- right = _entry$contentRect.right,
46
- bottom = _entry$contentRect.bottom,
47
- left = _entry$contentRect.left;
48
- setContentRect({
49
- x: x,
50
- y: y,
51
- width: width,
52
- height: height,
53
- top: top,
54
- right: right,
55
- bottom: bottom,
56
- left: left
57
- });
58
- });
59
- resizeObserver.observe(ref.current);
60
- return function () {
61
- resizeObserver.disconnect();
62
- };
63
- }, [ref]);
64
- return bounds;
65
- }
@@ -1 +0,0 @@
1
- "use strict";
@@ -1,77 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useMultiselect = void 0;
7
- var _react = require("react");
8
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
12
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
13
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
- var valueReducer = function valueReducer(state, action) {
15
- var newState = new Set(state);
16
- switch (action.type) {
17
- case "reset":
18
- {
19
- return new Set();
20
- }
21
- case "toggle_item":
22
- default:
23
- {
24
- if (action.value) {
25
- if (newState.has(action.value)) {
26
- newState.delete(action.value);
27
- } else {
28
- newState.add(action.value);
29
- }
30
- }
31
- return newState;
32
- }
33
- }
34
- };
35
- var useMultiselect = exports.useMultiselect = function useMultiselect() {
36
- var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
37
- initialValue: [],
38
- // eslint-disable-next-line @typescript-eslint/no-empty-function
39
- onChange: function onChange() {}
40
- },
41
- _ref$initialValue = _ref.initialValue,
42
- initialValue = _ref$initialValue === void 0 ? [] : _ref$initialValue,
43
- _ref$onChange = _ref.onChange,
44
- userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
45
- var _useReducer = (0, _react.useReducer)(valueReducer, new Set(initialValue)),
46
- _useReducer2 = _slicedToArray(_useReducer, 2),
47
- value = _useReducer2[0],
48
- dispatch = _useReducer2[1];
49
- var getArrayValue = function getArrayValue(value) {
50
- return Array.from(value);
51
- };
52
- var onChange = (0, _react.useCallback)(function (newValue) {
53
- dispatch({
54
- type: "toggle_item",
55
- value: newValue
56
- });
57
- }, [dispatch]);
58
- var isFirstRun = (0, _react.useRef)(true);
59
- (0, _react.useEffect)(function () {
60
- if (isFirstRun.current) {
61
- isFirstRun.current = false;
62
- return;
63
- }
64
- userOnChange(getArrayValue(value));
65
- // eslint-disable-next-line react-hooks/exhaustive-deps
66
- }, [userOnChange, value]);
67
- var onClear = (0, _react.useCallback)(function () {
68
- dispatch({
69
- type: "reset"
70
- });
71
- }, [dispatch]);
72
- return {
73
- value: getArrayValue(value),
74
- onChange: onChange,
75
- onClear: onClear
76
- };
77
- };
@@ -1 +0,0 @@
1
- "use strict";