@slimr/react 2.1.46 → 2.1.47

package/README.md

@@ -4,17 +4,7 @@ A collection of useful 1st and third party react components, hooks, and util. In
 
 ## Context
 
-`@slimr` is a set of slim React (hence '@slimr') libs:
-
-- [@slimr/css](https://www.npmjs.com/package/@slimr/css) - Framework agnostic css-in-js features inspired by the popular Emotion lib
-- [@slimr/forms](https://www.npmjs.com/package/@slimr/forms) - A minimalistic form hook
-- [@slimr/hooks](https://www.npmjs.com/package/@slimr/hooks) - A collection of useful 1st and third party react hooks
-- [@slimr/markdown](https://www.npmjs.com/package/@slimr/markdown) - A simple component and slim markdown-to-html parser
-- [@slimr/mdi-paths](https://www.npmjs.com/package/@slimr/mdi-paths) - A basic Icon component and Material Design icon svg paths, code-split by path.
-- [@slimr/router](https://www.npmjs.com/package/@slimr/router) - A novel React-web router that supports stack routing
-- [@slimr/styled](https://www.npmjs.com/package/@slimr/styled) - css-in-js features inspired by the popular styled-components and Chakra-UI libs
-- [@slimr/swr](https://www.npmjs.com/package/@slimr/swr) - A React hook for fetching data that supports stale-while-refresh eager rendering
-- [@slimr/util](https://www.npmjs.com/package/@slimr/util) - Framework agnostic Javascript polyfills
+`@slimr` is a set of slim React (hence '@slimr') libs. Check them all out on [github](https://github.com/bdombro/slimr)!
 
 ## Setup
 
@@ -40,50 +30,25 @@ export default defineConfig({
 - [@slimr/router](https://www.npmjs.com/package/@slimr/router) - A novel React-web router that supports stack routing
 - [@slimr/styled](https://www.npmjs.com/package/@slimr/styled) - css-in-js features inspired by the popular styled-components and Chakra-UI libs
 - [@slimr/swr](https://www.npmjs.com/package/@slimr/swr) - A React hook for fetching data that supports stale-while-refresh eager rendering
-- [@slimr/util](https://www.npmjs.com/package/@slimr/util) - Framework agnostic Javascript polyfills
 - [react-use](https://www.npmjs.com/package/react-use) - an excellent collection of hooks
 
-### useDeepCompareMemo and useShallowCompareMemo
+### mergeRefs
 
-like react-use's useDeepEffects, but for memos
+Merge React refs so that multiple refs can be used on a single element. Is
+used to merge refs from a forwardRef and a local ref from useRef.
 
-### useForm, FormError
+Credits: react-merge-refs
 
-A hook and custom Error from [@slimr/forms](https://www.npmjs.com/package/@slimr/forms), which returns a Form component and reactive form state.
+```typescript
+const MyComponent = forwardRef((props, ref1) => {
+ const ref2 = useRef(null)
+ return (<div ref={mergeRefs([ref1, ref2])} />)
+})
+```
 
-```tsx
-import {FormError, useForm} from '@slimr/forms'
-import {formToValues} from '@slimr/util'
-
-function MyForm() {
-  const { Form, submitting, submitted, accepted, errors} = useForm()
-
-  const onSubmit = async (e: React.FormEventHandler<HTMLFormElement> => {
-    const vals = formToJson(e.target as HTMLFormElement)
-    const errors: Record<string, string> = {}
-    if (!vals.name) {
-      errors.name = 'Name is required'
-    }
-    if (!vals.terms) {
-      errors.checkbox = 'You must agree to the terms'
-    }
-    if (Object.keys(errors).length) {
-      throw new FormError(errors)
-    }
-  }
+### useDeepCompareMemo and useShallowCompareMemo
 
-  return (
-    <Form onSubmit={onSubmit}>
-      <input disabled={submitting || accepted} name="name" />
-      <div>{errors.name}<div>
-      <input disabled={submitting || accepted} name="terms" type="checkbox" />
-      <div>{errors.terms}<div>
-      <button type="submit">Submit</button>
-      <button type="reset">Reset</button>
-    </Form>
-  )
-}
-```
+like react-use's useDeepEffects, but for memos
 
 ### useSet2
 

package/cjs/index.d.ts

@@ -3,7 +3,7 @@ export * from '@slimr/markdown';
 export * from '@slimr/router';
 export * from '@slimr/styled';
 export * from '@slimr/swr';
-export * from '@slimr/util';
 export * from 'react-use';
+export * from './merge-refs.js';
 export * from './useMemos.js';
 export * from './useSet2.js';

package/cjs/index.js

@@ -19,8 +19,8 @@ __exportStar(require("@slimr/markdown"), exports);
 __exportStar(require("@slimr/router"), exports);
 __exportStar(require("@slimr/styled"), exports);
 __exportStar(require("@slimr/swr"), exports);
-__exportStar(require("@slimr/util"), exports);
 __exportStar(require("react-use"), exports);
+__exportStar(require("./merge-refs.js"), exports);
 __exportStar(require("./useMemos.js"), exports);
 __exportStar(require("./useSet2.js"), exports);
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,kDAA+B;AAC/B,gDAA6B;AAC7B,gDAA6B;AAC7B,6CAA0B;AAC1B,8CAA2B;AAC3B,4CAAyB;AAEzB,gDAA6B;AAC7B,+CAA4B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,kDAA+B;AAC/B,gDAA6B;AAC7B,gDAA6B;AAC7B,6CAA0B;AAC1B,4CAAyB;AAEzB,kDAA+B;AAC/B,gDAA6B;AAC7B,+CAA4B"}

package/cjs/index.ts

@@ -3,8 +3,8 @@ export * from '@slimr/markdown'
 export * from '@slimr/router'
 export * from '@slimr/styled'
 export * from '@slimr/swr'
-export * from '@slimr/util'
 export * from 'react-use'
 
+export * from './merge-refs.js'
 export * from './useMemos.js'
 export * from './useSet2.js'

package/cjs/merge-refs.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;

package/cjs/merge-refs.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = void 0;
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+function mergeRefs(refs) {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref != null) {
+                ;
+                ref.current = value;
+            }
+        });
+    };
+}
+exports.mergeRefs = mergeRefs;
+//# sourceMappingURL=merge-refs.js.map

package/cjs/merge-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-refs.js","sourceRoot":"","sources":["../src/merge-refs.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;IAaI;AACJ,SAAgB,SAAS,CACvB,IAA2D;IAE3D,OAAO,KAAK,CAAC,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACjB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,KAAK,CAAC,CAAA;aACX;iBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;gBACtB,CAAC;gBAAC,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAA;aAC3D;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;AACH,CAAC;AAZD,8BAYC"}

package/cjs/merge-refs.ts

@@ -0,0 +1,27 @@
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref != null) {
+        ;(ref as React.MutableRefObject<T | null>).current = value
+      }
+    })
+  }
+}

package/esm/index.d.ts

@@ -3,7 +3,7 @@ export * from '@slimr/markdown';
 export * from '@slimr/router';
 export * from '@slimr/styled';
 export * from '@slimr/swr';
-export * from '@slimr/util';
 export * from 'react-use';
+export * from './merge-refs.js';
 export * from './useMemos.js';
 export * from './useSet2.js';

package/esm/index.js

@@ -3,8 +3,8 @@ export * from '@slimr/markdown';
 export * from '@slimr/router';
 export * from '@slimr/styled';
 export * from '@slimr/swr';
-export * from '@slimr/util';
 export * from 'react-use';
+export * from './merge-refs.js';
 export * from './useMemos.js';
 export * from './useSet2.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AAEzB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AAEzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}

package/esm/index.ts

@@ -3,8 +3,8 @@ export * from '@slimr/markdown'
 export * from '@slimr/router'
 export * from '@slimr/styled'
 export * from '@slimr/swr'
-export * from '@slimr/util'
 export * from 'react-use'
 
+export * from './merge-refs.js'
 export * from './useMemos.js'
 export * from './useSet2.js'

package/esm/merge-refs.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;

package/esm/merge-refs.js

@@ -0,0 +1,28 @@
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+export function mergeRefs(refs) {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref != null) {
+                ;
+                ref.current = value;
+            }
+        });
+    };
+}
+//# sourceMappingURL=merge-refs.js.map

package/esm/merge-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-refs.js","sourceRoot":"","sources":["../src/merge-refs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;IAaI;AACJ,MAAM,UAAU,SAAS,CACvB,IAA2D;IAE3D,OAAO,KAAK,CAAC,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACjB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,KAAK,CAAC,CAAA;aACX;iBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;gBACtB,CAAC;gBAAC,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAA;aAC3D;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;AACH,CAAC"}

package/esm/merge-refs.ts

@@ -0,0 +1,27 @@
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref != null) {
+        ;(ref as React.MutableRefObject<T | null>).current = value
+      }
+    })
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimr/react",
-  "version": "2.1.46",
+  "version": "2.1.47",
   "author": "Brian Dombrowski",
   "license": "ISC",
   "private": false,
@@ -32,12 +32,12 @@
     "start": "nodemon -w src -e '*' -x 'npm run build && cd ../demo && npm start'"
   },
   "dependencies": {
-    "@slimr/forms": "^4.1.42",
-    "@slimr/markdown": "^2.1.34",
-    "@slimr/router": "^2.1.50",
-    "@slimr/styled": "^2.1.41",
-    "@slimr/swr": "^2.1.33",
-    "@slimr/util": "^3.2.36",
+    "@slimr/forms": "^4.1.46",
+    "@slimr/markdown": "^2.1.35",
+    "@slimr/router": "^2.1.51",
+    "@slimr/styled": "^2.1.42",
+    "@slimr/swr": "^2.1.34",
+    "@slimr/util": "^3.2.38",
     "react-use": "17"
   },
   "peerDependencies": {

package/src/index.ts

@@ -3,8 +3,8 @@ export * from '@slimr/markdown'
 export * from '@slimr/router'
 export * from '@slimr/styled'
 export * from '@slimr/swr'
-export * from '@slimr/util'
 export * from 'react-use'
 
+export * from './merge-refs.js'
 export * from './useMemos.js'
 export * from './useSet2.js'

package/src/merge-refs.ts

@@ -0,0 +1,27 @@
+/**
+ * Merge React refs so that multiple refs can be used on a single element. Is
+ * used to merge refs from a forwardRef and a local ref from useRef.
+ *
+ * Credits: react-merge-refs
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = forwardRef((props, ref1) => {
+ *  const ref2 = useRef(null)
+ *  return (<div ref={mergeRefs([ref1, ref2])} />)
+ * })
+ * ```
+ **/
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref != null) {
+        ;(ref as React.MutableRefObject<T | null>).current = value
+      }
+    })
+  }
+}