npm - @sproutsocial/seeds-react-hooks - Versions diffs - 2.0.2 → 2.1.0 - Mend

@sproutsocial/seeds-react-hooks 2.0.2 → 2.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

package/dist/index.js CHANGED Viewed

@@ -15,3 +15,5 @@ exports.useMutationObserverOnce = H;
 exports.useSelect = U;
 exports.useTextContent = X;
 exports.useWhyDidYouUpdate = ee;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +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":["useState","useLayoutEffect","initialBounds","useMeasure","ref","bounds","setContentRect","resizeObserver","entry","x","y","width","height","top","right","bottom","left","useCallback","useSelect","initialValue","userOnChange","value","setValue","onChange","newValue","useEffect","useReducer","useRef","valueReducer","state","action","newState","useMultiselect","dispatch","getArrayValue","isFirstRun","onClear","canUseDOM","useMemo","defaultCallback","mutationList","useMutationObserver","targetNode","config","callback","observer","result","useMutationObserverOnce","isObserving","setObserving","useTextContent","initial","textContent","setTextContent","node","useWhyDidYouUpdate","name","props","previousProps","allKeys","changesObj","key","darken","lighten","useTheme","useInteractiveColor","themeColor"],"mappings":"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","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 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(name: string, props: object) {\n // Get a mutable ref object where we can store props ...\n // ... for comparison next time this hook runs.\n const previousProps = useRef({});\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 = {};\n // Iterate through keys\n allKeys.forEach((key) => {\n // If previous is different from current\n if (previousProps.current[key] !== props[key]) {\n // Add to changesObj\n changesObj[key] = {\n from: previousProps.current[key],\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"]}

package/dist/index.mjs CHANGED Viewed

@@ -6,3 +6,5 @@ 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])=>{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)};
 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=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-hooks",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Seeds React Hooks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -11,7 +11,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup"
+    "build": "tsup --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@sproutsocial/seeds-react-utilities": "^3.0.0",
@@ -21,10 +24,9 @@
   "devDependencies": {
     "@types/styled-components": "^5.1.26",
     "@sproutsocial/eslint-config-seeds": "*",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "styled-components": "^5.2.3",
     "typescript": "^5.1.6",
-    "tsx": "3.13.0",
     "tsup": "^8.0.2"
   },
   "peerDependencies": {