@sproutsocial/seeds-react-hooks 3.0.6 → 3.1.0

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 (5) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +2 -3
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var react=require('react'),seedsReactUtilities=require('@sproutsocial/seeds-react-utilities'),polished=require('polished'),styledComponents=require('styled-components');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])=>{if(!o)return;let{x:u,y:a,width:i,height:f,top:m,right:b,bottom:d,left:y}=o.contentRect;e({x:u,y:a,width:i,height:f,top:m,right:b,bottom:d,left:y});});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(true);react.useEffect(()=>{if(u.current){u.current=false;return}t(n(e));},[t,e]);let a=react.useCallback(()=>{s({type:"reset"});},[s]);return {value:n(e),onChange:o,onClear:a}};var j=r=>r;function k(r,t,e=j){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(true),u=k(s?r:null,t,e);return u!==void 0&&s&&n(false),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)};exports.useInteractiveColor=oe;exports.useMeasure=q;exports.useMultiselect=K;exports.useMutationObserver=k;exports.useMutationObserverOnce=H;exports.useSelect=U;exports.useTextContent=X;exports.useWhyDidYouUpdate=ee;//# sourceMappingURL=index.js.map
1
+ 'use strict';var react=require('react'),seedsReactUtilities=require('@sproutsocial/seeds-react-utilities'),styledComponents=require('styled-components');var v=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function A(r){let[t,e]=react.useState(v);return react.useLayoutEffect(()=>{if(!r.current||!("ResizeObserver"in window))return;let n=new ResizeObserver(([o])=>{if(!o)return;let{x:i,y:a,width:u,height:f,top:m,right:b,bottom:d,left:y}=o.contentRect;e({x:i,y:a,width:u,height:f,top:m,right:b,bottom:d,left:y});});return n.observe(r.current),()=>{n.disconnect();}},[r]),t}var F=({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}},_=({initialValue:r=[],onChange:t=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,s]=react.useReducer(R,new Set(r)),n=u=>Array.from(u),o=react.useCallback(u=>{s({type:"toggle_item",value:u});},[s]),i=react.useRef(true);react.useEffect(()=>{if(i.current){i.current=false;return}t(n(e));},[t,e]);let a=react.useCallback(()=>{s({type:"reset"});},[s]);return {value:n(e),onChange:o,onClear:a}};var j=r=>r;function k(r,t,e=j){if(!seedsReactUtilities.canUseDOM())return;let[s,n]=react.useState(void 0),o=react.useMemo(()=>new MutationObserver((i,a)=>{let u=e(i,a);n(u);}),[e]);return react.useEffect(()=>{if(r)return o.observe(r,t),()=>{o.disconnect();}},[r,t,o]),s}function W(r,t,e){let[s,n]=react.useState(true),i=k(s?r:null,t,e);return i!==void 0&&s&&n(false),i}function H(r){let[t,e]=react.useState(r),s=react.useCallback(n=>{n&&n.textContent!==null&&e(n.textContent);},[]);return s.current=t,s}function X(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 te=r=>{if(!styledComponents.useTheme())throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");return styledComponents.useTheme().mode==="dark"?`color-mix(in srgb, ${r}, white 20%)`:`color-mix(in srgb, ${r}, black 20%)`};exports.useInteractiveColor=te;exports.useMeasure=A;exports.useMultiselect=_;exports.useMutationObserver=k;exports.useMutationObserverOnce=W;exports.useSelect=F;exports.useTextContent=H;exports.useWhyDidYouUpdate=X;//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/useMeasure/useMeasure.ts","../src/useSelect/useSelect.ts","../src/useMultiselect/useMultiselect.ts","../src/useMutationObserver/useMutationObserver.ts","../src/useTextContent/useTextContent.ts","../src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../src/useInteractiveColor/useInteractiveColor.ts"],"names":["initialBounds","useMeasure","ref","bounds","setContentRect","useState","useLayoutEffect","resizeObserver","entry","x","y","width","height","top","right","bottom","left","useSelect","initialValue","userOnChange","value","setValue","onChange","useCallback","newValue","valueReducer","state","action","newState","useMultiselect","dispatch","useReducer","getArrayValue","isFirstRun","useRef","useEffect","onClear","defaultCallback","mutationList","useMutationObserver","targetNode","config","callback","canUseDOM","observer","useMemo","result","useMutationObserverOnce","isObserving","setObserving","useTextContent","initial","textContent","setTextContent","node","useWhyDidYouUpdate","name","props","previousProps","allKeys","changesObj","key","useInteractiveColor","themeColor","useTheme","lighten","darken"],"mappings":"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","file":"index.js","sourcesContent":["import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n x: number;\n y: number;\n width: number;\n height: number;\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\nconst initialBounds = Object.freeze({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n const [bounds, setContentRect] =\n useState<Readonly<DOMRectObject>>(initialBounds);\n\n useLayoutEffect(() => {\n const element = ref.current;\n\n if (\n !element ||\n // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n !(\"ResizeObserver\" in window)\n ) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(([entry]) => {\n if (!entry) return;\n const { x, y, width, height, top, right, bottom, left } =\n entry.contentRect;\n setContentRect({\n x,\n y,\n width,\n height,\n top,\n right,\n bottom,\n left,\n });\n });\n resizeObserver.observe(ref.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [ref]);\n\n return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n initialValue?: T | \"\";\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n {\n initialValue = \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeSingleSelectProps<T> = {\n initialValue: \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, setValue] = useState<string | T>(initialValue);\n\n const onChange = useCallback(\n (newValue: string) => {\n if (newValue !== value) {\n setValue(newValue);\n userOnChange(newValue);\n }\n },\n [userOnChange, value]\n );\n\n return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n initialValue?: T[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n state: Set<string>,\n action: { type: string; value?: string }\n): Set<string> => {\n const newState = new Set(state);\n switch (action.type) {\n case \"reset\": {\n return new Set();\n }\n case \"toggle_item\":\n default: {\n if (action.value) {\n if (newState.has(action.value)) {\n newState.delete(action.value);\n } else {\n newState.add(action.value);\n }\n }\n return newState;\n }\n }\n};\n\nexport const useMultiselect = <T extends string>(\n {\n initialValue = [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeMultiSelectProps<T> = {\n initialValue: [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n const getArrayValue = (value: Set<string | T>) =>\n Array.from<string | T>(value);\n\n const onChange = useCallback(\n (newValue: string) => {\n dispatch({ type: \"toggle_item\", value: newValue });\n },\n [dispatch]\n );\n\n const isFirstRun = useRef(true);\n\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n userOnChange(getArrayValue(value));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [userOnChange, value]);\n\n const onClear = useCallback(() => {\n dispatch({ type: \"reset\" });\n }, [dispatch]);\n\n return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n | {\n childList: true;\n }\n | {\n attributes: true;\n }\n | {\n characterData: true;\n };\n\ntype TypeMutationObserverInit = {\n subtree?: boolean;\n attributeOldValue?: boolean;\n characterDataOldValue?: boolean;\n attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n mutationList?: MutationRecord[],\n observer?: MutationObserver\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n mutationList;\n\nexport function useMutationObserver(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback = defaultCallback\n) {\n if (!canUseDOM()) {\n return;\n }\n /* eslint-disable-next-line */\n const [value, setValue] = useState(undefined);\n /* eslint-disable-next-line */\n const observer = useMemo(\n () =>\n new MutationObserver((mutationList, observer) => {\n const result = callback(mutationList, observer);\n setValue(result);\n }),\n [callback]\n );\n /* eslint-disable-next-line */\n useEffect(() => {\n if (targetNode) {\n observer.observe(targetNode, config);\n return () => {\n observer.disconnect();\n };\n }\n }, [targetNode, config, observer]);\n\n return value;\n}\n\nexport function useMutationObserverOnce(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback\n) {\n const [isObserving, setObserving] = useState(true);\n const node = isObserving ? targetNode : null;\n const value = useMutationObserver(node, config, callback);\n if (value !== undefined && isObserving) {\n setObserving(false);\n }\n return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n const [textContent, setTextContent] = useState(initial);\n\n const ref: textContentRef = useCallback((node: Node) => {\n if (node && node.textContent !== null) {\n setTextContent(node.textContent);\n }\n }, []);\n\n ref.current = textContent;\n return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n name: string,\n props: { [key: string]: any }\n) {\n // Get a mutable ref object where we can store props ...\n // ... for comparison next time this hook runs.\n const previousProps = useRef<typeof props>({});\n\n useEffect(() => {\n if (previousProps.current) {\n // Get all keys from previous and current props\n const allKeys = Object.keys({ ...previousProps.current, ...props });\n // Use this object to keep track of changed props\n const changesObj: typeof props = {};\n // Iterate through keys\n allKeys.forEach((key) => {\n // If previous is different from current\n\n if (previousProps.current[key] !== props[key]) {\n // Add to changesObj\n\n changesObj[key] = {\n from: previousProps.current[key],\n\n to: props[key],\n };\n }\n });\n\n // If changesObj not empty then output to console\n if (Object.keys(changesObj).length) {\n // eslint-disable-next-line no-console\n console.log(\"[why-did-you-update]\", name, changesObj);\n }\n }\n\n // Finally update previousProps with current props for next hook call\n previousProps.current = props;\n });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n // Throw error if used outside of a ThemeProvider (styled-components)\n if (!useTheme()) {\n throw new Error(\n \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n );\n }\n\n // Get the current theme mode ie. 'light' or 'dark'\n const theme: TypeTheme = useTheme() as TypeTheme;\n const themeMode = theme.mode;\n\n // If the theme mode is dark, return a lightened version of the themeValue\n if (themeMode === \"dark\") {\n return lighten(0.2, themeColor);\n } else {\n // If the theme mode is light, return a darkened version of the themeValue\n return darken(0.2, themeColor);\n }\n};\n\nexport { useInteractiveColor };\n"]}
1
+ {"version":3,"sources":["../src/useMeasure/useMeasure.ts","../src/useSelect/useSelect.ts","../src/useMultiselect/useMultiselect.ts","../src/useMutationObserver/useMutationObserver.ts","../src/useTextContent/useTextContent.ts","../src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../src/useInteractiveColor/useInteractiveColor.ts"],"names":["initialBounds","useMeasure","ref","bounds","setContentRect","useState","useLayoutEffect","resizeObserver","entry","x","y","width","height","top","right","bottom","left","useSelect","initialValue","userOnChange","value","setValue","onChange","useCallback","newValue","valueReducer","state","action","newState","useMultiselect","dispatch","useReducer","getArrayValue","isFirstRun","useRef","useEffect","onClear","defaultCallback","mutationList","useMutationObserver","targetNode","config","callback","canUseDOM","observer","useMemo","result","useMutationObserverOnce","isObserving","setObserving","useTextContent","initial","textContent","setTextContent","node","useWhyDidYouUpdate","name","props","previousProps","allKeys","changesObj","key","useInteractiveColor","themeColor","useTheme"],"mappings":"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","file":"index.js","sourcesContent":["import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n x: number;\n y: number;\n width: number;\n height: number;\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\nconst initialBounds = Object.freeze({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n const [bounds, setContentRect] =\n useState<Readonly<DOMRectObject>>(initialBounds);\n\n useLayoutEffect(() => {\n const element = ref.current;\n\n if (\n !element ||\n // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n !(\"ResizeObserver\" in window)\n ) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(([entry]) => {\n if (!entry) return;\n const { x, y, width, height, top, right, bottom, left } =\n entry.contentRect;\n setContentRect({\n x,\n y,\n width,\n height,\n top,\n right,\n bottom,\n left,\n });\n });\n resizeObserver.observe(ref.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [ref]);\n\n return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n initialValue?: T | \"\";\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n {\n initialValue = \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeSingleSelectProps<T> = {\n initialValue: \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, setValue] = useState<string | T>(initialValue);\n\n const onChange = useCallback(\n (newValue: string) => {\n if (newValue !== value) {\n setValue(newValue);\n userOnChange(newValue);\n }\n },\n [userOnChange, value]\n );\n\n return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n initialValue?: T[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n state: Set<string>,\n action: { type: string; value?: string }\n): Set<string> => {\n const newState = new Set(state);\n switch (action.type) {\n case \"reset\": {\n return new Set();\n }\n case \"toggle_item\":\n default: {\n if (action.value) {\n if (newState.has(action.value)) {\n newState.delete(action.value);\n } else {\n newState.add(action.value);\n }\n }\n return newState;\n }\n }\n};\n\nexport const useMultiselect = <T extends string>(\n {\n initialValue = [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeMultiSelectProps<T> = {\n initialValue: [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n const getArrayValue = (value: Set<string | T>) =>\n Array.from<string | T>(value);\n\n const onChange = useCallback(\n (newValue: string) => {\n dispatch({ type: \"toggle_item\", value: newValue });\n },\n [dispatch]\n );\n\n const isFirstRun = useRef(true);\n\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n userOnChange(getArrayValue(value));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [userOnChange, value]);\n\n const onClear = useCallback(() => {\n dispatch({ type: \"reset\" });\n }, [dispatch]);\n\n return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n | {\n childList: true;\n }\n | {\n attributes: true;\n }\n | {\n characterData: true;\n };\n\ntype TypeMutationObserverInit = {\n subtree?: boolean;\n attributeOldValue?: boolean;\n characterDataOldValue?: boolean;\n attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n mutationList?: MutationRecord[],\n observer?: MutationObserver\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n mutationList;\n\nexport function useMutationObserver(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback = defaultCallback\n) {\n if (!canUseDOM()) {\n return;\n }\n /* eslint-disable-next-line */\n const [value, setValue] = useState(undefined);\n /* eslint-disable-next-line */\n const observer = useMemo(\n () =>\n new MutationObserver((mutationList, observer) => {\n const result = callback(mutationList, observer);\n setValue(result);\n }),\n [callback]\n );\n /* eslint-disable-next-line */\n useEffect(() => {\n if (targetNode) {\n observer.observe(targetNode, config);\n return () => {\n observer.disconnect();\n };\n }\n }, [targetNode, config, observer]);\n\n return value;\n}\n\nexport function useMutationObserverOnce(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback\n) {\n const [isObserving, setObserving] = useState(true);\n const node = isObserving ? targetNode : null;\n const value = useMutationObserver(node, config, callback);\n if (value !== undefined && isObserving) {\n setObserving(false);\n }\n return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n const [textContent, setTextContent] = useState(initial);\n\n const ref: textContentRef = useCallback((node: Node) => {\n if (node && node.textContent !== null) {\n setTextContent(node.textContent);\n }\n }, []);\n\n ref.current = textContent;\n return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n name: string,\n props: { [key: string]: any }\n) {\n // Get a mutable ref object where we can store props ...\n // ... for comparison next time this hook runs.\n const previousProps = useRef<typeof props>({});\n\n useEffect(() => {\n if (previousProps.current) {\n // Get all keys from previous and current props\n const allKeys = Object.keys({ ...previousProps.current, ...props });\n // Use this object to keep track of changed props\n const changesObj: typeof props = {};\n // Iterate through keys\n allKeys.forEach((key) => {\n // If previous is different from current\n\n if (previousProps.current[key] !== props[key]) {\n // Add to changesObj\n\n changesObj[key] = {\n from: previousProps.current[key],\n\n to: props[key],\n };\n }\n });\n\n // If changesObj not empty then output to console\n if (Object.keys(changesObj).length) {\n // eslint-disable-next-line no-console\n console.log(\"[why-did-you-update]\", name, changesObj);\n }\n }\n\n // Finally update previousProps with current props for next hook call\n previousProps.current = props;\n });\n}\n","import { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n // Throw error if used outside of a ThemeProvider (styled-components)\n if (!useTheme()) {\n throw new Error(\n \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n );\n }\n\n // Get the current theme mode ie. 'light' or 'dark'\n const theme: TypeTheme = useTheme() as TypeTheme;\n const themeMode = theme.mode;\n\n // If the theme mode is dark, return a lightened version of the themeValue\n if (themeMode === \"dark\") {\n return `color-mix(in srgb, ${themeColor}, white 20%)`;\n } else {\n // If the theme mode is light, return a darkened version of the themeValue\n return `color-mix(in srgb, ${themeColor}, black 20%)`;\n }\n};\n\nexport { useInteractiveColor };\n"]}
package/dist/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import {useState,useLayoutEffect,useCallback,useReducer,useRef,useEffect,useMemo}from'react';import {canUseDOM}from'@sproutsocial/seeds-react-utilities';import {lighten,darken}from'polished';import {useTheme}from'styled-components';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])=>{if(!o)return;let{x:u,y:a,width:i,height:f,top:m,right:b,bottom:d,left:y}=o.contentRect;e({x:u,y:a,width:i,height:f,top:m,right:b,bottom:d,left:y});});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(true);useEffect(()=>{if(u.current){u.current=false;return}t(n(e));},[t,e]);let a=useCallback(()=>{s({type:"reset"});},[s]);return {value:n(e),onChange:o,onClear:a}};var j=r=>r;function k(r,t,e=j){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(true),u=k(s?r:null,t,e);return u!==void 0&&s&&n(false),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)};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};//# sourceMappingURL=index.mjs.map
1
+ import {useState,useLayoutEffect,useCallback,useReducer,useRef,useEffect,useMemo}from'react';import {canUseDOM}from'@sproutsocial/seeds-react-utilities';import {useTheme}from'styled-components';var v=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function A(r){let[t,e]=useState(v);return useLayoutEffect(()=>{if(!r.current||!("ResizeObserver"in window))return;let n=new ResizeObserver(([o])=>{if(!o)return;let{x:i,y:a,width:u,height:f,top:m,right:b,bottom:d,left:y}=o.contentRect;e({x:i,y:a,width:u,height:f,top:m,right:b,bottom:d,left:y});});return n.observe(r.current),()=>{n.disconnect();}},[r]),t}var F=({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}},_=({initialValue:r=[],onChange:t=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,s]=useReducer(R,new Set(r)),n=u=>Array.from(u),o=useCallback(u=>{s({type:"toggle_item",value:u});},[s]),i=useRef(true);useEffect(()=>{if(i.current){i.current=false;return}t(n(e));},[t,e]);let a=useCallback(()=>{s({type:"reset"});},[s]);return {value:n(e),onChange:o,onClear:a}};var j=r=>r;function k(r,t,e=j){if(!canUseDOM())return;let[s,n]=useState(void 0),o=useMemo(()=>new MutationObserver((i,a)=>{let u=e(i,a);n(u);}),[e]);return useEffect(()=>{if(r)return o.observe(r,t),()=>{o.disconnect();}},[r,t,o]),s}function W(r,t,e){let[s,n]=useState(true),i=k(s?r:null,t,e);return i!==void 0&&s&&n(false),i}function H(r){let[t,e]=useState(r),s=useCallback(n=>{n&&n.textContent!==null&&e(n.textContent);},[]);return s.current=t,s}function X(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 te=r=>{if(!useTheme())throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");return useTheme().mode==="dark"?`color-mix(in srgb, ${r}, white 20%)`:`color-mix(in srgb, ${r}, black 20%)`};export{te as useInteractiveColor,A as useMeasure,_ as useMultiselect,k as useMutationObserver,W as useMutationObserverOnce,F as useSelect,H as useTextContent,X as useWhyDidYouUpdate};//# sourceMappingURL=index.mjs.map
2
2
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/useMeasure/useMeasure.ts","../src/useSelect/useSelect.ts","../src/useMultiselect/useMultiselect.ts","../src/useMutationObserver/useMutationObserver.ts","../src/useTextContent/useTextContent.ts","../src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../src/useInteractiveColor/useInteractiveColor.ts"],"names":["initialBounds","useMeasure","ref","bounds","setContentRect","useState","useLayoutEffect","resizeObserver","entry","x","y","width","height","top","right","bottom","left","useSelect","initialValue","userOnChange","value","setValue","onChange","useCallback","newValue","valueReducer","state","action","newState","useMultiselect","dispatch","useReducer","getArrayValue","isFirstRun","useRef","useEffect","onClear","defaultCallback","mutationList","useMutationObserver","targetNode","config","callback","canUseDOM","observer","useMemo","result","useMutationObserverOnce","isObserving","setObserving","useTextContent","initial","textContent","setTextContent","node","useWhyDidYouUpdate","name","props","previousProps","allKeys","changesObj","key","useInteractiveColor","themeColor","useTheme","lighten","darken"],"mappings":"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","file":"index.mjs","sourcesContent":["import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n x: number;\n y: number;\n width: number;\n height: number;\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\nconst initialBounds = Object.freeze({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n const [bounds, setContentRect] =\n useState<Readonly<DOMRectObject>>(initialBounds);\n\n useLayoutEffect(() => {\n const element = ref.current;\n\n if (\n !element ||\n // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n !(\"ResizeObserver\" in window)\n ) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(([entry]) => {\n if (!entry) return;\n const { x, y, width, height, top, right, bottom, left } =\n entry.contentRect;\n setContentRect({\n x,\n y,\n width,\n height,\n top,\n right,\n bottom,\n left,\n });\n });\n resizeObserver.observe(ref.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [ref]);\n\n return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n initialValue?: T | \"\";\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n {\n initialValue = \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeSingleSelectProps<T> = {\n initialValue: \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, setValue] = useState<string | T>(initialValue);\n\n const onChange = useCallback(\n (newValue: string) => {\n if (newValue !== value) {\n setValue(newValue);\n userOnChange(newValue);\n }\n },\n [userOnChange, value]\n );\n\n return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n initialValue?: T[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n state: Set<string>,\n action: { type: string; value?: string }\n): Set<string> => {\n const newState = new Set(state);\n switch (action.type) {\n case \"reset\": {\n return new Set();\n }\n case \"toggle_item\":\n default: {\n if (action.value) {\n if (newState.has(action.value)) {\n newState.delete(action.value);\n } else {\n newState.add(action.value);\n }\n }\n return newState;\n }\n }\n};\n\nexport const useMultiselect = <T extends string>(\n {\n initialValue = [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeMultiSelectProps<T> = {\n initialValue: [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n const getArrayValue = (value: Set<string | T>) =>\n Array.from<string | T>(value);\n\n const onChange = useCallback(\n (newValue: string) => {\n dispatch({ type: \"toggle_item\", value: newValue });\n },\n [dispatch]\n );\n\n const isFirstRun = useRef(true);\n\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n userOnChange(getArrayValue(value));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [userOnChange, value]);\n\n const onClear = useCallback(() => {\n dispatch({ type: \"reset\" });\n }, [dispatch]);\n\n return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n | {\n childList: true;\n }\n | {\n attributes: true;\n }\n | {\n characterData: true;\n };\n\ntype TypeMutationObserverInit = {\n subtree?: boolean;\n attributeOldValue?: boolean;\n characterDataOldValue?: boolean;\n attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n mutationList?: MutationRecord[],\n observer?: MutationObserver\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n mutationList;\n\nexport function useMutationObserver(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback = defaultCallback\n) {\n if (!canUseDOM()) {\n return;\n }\n /* eslint-disable-next-line */\n const [value, setValue] = useState(undefined);\n /* eslint-disable-next-line */\n const observer = useMemo(\n () =>\n new MutationObserver((mutationList, observer) => {\n const result = callback(mutationList, observer);\n setValue(result);\n }),\n [callback]\n );\n /* eslint-disable-next-line */\n useEffect(() => {\n if (targetNode) {\n observer.observe(targetNode, config);\n return () => {\n observer.disconnect();\n };\n }\n }, [targetNode, config, observer]);\n\n return value;\n}\n\nexport function useMutationObserverOnce(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback\n) {\n const [isObserving, setObserving] = useState(true);\n const node = isObserving ? targetNode : null;\n const value = useMutationObserver(node, config, callback);\n if (value !== undefined && isObserving) {\n setObserving(false);\n }\n return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n const [textContent, setTextContent] = useState(initial);\n\n const ref: textContentRef = useCallback((node: Node) => {\n if (node && node.textContent !== null) {\n setTextContent(node.textContent);\n }\n }, []);\n\n ref.current = textContent;\n return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n name: string,\n props: { [key: string]: any }\n) {\n // Get a mutable ref object where we can store props ...\n // ... for comparison next time this hook runs.\n const previousProps = useRef<typeof props>({});\n\n useEffect(() => {\n if (previousProps.current) {\n // Get all keys from previous and current props\n const allKeys = Object.keys({ ...previousProps.current, ...props });\n // Use this object to keep track of changed props\n const changesObj: typeof props = {};\n // Iterate through keys\n allKeys.forEach((key) => {\n // If previous is different from current\n\n if (previousProps.current[key] !== props[key]) {\n // Add to changesObj\n\n changesObj[key] = {\n from: previousProps.current[key],\n\n to: props[key],\n };\n }\n });\n\n // If changesObj not empty then output to console\n if (Object.keys(changesObj).length) {\n // eslint-disable-next-line no-console\n console.log(\"[why-did-you-update]\", name, changesObj);\n }\n }\n\n // Finally update previousProps with current props for next hook call\n previousProps.current = props;\n });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n // Throw error if used outside of a ThemeProvider (styled-components)\n if (!useTheme()) {\n throw new Error(\n \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n );\n }\n\n // Get the current theme mode ie. 'light' or 'dark'\n const theme: TypeTheme = useTheme() as TypeTheme;\n const themeMode = theme.mode;\n\n // If the theme mode is dark, return a lightened version of the themeValue\n if (themeMode === \"dark\") {\n return lighten(0.2, themeColor);\n } else {\n // If the theme mode is light, return a darkened version of the themeValue\n return darken(0.2, themeColor);\n }\n};\n\nexport { useInteractiveColor };\n"]}
1
+ {"version":3,"sources":["../src/useMeasure/useMeasure.ts","../src/useSelect/useSelect.ts","../src/useMultiselect/useMultiselect.ts","../src/useMutationObserver/useMutationObserver.ts","../src/useTextContent/useTextContent.ts","../src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../src/useInteractiveColor/useInteractiveColor.ts"],"names":["initialBounds","useMeasure","ref","bounds","setContentRect","useState","useLayoutEffect","resizeObserver","entry","x","y","width","height","top","right","bottom","left","useSelect","initialValue","userOnChange","value","setValue","onChange","useCallback","newValue","valueReducer","state","action","newState","useMultiselect","dispatch","useReducer","getArrayValue","isFirstRun","useRef","useEffect","onClear","defaultCallback","mutationList","useMutationObserver","targetNode","config","callback","canUseDOM","observer","useMemo","result","useMutationObserverOnce","isObserving","setObserving","useTextContent","initial","textContent","setTextContent","node","useWhyDidYouUpdate","name","props","previousProps","allKeys","changesObj","key","useInteractiveColor","themeColor","useTheme"],"mappings":"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","file":"index.mjs","sourcesContent":["import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n x: number;\n y: number;\n width: number;\n height: number;\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\nconst initialBounds = Object.freeze({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n const [bounds, setContentRect] =\n useState<Readonly<DOMRectObject>>(initialBounds);\n\n useLayoutEffect(() => {\n const element = ref.current;\n\n if (\n !element ||\n // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n !(\"ResizeObserver\" in window)\n ) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(([entry]) => {\n if (!entry) return;\n const { x, y, width, height, top, right, bottom, left } =\n entry.contentRect;\n setContentRect({\n x,\n y,\n width,\n height,\n top,\n right,\n bottom,\n left,\n });\n });\n resizeObserver.observe(ref.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [ref]);\n\n return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n initialValue?: T | \"\";\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n {\n initialValue = \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeSingleSelectProps<T> = {\n initialValue: \"\",\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, setValue] = useState<string | T>(initialValue);\n\n const onChange = useCallback(\n (newValue: string) => {\n if (newValue !== value) {\n setValue(newValue);\n userOnChange(newValue);\n }\n },\n [userOnChange, value]\n );\n\n return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n initialValue?: T[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n state: Set<string>,\n action: { type: string; value?: string }\n): Set<string> => {\n const newState = new Set(state);\n switch (action.type) {\n case \"reset\": {\n return new Set();\n }\n case \"toggle_item\":\n default: {\n if (action.value) {\n if (newState.has(action.value)) {\n newState.delete(action.value);\n } else {\n newState.add(action.value);\n }\n }\n return newState;\n }\n }\n};\n\nexport const useMultiselect = <T extends string>(\n {\n initialValue = [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: userOnChange = () => {},\n }: TypeMultiSelectProps<T> = {\n initialValue: [],\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onChange: () => {},\n }\n) => {\n const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n const getArrayValue = (value: Set<string | T>) =>\n Array.from<string | T>(value);\n\n const onChange = useCallback(\n (newValue: string) => {\n dispatch({ type: \"toggle_item\", value: newValue });\n },\n [dispatch]\n );\n\n const isFirstRun = useRef(true);\n\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n userOnChange(getArrayValue(value));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [userOnChange, value]);\n\n const onClear = useCallback(() => {\n dispatch({ type: \"reset\" });\n }, [dispatch]);\n\n return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n | {\n childList: true;\n }\n | {\n attributes: true;\n }\n | {\n characterData: true;\n };\n\ntype TypeMutationObserverInit = {\n subtree?: boolean;\n attributeOldValue?: boolean;\n characterDataOldValue?: boolean;\n attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n mutationList?: MutationRecord[],\n observer?: MutationObserver\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n mutationList;\n\nexport function useMutationObserver(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback = defaultCallback\n) {\n if (!canUseDOM()) {\n return;\n }\n /* eslint-disable-next-line */\n const [value, setValue] = useState(undefined);\n /* eslint-disable-next-line */\n const observer = useMemo(\n () =>\n new MutationObserver((mutationList, observer) => {\n const result = callback(mutationList, observer);\n setValue(result);\n }),\n [callback]\n );\n /* eslint-disable-next-line */\n useEffect(() => {\n if (targetNode) {\n observer.observe(targetNode, config);\n return () => {\n observer.disconnect();\n };\n }\n }, [targetNode, config, observer]);\n\n return value;\n}\n\nexport function useMutationObserverOnce(\n targetNode: Node | null,\n config: TypeMutationObserverInit,\n callback: TypeMutationObserverCallback\n) {\n const [isObserving, setObserving] = useState(true);\n const node = isObserving ? targetNode : null;\n const value = useMutationObserver(node, config, callback);\n if (value !== undefined && isObserving) {\n setObserving(false);\n }\n return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n const [textContent, setTextContent] = useState(initial);\n\n const ref: textContentRef = useCallback((node: Node) => {\n if (node && node.textContent !== null) {\n setTextContent(node.textContent);\n }\n }, []);\n\n ref.current = textContent;\n return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n name: string,\n props: { [key: string]: any }\n) {\n // Get a mutable ref object where we can store props ...\n // ... for comparison next time this hook runs.\n const previousProps = useRef<typeof props>({});\n\n useEffect(() => {\n if (previousProps.current) {\n // Get all keys from previous and current props\n const allKeys = Object.keys({ ...previousProps.current, ...props });\n // Use this object to keep track of changed props\n const changesObj: typeof props = {};\n // Iterate through keys\n allKeys.forEach((key) => {\n // If previous is different from current\n\n if (previousProps.current[key] !== props[key]) {\n // Add to changesObj\n\n changesObj[key] = {\n from: previousProps.current[key],\n\n to: props[key],\n };\n }\n });\n\n // If changesObj not empty then output to console\n if (Object.keys(changesObj).length) {\n // eslint-disable-next-line no-console\n console.log(\"[why-did-you-update]\", name, changesObj);\n }\n }\n\n // Finally update previousProps with current props for next hook call\n previousProps.current = props;\n });\n}\n","import { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n // Throw error if used outside of a ThemeProvider (styled-components)\n if (!useTheme()) {\n throw new Error(\n \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n );\n }\n\n // Get the current theme mode ie. 'light' or 'dark'\n const theme: TypeTheme = useTheme() as TypeTheme;\n const themeMode = theme.mode;\n\n // If the theme mode is dark, return a lightened version of the themeValue\n if (themeMode === \"dark\") {\n return `color-mix(in srgb, ${themeColor}, white 20%)`;\n } else {\n // If the theme mode is light, return a darkened version of the themeValue\n return `color-mix(in srgb, ${themeColor}, black 20%)`;\n }\n};\n\nexport { useInteractiveColor };\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-hooks",
3
- "version": "3.0.6",
3
+ "version": "3.1.0",
4
4
  "description": "Seeds React Hooks",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -19,8 +19,7 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@sproutsocial/seeds-react-utilities": "^4.0.1",
22
- "@sproutsocial/seeds-react-theme": "^3.2.0",
23
- "polished": "^3.4.1"
22
+ "@sproutsocial/seeds-react-theme": "^3.3.0"
24
23
  },
25
24
  "devDependencies": {
26
25
  "@types/styled-components": "^5.1.26",