@sproutsocial/seeds-react-hooks 3.2.9 → 3.3.0

package/dist/index.d.mts

@@ -10,7 +10,16 @@ interface DOMRectObject {
     bottom: number;
     left: number;
 }
-declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>): Readonly<DOMRectObject>;
+/**
+ * `synchronous` (default `false`) reads the element's bounds directly in
+ * `useLayoutEffect`, before the browser's first paint, instead of waiting on
+ * `ResizeObserver`'s own callback — which is async even for its first
+ * observation, so a consumer that renders differently for width `0` (the
+ * initial state) than for the real width otherwise paints once at `0` first.
+ * Off by default so every existing consumer of this hook (re-exported
+ * publicly through `@sproutsocial/racine`) keeps today's exact behavior.
+ */
+declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>, synchronous?: boolean): Readonly<DOMRectObject>;
 
 type TypeSingleSelectProps<T extends string> = {
     initialValue?: T | "";

package/dist/index.d.ts

@@ -10,7 +10,16 @@ interface DOMRectObject {
     bottom: number;
     left: number;
 }
-declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>): Readonly<DOMRectObject>;
+/**
+ * `synchronous` (default `false`) reads the element's bounds directly in
+ * `useLayoutEffect`, before the browser's first paint, instead of waiting on
+ * `ResizeObserver`'s own callback — which is async even for its first
+ * observation, so a consumer that renders differently for width `0` (the
+ * initial state) than for the real width otherwise paints once at `0` first.
+ * Off by default so every existing consumer of this hook (re-exported
+ * publicly through `@sproutsocial/racine`) keeps today's exact behavior.
+ */
+declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>, synchronous?: boolean): Readonly<DOMRectObject>;
 
 type TypeSingleSelectProps<T extends string> = {
     initialValue?: T | "";

package/dist/index.js

@@ -1,2 +1,2 @@
-'use strict';var c=require('react'),seedsReactUtilities=require('@sproutsocial/seeds-react-utilities'),styledComponents=require('styled-components');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var c__namespace=/*#__PURE__*/_interopNamespace(c);var T=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function A(t){let[r,e]=c.useState(T);return c.useLayoutEffect(()=>{if(!t.current||!("ResizeObserver"in window))return;let s=new ResizeObserver(([n])=>{if(!n)return;let{x:i,y:a,width:u,height:p,top:d,right:b,bottom:h,left:y}=n.contentRect;e({x:i,y:a,width:u,height:p,top:d,right:b,bottom:h,left:y});});return s.observe(t.current),()=>{s.disconnect();}},[t]),r}var N=({initialValue:t="",onChange:r=()=>{}}={initialValue:"",onChange:()=>{}})=>{let[e,o]=c.useState(t),s=c.useCallback(n=>{n!==e&&(o(n),r(n));},[r,e]);return {value:e,onChange:s}};var R=(t,r)=>{let e=new Set(t);return r.type==="reset"?new Set:(r.value&&(e.has(r.value)?e.delete(r.value):e.add(r.value)),e)},B=({initialValue:t=[],onChange:r=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,o]=c.useReducer(R,new Set(t)),s=u=>Array.from(u),n=c.useCallback(u=>{o({type:"toggle_item",value:u});},[o]),i=c.useRef(true);c.useEffect(()=>{if(i.current){i.current=false;return}r(s(e));},[r,e]);let a=c.useCallback(()=>{o({type:"reset"});},[o]);return {value:s(e),onChange:n,onClear:a}};var j=t=>t;function k(t,r,e=j){if(!seedsReactUtilities.canUseDOM())return;let[o,s]=c.useState(void 0),n=c.useMemo(()=>new MutationObserver((i,a)=>{let u=e(i,a);s(u);}),[e]);return c.useEffect(()=>{if(t)return n.observe(t,r),()=>{n.disconnect();}},[t,r,n]),o}function Y(t,r,e){let[o,s]=c.useState(true),i=k(o?t:null,r,e);return i!==void 0&&o&&s(false),i}function J(t){let[r,e]=c.useState(t),o=c.useCallback(s=>{s&&s.textContent!==null&&e(s.textContent);},[]);return o.current=r,o}function ee(t,r){let e=c.useRef({});c.useEffect(()=>{if(e.current){let o=Object.keys({...e.current,...r}),s={};o.forEach(n=>{e.current[n]!==r[n]&&(s[n]={from:e.current[n],to:r[n]});}),Object.keys(s).length&&console.log("[why-did-you-update]",t,s);}e.current=r;});}var ne=t=>{if(!styledComponents.useTheme())throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");return styledComponents.useTheme().mode==="dark"?`color-mix(in srgb, ${t}, white 20%)`:`color-mix(in srgb, ${t}, black 20%)`};function ie(t){let e=styledComponents.useTheme()?.breakpoints?.sm??"640px",o=typeof t=="number"?`${t}px`:t??e,[s,n]=c__namespace.useState(()=>typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia(`(max-width: ${o})`).matches);return c__namespace.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia(`(max-width: ${o})`);n(i.matches);let a=u=>n(u.matches);return i.addEventListener?.("change",a),()=>i.removeEventListener?.("change",a)},[o]),s}exports.useInteractiveColor=ne;exports.useIsMobile=ie;exports.useMeasure=A;exports.useMultiselect=B;exports.useMutationObserver=k;exports.useMutationObserverOnce=Y;exports.useSelect=N;exports.useTextContent=J;exports.useWhyDidYouUpdate=ee;//# sourceMappingURL=index.js.map
+'use strict';var c=require('react'),seedsReactUtilities=require('@sproutsocial/seeds-react-utilities'),styledComponents=require('styled-components');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var c__namespace=/*#__PURE__*/_interopNamespace(c);var x=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function q(r,t=false){let[e,n]=c.useState(x);return c.useLayoutEffect(()=>{let o=r.current;if(!o)return;if(t){let{x:i,y:a,width:u,height:l,top:m,right:f,bottom:p,left:d}=o.getBoundingClientRect();n({x:i,y:a,width:u,height:l,top:m,right:f,bottom:p,left:d});}if(!("ResizeObserver"in window))return;let s=new ResizeObserver(([i])=>{if(!i)return;let{x:a,y:u,width:l,height:m,top:f,right:p,bottom:d,left:g}=i.contentRect;n({x:a,y:u,width:l,height:m,top:f,right:p,bottom:d,left:g});});return s.observe(o),()=>{s.disconnect();}},[r,t]),e}var N=({initialValue:r="",onChange:t=()=>{}}={initialValue:"",onChange:()=>{}})=>{let[e,n]=c.useState(r),o=c.useCallback(s=>{s!==e&&(n(s),t(s));},[t,e]);return {value:e,onChange:o}};var S=(r,t)=>{let e=new Set(r);return t.type==="reset"?new Set:(t.value&&(e.has(t.value)?e.delete(t.value):e.add(t.value)),e)},K=({initialValue:r=[],onChange:t=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,n]=c.useReducer(S,new Set(r)),o=u=>Array.from(u),s=c.useCallback(u=>{n({type:"toggle_item",value:u});},[n]),i=c.useRef(true);c.useEffect(()=>{if(i.current){i.current=false;return}t(o(e));},[t,e]);let a=c.useCallback(()=>{n({type:"reset"});},[n]);return {value:o(e),onChange:s,onClear:a}};var k=r=>r;function V(r,t,e=k){if(!seedsReactUtilities.canUseDOM())return;let[n,o]=c.useState(void 0),s=c.useMemo(()=>new MutationObserver((i,a)=>{let u=e(i,a);o(u);}),[e]);return c.useEffect(()=>{if(r)return s.observe(r,t),()=>{s.disconnect();}},[r,t,s]),n}function G(r,t,e){let[n,o]=c.useState(true),i=V(n?r:null,t,e);return i!==void 0&&n&&o(false),i}function X(r){let[t,e]=c.useState(r),n=c.useCallback(o=>{o&&o.textContent!==null&&e(o.textContent);},[]);return n.current=t,n}function te(r,t){let e=c.useRef({});c.useEffect(()=>{if(e.current){let n=Object.keys({...e.current,...t}),o={};n.forEach(s=>{e.current[s]!==t[s]&&(o[s]={from:e.current[s],to:t[s]});}),Object.keys(o).length&&console.log("[why-did-you-update]",r,o);}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"?`color-mix(in srgb, ${r}, white 20%)`:`color-mix(in srgb, ${r}, black 20%)`};function ue(r){let e=styledComponents.useTheme()?.breakpoints?.sm??"640px",n=typeof r=="number"?`${r}px`:r??e,[o,s]=c__namespace.useState(()=>typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia(`(max-width: ${n})`).matches);return c__namespace.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia(`(max-width: ${n})`);s(i.matches);let a=u=>s(u.matches);return i.addEventListener?.("change",a),()=>i.removeEventListener?.("change",a)},[n]),o}exports.useInteractiveColor=oe;exports.useIsMobile=ue;exports.useMeasure=q;exports.useMultiselect=K;exports.useMutationObserver=V;exports.useMutationObserverOnce=G;exports.useSelect=N;exports.useTextContent=X;exports.useWhyDidYouUpdate=te;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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","../src/useIsMobile/useIsMobile.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","useIsMobile","breakpoint","themeSm","resolved","isMobile","setIsMobile","c","mq","handler","e"],"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","import * as React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * Returns `true` when the viewport matches a mobile-width media query.\n *\n * @param breakpoint Optional override. Accepts a CSS string (`\"640px\"`,\n *   `\"40em\"`) or a number (interpreted as px). Defaults to the styled-components\n *   theme's `breakpoints.sm` (falling back to `\"640px\"` if the theme is\n *   unavailable).\n */\nexport function useIsMobile(breakpoint?: number | string): boolean {\n  const styledTheme = useTheme() as TypeTheme | undefined;\n  const themeSm = styledTheme?.breakpoints?.sm ?? \"640px\";\n  const resolved =\n    typeof breakpoint === \"number\" ? `${breakpoint}px` : breakpoint ?? themeSm;\n\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return false;\n    }\n    return window.matchMedia(`(max-width: ${resolved})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n    const mq = window.matchMedia(`(max-width: ${resolved})`);\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener?.(\"change\", handler);\n    return () => mq.removeEventListener?.(\"change\", handler);\n  }, [resolved]);\n\n  return isMobile;\n}\n"]}
+{"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","../src/useIsMobile/useIsMobile.ts"],"names":["initialBounds","useMeasure","ref","synchronous","bounds","setContentRect","useState","useLayoutEffect","element","x","y","width","height","top","right","bottom","left","resizeObserver","entry","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","useIsMobile","breakpoint","themeSm","resolved","isMobile","setIsMobile","c","mq","handler","e"],"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\n/**\n * `synchronous` (default `false`) reads the element's bounds directly in\n * `useLayoutEffect`, before the browser's first paint, instead of waiting on\n * `ResizeObserver`'s own callback — which is async even for its first\n * observation, so a consumer that renders differently for width `0` (the\n * initial state) than for the real width otherwise paints once at `0` first.\n * Off by default so every existing consumer of this hook (re-exported\n * publicly through `@sproutsocial/racine`) keeps today's exact behavior.\n */\nexport function useMeasure<TElement extends Element>(\n  ref: RefObject<TElement>,\n  synchronous = false\n) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    if (synchronous) {\n      const { x, y, width, height, top, right, bottom, left } =\n        element.getBoundingClientRect();\n      setContentRect({ x, y, width, height, top, right, bottom, left });\n    }\n\n    // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n    if (!(\"ResizeObserver\" in window)) return;\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(element);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref, synchronous]);\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","import * as React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * Returns `true` when the viewport matches a mobile-width media query.\n *\n * @param breakpoint Optional override. Accepts a CSS string (`\"640px\"`,\n *   `\"40em\"`) or a number (interpreted as px). Defaults to the styled-components\n *   theme's `breakpoints.sm` (falling back to `\"640px\"` if the theme is\n *   unavailable).\n */\nexport function useIsMobile(breakpoint?: number | string): boolean {\n  const styledTheme = useTheme() as TypeTheme | undefined;\n  const themeSm = styledTheme?.breakpoints?.sm ?? \"640px\";\n  const resolved =\n    typeof breakpoint === \"number\" ? `${breakpoint}px` : breakpoint ?? themeSm;\n\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return false;\n    }\n    return window.matchMedia(`(max-width: ${resolved})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n    const mq = window.matchMedia(`(max-width: ${resolved})`);\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener?.(\"change\", handler);\n    return () => mq.removeEventListener?.(\"change\", handler);\n  }, [resolved]);\n\n  return isMobile;\n}\n"]}

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import*as c from'react';import {useState,useLayoutEffect,useCallback,useReducer,useRef,useEffect,useMemo}from'react';import {canUseDOM}from'@sproutsocial/seeds-react-utilities';import {useTheme}from'styled-components';var T=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function A(t){let[r,e]=useState(T);return useLayoutEffect(()=>{if(!t.current||!("ResizeObserver"in window))return;let s=new ResizeObserver(([n])=>{if(!n)return;let{x:i,y:a,width:u,height:p,top:d,right:b,bottom:h,left:y}=n.contentRect;e({x:i,y:a,width:u,height:p,top:d,right:b,bottom:h,left:y});});return s.observe(t.current),()=>{s.disconnect();}},[t]),r}var N=({initialValue:t="",onChange:r=()=>{}}={initialValue:"",onChange:()=>{}})=>{let[e,o]=useState(t),s=useCallback(n=>{n!==e&&(o(n),r(n));},[r,e]);return {value:e,onChange:s}};var R=(t,r)=>{let e=new Set(t);return r.type==="reset"?new Set:(r.value&&(e.has(r.value)?e.delete(r.value):e.add(r.value)),e)},B=({initialValue:t=[],onChange:r=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,o]=useReducer(R,new Set(t)),s=u=>Array.from(u),n=useCallback(u=>{o({type:"toggle_item",value:u});},[o]),i=useRef(true);useEffect(()=>{if(i.current){i.current=false;return}r(s(e));},[r,e]);let a=useCallback(()=>{o({type:"reset"});},[o]);return {value:s(e),onChange:n,onClear:a}};var j=t=>t;function k(t,r,e=j){if(!canUseDOM())return;let[o,s]=useState(void 0),n=useMemo(()=>new MutationObserver((i,a)=>{let u=e(i,a);s(u);}),[e]);return useEffect(()=>{if(t)return n.observe(t,r),()=>{n.disconnect();}},[t,r,n]),o}function Y(t,r,e){let[o,s]=useState(true),i=k(o?t:null,r,e);return i!==void 0&&o&&s(false),i}function J(t){let[r,e]=useState(t),o=useCallback(s=>{s&&s.textContent!==null&&e(s.textContent);},[]);return o.current=r,o}function ee(t,r){let e=useRef({});useEffect(()=>{if(e.current){let o=Object.keys({...e.current,...r}),s={};o.forEach(n=>{e.current[n]!==r[n]&&(s[n]={from:e.current[n],to:r[n]});}),Object.keys(s).length&&console.log("[why-did-you-update]",t,s);}e.current=r;});}var ne=t=>{if(!useTheme())throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");return useTheme().mode==="dark"?`color-mix(in srgb, ${t}, white 20%)`:`color-mix(in srgb, ${t}, black 20%)`};function ie(t){let e=useTheme()?.breakpoints?.sm??"640px",o=typeof t=="number"?`${t}px`:t??e,[s,n]=c.useState(()=>typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia(`(max-width: ${o})`).matches);return c.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia(`(max-width: ${o})`);n(i.matches);let a=u=>n(u.matches);return i.addEventListener?.("change",a),()=>i.removeEventListener?.("change",a)},[o]),s}export{ne as useInteractiveColor,ie as useIsMobile,A as useMeasure,B as useMultiselect,k as useMutationObserver,Y as useMutationObserverOnce,N as useSelect,J as useTextContent,ee as useWhyDidYouUpdate};//# sourceMappingURL=index.mjs.map
+import*as c from'react';import {useState,useLayoutEffect,useCallback,useReducer,useRef,useEffect,useMemo}from'react';import {canUseDOM}from'@sproutsocial/seeds-react-utilities';import {useTheme}from'styled-components';var x=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function q(r,t=false){let[e,n]=useState(x);return useLayoutEffect(()=>{let o=r.current;if(!o)return;if(t){let{x:i,y:a,width:u,height:l,top:m,right:f,bottom:p,left:d}=o.getBoundingClientRect();n({x:i,y:a,width:u,height:l,top:m,right:f,bottom:p,left:d});}if(!("ResizeObserver"in window))return;let s=new ResizeObserver(([i])=>{if(!i)return;let{x:a,y:u,width:l,height:m,top:f,right:p,bottom:d,left:g}=i.contentRect;n({x:a,y:u,width:l,height:m,top:f,right:p,bottom:d,left:g});});return s.observe(o),()=>{s.disconnect();}},[r,t]),e}var N=({initialValue:r="",onChange:t=()=>{}}={initialValue:"",onChange:()=>{}})=>{let[e,n]=useState(r),o=useCallback(s=>{s!==e&&(n(s),t(s));},[t,e]);return {value:e,onChange:o}};var S=(r,t)=>{let e=new Set(r);return t.type==="reset"?new Set:(t.value&&(e.has(t.value)?e.delete(t.value):e.add(t.value)),e)},K=({initialValue:r=[],onChange:t=()=>{}}={initialValue:[],onChange:()=>{}})=>{let[e,n]=useReducer(S,new Set(r)),o=u=>Array.from(u),s=useCallback(u=>{n({type:"toggle_item",value:u});},[n]),i=useRef(true);useEffect(()=>{if(i.current){i.current=false;return}t(o(e));},[t,e]);let a=useCallback(()=>{n({type:"reset"});},[n]);return {value:o(e),onChange:s,onClear:a}};var k=r=>r;function V(r,t,e=k){if(!canUseDOM())return;let[n,o]=useState(void 0),s=useMemo(()=>new MutationObserver((i,a)=>{let u=e(i,a);o(u);}),[e]);return useEffect(()=>{if(r)return s.observe(r,t),()=>{s.disconnect();}},[r,t,s]),n}function G(r,t,e){let[n,o]=useState(true),i=V(n?r:null,t,e);return i!==void 0&&n&&o(false),i}function X(r){let[t,e]=useState(r),n=useCallback(o=>{o&&o.textContent!==null&&e(o.textContent);},[]);return n.current=t,n}function te(r,t){let e=useRef({});useEffect(()=>{if(e.current){let n=Object.keys({...e.current,...t}),o={};n.forEach(s=>{e.current[s]!==t[s]&&(o[s]={from:e.current[s],to:t[s]});}),Object.keys(o).length&&console.log("[why-did-you-update]",r,o);}e.current=t;});}var oe=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%)`};function ue(r){let e=useTheme()?.breakpoints?.sm??"640px",n=typeof r=="number"?`${r}px`:r??e,[o,s]=c.useState(()=>typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia(`(max-width: ${n})`).matches);return c.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia(`(max-width: ${n})`);s(i.matches);let a=u=>s(u.matches);return i.addEventListener?.("change",a),()=>i.removeEventListener?.("change",a)},[n]),o}export{oe as useInteractiveColor,ue as useIsMobile,q as useMeasure,K as useMultiselect,V as useMutationObserver,G as useMutationObserverOnce,N as useSelect,X as useTextContent,te as useWhyDidYouUpdate};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -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","../src/useIsMobile/useIsMobile.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","useIsMobile","breakpoint","themeSm","resolved","isMobile","setIsMobile","mq","handler","e"],"mappings":"0NAYA,IAAMA,EAAgB,MAAA,CAAO,MAAA,CAAO,CAClC,CAAA,CAAG,EACH,CAAA,CAAG,CAAA,CACH,MAAO,CAAA,CACP,MAAA,CAAQ,EACR,GAAA,CAAK,CAAA,CACL,KAAA,CAAO,CAAA,CACP,OAAQ,CAAA,CACR,IAAA,CAAM,CACR,CAAC,CAAA,CAEM,SAASC,CAAAA,CAAqCC,CAAAA,CAA0B,CAC7E,GAAM,CAACC,EAAQC,CAAc,CAAA,CAC3BC,SAAkCL,CAAa,CAAA,CAEjD,OAAAM,eAAAA,CAAgB,IAAM,CAGpB,GACE,CAHcJ,CAAAA,CAAI,OAAA,EAKlB,EAAE,gBAAA,GAAoB,MAAA,CAAA,CAEtB,OAGF,IAAMK,CAAAA,CAAiB,IAAI,cAAA,CAAe,CAAC,CAACC,CAAK,IAAM,CACrD,GAAI,CAACA,CAAAA,CAAO,OACZ,GAAM,CAAE,EAAAC,CAAAA,CAAG,CAAA,CAAAC,EAAG,KAAA,CAAAC,CAAAA,CAAO,OAAAC,CAAAA,CAAQ,GAAA,CAAAC,EAAK,KAAA,CAAAC,CAAAA,CAAO,OAAAC,CAAAA,CAAQ,IAAA,CAAAC,CAAK,CAAA,CACpDR,CAAAA,CAAM,YACRJ,CAAAA,CAAe,CACb,CAAA,CAAAK,CAAAA,CACA,EAAAC,CAAAA,CACA,KAAA,CAAAC,EACA,MAAA,CAAAC,CAAAA,CACA,IAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,EACA,IAAA,CAAAC,CACF,CAAC,EACH,CAAC,EACD,OAAAT,CAAAA,CAAe,OAAA,CAAQL,CAAAA,CAAI,OAAO,CAAA,CAE3B,IAAM,CACXK,CAAAA,CAAe,UAAA,GACjB,CACF,CAAA,CAAG,CAACL,CAAG,CAAC,EAEDC,CACT,CCrDO,IAAMc,CAAAA,CAAY,CACvB,CACE,YAAA,CAAAC,EAAe,EAAA,CAEf,QAAA,CAAUC,EAAe,IAAM,CAAC,CAClC,CAAA,CAA8B,CAC5B,YAAA,CAAc,EAAA,CAEd,SAAU,IAAM,CAAC,CACnB,CAAA,GACG,CACH,GAAM,CAACC,EAAOC,CAAQ,CAAA,CAAIhB,SAAqBa,CAAY,CAAA,CAErDI,EAAWC,WAAAA,CACdC,CAAAA,EAAqB,CAChBA,CAAAA,GAAaJ,CAAAA,GACfC,EAASG,CAAQ,CAAA,CACjBL,EAAaK,CAAQ,CAAA,EAEzB,EACA,CAACL,CAAAA,CAAcC,CAAK,CACtB,EAEA,OAAO,CAAE,MAAAA,CAAAA,CAAO,QAAA,CAAAE,CAAS,CAC3B,ECxBA,IAAMG,CAAAA,CAAe,CACnBC,EACAC,CAAAA,GACgB,CAChB,IAAMC,CAAAA,CAAW,IAAI,IAAIF,CAAK,CAAA,CAC9B,OAAQC,CAAAA,CAAO,IAAA,GACR,QACI,IAAI,GAAA,EAIPA,EAAO,KAAA,GACLC,CAAAA,CAAS,IAAID,CAAAA,CAAO,KAAK,CAAA,CAC3BC,CAAAA,CAAS,OAAOD,CAAAA,CAAO,KAAK,EAE5BC,CAAAA,CAAS,GAAA,CAAID,EAAO,KAAK,CAAA,CAAA,CAGtBC,CAAAA,CAGb,CAAA,CAEaC,EAAiB,CAC5B,CACE,aAAAX,CAAAA,CAAe,GAEf,QAAA,CAAUC,CAAAA,CAAe,IAAM,CAAC,CAClC,CAAA,CAA6B,CAC3B,aAAc,EAAC,CAEf,SAAU,IAAM,CAAC,CACnB,CAAA,GACG,CACH,GAAM,CAACC,CAAAA,CAAOU,CAAQ,CAAA,CAAIC,UAAAA,CAAWN,EAAc,IAAI,GAAA,CAAIP,CAAY,CAAC,EAElEc,CAAAA,CAAiBZ,CAAAA,EACrB,MAAM,IAAA,CAAiBA,CAAK,EAExBE,CAAAA,CAAWC,WAAAA,CACdC,CAAAA,EAAqB,CACpBM,EAAS,CAAE,IAAA,CAAM,cAAe,KAAA,CAAON,CAAS,CAAC,EACnD,CAAA,CACA,CAACM,CAAQ,CACX,CAAA,CAEMG,CAAAA,CAAaC,OAAO,IAAI,CAAA,CAE9BC,UAAU,IAAM,CACd,GAAIF,CAAAA,CAAW,OAAA,CAAS,CACtBA,CAAAA,CAAW,OAAA,CAAU,MACrB,MACF,CACAd,EAAaa,CAAAA,CAAcZ,CAAK,CAAC,EAEnC,EAAG,CAACD,CAAAA,CAAcC,CAAK,CAAC,CAAA,CAExB,IAAMgB,CAAAA,CAAUb,WAAAA,CAAY,IAAM,CAChCO,CAAAA,CAAS,CAAE,IAAA,CAAM,OAAQ,CAAC,EAC5B,CAAA,CAAG,CAACA,CAAQ,CAAC,CAAA,CAEb,OAAO,CAAE,KAAA,CAAOE,CAAAA,CAAcZ,CAAK,CAAA,CAAG,QAAA,CAAAE,EAAU,OAAA,CAAAc,CAAQ,CAC1D,EC3CA,IAAMC,CAAAA,CAAiDC,CAAAA,EACrDA,EAEK,SAASC,CAAAA,CACdC,EACAC,CAAAA,CACAC,CAAAA,CAAyCL,CAAAA,CACzC,CACA,GAAI,CAACM,SAAAA,GACH,OAGF,GAAM,CAACvB,CAAAA,CAAOC,CAAQ,CAAA,CAAIhB,QAAAA,CAAS,MAAS,CAAA,CAEtCuC,CAAAA,CAAWC,QACf,IACE,IAAI,iBAAiB,CAACP,CAAAA,CAAcM,IAAa,CAC/C,IAAME,EAASJ,CAAAA,CAASJ,CAAAA,CAAcM,CAAQ,CAAA,CAC9CvB,CAAAA,CAASyB,CAAM,EACjB,CAAC,CAAA,CACH,CAACJ,CAAQ,CACX,CAAA,CAEA,OAAAP,SAAAA,CAAU,IAAM,CACd,GAAIK,CAAAA,CACF,OAAAI,CAAAA,CAAS,QAAQJ,CAAAA,CAAYC,CAAM,EAC5B,IAAM,CACXG,EAAS,UAAA,GACX,CAEJ,CAAA,CAAG,CAACJ,CAAAA,CAAYC,CAAAA,CAAQG,CAAQ,CAAC,CAAA,CAE1BxB,CACT,CAEO,SAAS2B,EACdP,CAAAA,CACAC,CAAAA,CACAC,EACA,CACA,GAAM,CAACM,CAAAA,CAAaC,CAAY,EAAI5C,QAAAA,CAAS,IAAI,CAAA,CAE3Ce,CAAAA,CAAQmB,EADDS,CAAAA,CAAcR,CAAAA,CAAa,KACAC,CAAAA,CAAQC,CAAQ,EACxD,OAAItB,CAAAA,GAAU,MAAA,EAAa4B,CAAAA,EACzBC,EAAa,KAAK,CAAA,CAEb7B,CACT,CCvEO,SAAS8B,CAAAA,CAAeC,CAAAA,CAAiB,CAC9C,GAAM,CAACC,EAAaC,CAAc,CAAA,CAAIhD,SAAS8C,CAAO,CAAA,CAEhDjD,EAAsBqB,WAAAA,CAAa+B,CAAAA,EAAe,CAClDA,CAAAA,EAAQA,CAAAA,CAAK,cAAgB,IAAA,EAC/BD,CAAAA,CAAeC,CAAAA,CAAK,WAAW,EAEnC,CAAA,CAAG,EAAE,CAAA,CAEL,OAAApD,EAAI,OAAA,CAAUkD,CAAAA,CACPlD,CACT,CCZO,SAASqD,EAAAA,CACdC,CAAAA,CACAC,CAAAA,CACA,CAGA,IAAMC,CAAAA,CAAgBxB,MAAAA,CAAqB,EAAE,CAAA,CAE7CC,UAAU,IAAM,CACd,GAAIuB,CAAAA,CAAc,OAAA,CAAS,CAEzB,IAAMC,CAAAA,CAAU,OAAO,IAAA,CAAK,CAAE,GAAGD,CAAAA,CAAc,OAAA,CAAS,GAAGD,CAAM,CAAC,CAAA,CAE5DG,CAAAA,CAA2B,EAAC,CAElCD,CAAAA,CAAQ,QAASE,CAAAA,EAAQ,CAGnBH,CAAAA,CAAc,OAAA,CAAQG,CAAG,CAAA,GAAMJ,CAAAA,CAAMI,CAAG,CAAA,GAG1CD,CAAAA,CAAWC,CAAG,CAAA,CAAI,CAChB,IAAA,CAAMH,CAAAA,CAAc,QAAQG,CAAG,CAAA,CAE/B,GAAIJ,CAAAA,CAAMI,CAAG,CACf,CAAA,EAEJ,CAAC,EAGG,MAAA,CAAO,IAAA,CAAKD,CAAU,CAAA,CAAE,MAAA,EAE1B,QAAQ,GAAA,CAAI,sBAAA,CAAwBJ,EAAMI,CAAU,EAExD,CAGAF,CAAAA,CAAc,QAAUD,EAC1B,CAAC,EACH,CChCA,IAAMK,EAAAA,CAAuBC,GAA+B,CAE1D,GAAI,CAACC,QAAAA,EAAS,CACZ,MAAM,IAAI,KAAA,CACR,6EACF,CAAA,CAQF,OAJyBA,QAAAA,EAAS,CACV,OAGN,MAAA,CACT,CAAA,mBAAA,EAAsBD,CAAU,CAAA,YAAA,CAAA,CAGhC,CAAA,mBAAA,EAAsBA,CAAU,CAAA,YAAA,CAE3C,EChBO,SAASE,EAAAA,CAAYC,CAAAA,CAAuC,CAEjE,IAAMC,CAAAA,CADcH,QAAAA,IACS,WAAA,EAAa,EAAA,EAAM,QAC1CI,CAAAA,CACJ,OAAOF,CAAAA,EAAe,QAAA,CAAW,GAAGA,CAAU,CAAA,EAAA,CAAA,CAAOA,GAAcC,CAAAA,CAE/D,CAACE,EAAUC,CAAW,CAAA,CAAU,CAAA,CAAA,QAAA,CAAS,IAE3C,OAAO,MAAA,CAAW,GAAA,EAClB,OAAO,MAAA,CAAO,UAAA,EAAe,WAEtB,KAAA,CAEF,MAAA,CAAO,WAAW,CAAA,YAAA,EAAeF,CAAQ,GAAG,CAAA,CAAE,OACtD,EAED,OAAM,CAAA,CAAA,SAAA,CAAU,IAAM,CACpB,GACE,OAAO,MAAA,CAAW,KAClB,OAAO,MAAA,CAAO,YAAe,UAAA,CAE7B,OAEF,IAAMG,CAAAA,CAAK,MAAA,CAAO,WAAW,CAAA,YAAA,EAAeH,CAAQ,GAAG,CAAA,CACvDE,CAAAA,CAAYC,EAAG,OAAO,CAAA,CACtB,IAAMC,CAAAA,CAAWC,CAAAA,EAA2BH,CAAAA,CAAYG,CAAAA,CAAE,OAAO,CAAA,CACjE,OAAAF,EAAG,gBAAA,GAAmB,QAAA,CAAUC,CAAO,CAAA,CAChC,IAAMD,EAAG,mBAAA,GAAsB,QAAA,CAAUC,CAAO,CACzD,CAAA,CAAG,CAACJ,CAAQ,CAAC,EAENC,CACT","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","import * as React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * Returns `true` when the viewport matches a mobile-width media query.\n *\n * @param breakpoint Optional override. Accepts a CSS string (`\"640px\"`,\n *   `\"40em\"`) or a number (interpreted as px). Defaults to the styled-components\n *   theme's `breakpoints.sm` (falling back to `\"640px\"` if the theme is\n *   unavailable).\n */\nexport function useIsMobile(breakpoint?: number | string): boolean {\n  const styledTheme = useTheme() as TypeTheme | undefined;\n  const themeSm = styledTheme?.breakpoints?.sm ?? \"640px\";\n  const resolved =\n    typeof breakpoint === \"number\" ? `${breakpoint}px` : breakpoint ?? themeSm;\n\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return false;\n    }\n    return window.matchMedia(`(max-width: ${resolved})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n    const mq = window.matchMedia(`(max-width: ${resolved})`);\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener?.(\"change\", handler);\n    return () => mq.removeEventListener?.(\"change\", handler);\n  }, [resolved]);\n\n  return isMobile;\n}\n"]}
+{"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","../src/useIsMobile/useIsMobile.ts"],"names":["initialBounds","useMeasure","ref","synchronous","bounds","setContentRect","useState","useLayoutEffect","element","x","y","width","height","top","right","bottom","left","resizeObserver","entry","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","useIsMobile","breakpoint","themeSm","resolved","isMobile","setIsMobile","mq","handler","e"],"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\n/**\n * `synchronous` (default `false`) reads the element's bounds directly in\n * `useLayoutEffect`, before the browser's first paint, instead of waiting on\n * `ResizeObserver`'s own callback — which is async even for its first\n * observation, so a consumer that renders differently for width `0` (the\n * initial state) than for the real width otherwise paints once at `0` first.\n * Off by default so every existing consumer of this hook (re-exported\n * publicly through `@sproutsocial/racine`) keeps today's exact behavior.\n */\nexport function useMeasure<TElement extends Element>(\n  ref: RefObject<TElement>,\n  synchronous = false\n) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    if (synchronous) {\n      const { x, y, width, height, top, right, bottom, left } =\n        element.getBoundingClientRect();\n      setContentRect({ x, y, width, height, top, right, bottom, left });\n    }\n\n    // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n    if (!(\"ResizeObserver\" in window)) return;\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(element);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref, synchronous]);\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","import * as React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * Returns `true` when the viewport matches a mobile-width media query.\n *\n * @param breakpoint Optional override. Accepts a CSS string (`\"640px\"`,\n *   `\"40em\"`) or a number (interpreted as px). Defaults to the styled-components\n *   theme's `breakpoints.sm` (falling back to `\"640px\"` if the theme is\n *   unavailable).\n */\nexport function useIsMobile(breakpoint?: number | string): boolean {\n  const styledTheme = useTheme() as TypeTheme | undefined;\n  const themeSm = styledTheme?.breakpoints?.sm ?? \"640px\";\n  const resolved =\n    typeof breakpoint === \"number\" ? `${breakpoint}px` : breakpoint ?? themeSm;\n\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return false;\n    }\n    return window.matchMedia(`(max-width: ${resolved})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n    const mq = window.matchMedia(`(max-width: ${resolved})`);\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener?.(\"change\", handler);\n    return () => mq.removeEventListener?.(\"change\", handler);\n  }, [resolved]);\n\n  return isMobile;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-hooks",
-  "version": "3.2.9",
+  "version": "3.3.0",
   "description": "Seeds React Hooks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -15,15 +15,19 @@
     "build:debug": "tsup --dts --metafile",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-react-utilities": "^4.0.1",
     "@sproutsocial/seeds-react-theme": "^4.4.0"
   },
   "devDependencies": {
+    "@types/react": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-testing": "*",
     "react": "^18.0.0",
     "styled-components": "^5.2.3",
     "typescript": "^5.6.2",