@spark-web/utils - npm Package Compare versions

Comparing version 1.2.3 to 1.3.0

dist/spark-web-utils.cjs.dev.js

@@ -7,3 +7,3 @@ 'use strict';
 var react = require('react');
-var typeCheck = require('./type-check-c9975507.cjs.dev.js');
+var typeCheck = require('./type-check-042a577c.cjs.dev.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
@@ -35,6 +35,4 @@
  */
-
 function assignRef(ref, value) {
   if (ref == null) return;
-
   if (typeCheck.isFunction(ref)) {
@@ -50,2 +48,3 @@ ref(value);
 }
+
 /**
@@ -62,3 +61,2 @@ * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
  */
-
 function useComposedRefs() {
@@ -68,7 +66,5 @@ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
   }
-
   return react.useCallback(function (node) {
     var _iterator = _createForOfIteratorHelper(refs),
-        _step;
-
+      _step;
     try {
@@ -78,7 +74,7 @@ for (_iterator.s(); !(_step = _iterator.n()).done;) {
         assignRef(ref, node);
-      } // `refs` is already an array. If we do what ESLint wants us to do
+      }
+      // `refs` is already an array. If we do what ESLint wants us to do
       // and wrap `refs` in square brackets, then the useCallback will fire
       // on every render (not just when the dependencies change).
       // eslint-disable-next-line react-hooks/exhaustive-deps
-
     } catch (err) {
@@ -97,17 +93,13 @@ _iterator.e(err);
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      defaultIsOpen = _ref.defaultIsOpen;
-
+    defaultIsOpen = _ref.defaultIsOpen;
   var _useState = react.useState(defaultIsOpen !== null && defaultIsOpen !== void 0 ? defaultIsOpen : false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var onClose = function onClose() {
     return setIsOpen(false);
   };
-
   var onOpen = function onOpen() {
     return setIsOpen(true);
   };
-
   var onToggle = function onToggle() {
@@ -118,3 +110,2 @@ return setIsOpen(function (prevState) {
   };
-
   return {
@@ -135,6 +126,6 @@ isOpen: isOpen,
  */
-
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : function () {};
 
 var stashedTime;
+
 /**
@@ -145,3 +136,2 @@ * Keeps all instances of the same animation in sync.
  */
-
 function useSynchronizedAnimation(animationName) {
@@ -151,14 +141,13 @@ var ref = react.useRef(null);
     var _document$getAnimatio, _document;
-
-    var animations = ((_document$getAnimatio = (_document = document).getAnimations) === null || _document$getAnimatio === void 0 ? void 0 : _document$getAnimatio.call(_document) // @ts-expect-error: Property 'animationName' does not exist on type 'Animation'.
+    var animations = ((_document$getAnimatio = (_document = document).getAnimations) === null || _document$getAnimatio === void 0 ? void 0 : _document$getAnimatio.call(_document)
+    // @ts-expect-error: Property 'animationName' does not exist on type 'Animation'.
     .filter(function (animation) {
       return animation.animationName === animationName;
     })) || [];
-    var animationTarget = animations.find( // @ts-expect-error: Property 'target' does not exist on type 'AnimationEffect'.
+    var animationTarget = animations.find(
+    // @ts-expect-error: Property 'target' does not exist on type 'AnimationEffect'.
     function (animation) {
       var _animation$effect;
-
       return ((_animation$effect = animation.effect) === null || _animation$effect === void 0 ? void 0 : _animation$effect.target) === ref.current;
     });
-
     if (animationTarget) {
@@ -168,7 +157,5 @@ if (animationTarget === animations[0] && stashedTime) {
       }
-
       if (animationTarget && animationTarget !== animations[0]) {
         animationTarget.currentTime = animations[0].currentTime;
       }
-
       return function () {
@@ -175,0 +162,0 @@ if (animationTarget === animations[0]) {

dist/spark-web-utils.cjs.prod.js

@@ -7,3 +7,3 @@ 'use strict';
 var react = require('react');
-var typeCheck = require('./type-check-7d653f66.cjs.prod.js');
+var typeCheck = require('./type-check-bd3afe6c.cjs.prod.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
@@ -35,6 +35,4 @@
  */
-
 function assignRef(ref, value) {
   if (ref == null) return;
-
   if (typeCheck.isFunction(ref)) {
@@ -50,2 +48,3 @@ ref(value);
 }
+
 /**
@@ -62,3 +61,2 @@ * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
  */
-
 function useComposedRefs() {
@@ -68,7 +66,5 @@ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
   }
-
   return react.useCallback(function (node) {
     var _iterator = _createForOfIteratorHelper(refs),
-        _step;
-
+      _step;
     try {
@@ -78,7 +74,7 @@ for (_iterator.s(); !(_step = _iterator.n()).done;) {
         assignRef(ref, node);
-      } // `refs` is already an array. If we do what ESLint wants us to do
+      }
+      // `refs` is already an array. If we do what ESLint wants us to do
       // and wrap `refs` in square brackets, then the useCallback will fire
       // on every render (not just when the dependencies change).
       // eslint-disable-next-line react-hooks/exhaustive-deps
-
     } catch (err) {
@@ -97,17 +93,13 @@ _iterator.e(err);
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      defaultIsOpen = _ref.defaultIsOpen;
-
+    defaultIsOpen = _ref.defaultIsOpen;
   var _useState = react.useState(defaultIsOpen !== null && defaultIsOpen !== void 0 ? defaultIsOpen : false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var onClose = function onClose() {
     return setIsOpen(false);
   };
-
   var onOpen = function onOpen() {
     return setIsOpen(true);
   };
-
   var onToggle = function onToggle() {
@@ -118,3 +110,2 @@ return setIsOpen(function (prevState) {
   };
-
   return {
@@ -135,6 +126,6 @@ isOpen: isOpen,
  */
-
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : function () {};
 
 var stashedTime;
+
 /**
@@ -145,3 +136,2 @@ * Keeps all instances of the same animation in sync.
  */
-
 function useSynchronizedAnimation(animationName) {
@@ -151,14 +141,13 @@ var ref = react.useRef(null);
     var _document$getAnimatio, _document;
-
-    var animations = ((_document$getAnimatio = (_document = document).getAnimations) === null || _document$getAnimatio === void 0 ? void 0 : _document$getAnimatio.call(_document) // @ts-expect-error: Property 'animationName' does not exist on type 'Animation'.
+    var animations = ((_document$getAnimatio = (_document = document).getAnimations) === null || _document$getAnimatio === void 0 ? void 0 : _document$getAnimatio.call(_document)
+    // @ts-expect-error: Property 'animationName' does not exist on type 'Animation'.
     .filter(function (animation) {
       return animation.animationName === animationName;
     })) || [];
-    var animationTarget = animations.find( // @ts-expect-error: Property 'target' does not exist on type 'AnimationEffect'.
+    var animationTarget = animations.find(
+    // @ts-expect-error: Property 'target' does not exist on type 'AnimationEffect'.
     function (animation) {
       var _animation$effect;
-
       return ((_animation$effect = animation.effect) === null || _animation$effect === void 0 ? void 0 : _animation$effect.target) === ref.current;
     });
-
     if (animationTarget) {
@@ -168,7 +157,5 @@ if (animationTarget === animations[0] && stashedTime) {
       }
-
       if (animationTarget && animationTarget !== animations[0]) {
         animationTarget.currentTime = animations[0].currentTime;
       }
-
       return function () {
@@ -175,0 +162,0 @@ if (animationTarget === animations[0]) {

dist/spark-web-utils.esm.js

 import _createForOfIteratorHelper from '@babel/runtime/helpers/esm/createForOfIteratorHelper';
 import { useCallback, useState, useLayoutEffect, useRef } from 'react';
-import { i as isFunction } from './type-check-5d26332c.esm.js';
+import { i as isFunction } from './type-check-d8c35507.esm.js';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
@@ -30,6 +30,4 @@
  */
-
 function assignRef(ref, value) {
   if (ref == null) return;
-
   if (isFunction(ref)) {
@@ -45,2 +43,3 @@ ref(value);
 }
+
 /**
@@ -57,3 +56,2 @@ * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
  */
-
 function useComposedRefs() {
@@ -63,7 +61,5 @@ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
   }
-
   return useCallback(function (node) {
     var _iterator = _createForOfIteratorHelper(refs),
-        _step;
-
+      _step;
     try {
@@ -73,7 +69,7 @@ for (_iterator.s(); !(_step = _iterator.n()).done;) {
         assignRef(ref, node);
-      } // `refs` is already an array. If we do what ESLint wants us to do
+      }
+      // `refs` is already an array. If we do what ESLint wants us to do
       // and wrap `refs` in square brackets, then the useCallback will fire
       // on every render (not just when the dependencies change).
       // eslint-disable-next-line react-hooks/exhaustive-deps
-
     } catch (err) {
@@ -92,17 +88,13 @@ _iterator.e(err);
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      defaultIsOpen = _ref.defaultIsOpen;
-
+    defaultIsOpen = _ref.defaultIsOpen;
   var _useState = useState(defaultIsOpen !== null && defaultIsOpen !== void 0 ? defaultIsOpen : false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var onClose = function onClose() {
     return setIsOpen(false);
   };
-
   var onOpen = function onOpen() {
     return setIsOpen(true);
   };
-
   var onToggle = function onToggle() {
@@ -113,3 +105,2 @@ return setIsOpen(function (prevState) {
   };
-
   return {
@@ -130,6 +121,6 @@ isOpen: isOpen,
  */
-
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : function () {};
 
 var stashedTime;
+
 /**
@@ -140,3 +131,2 @@ * Keeps all instances of the same animation in sync.
  */
-
 function useSynchronizedAnimation(animationName) {
@@ -146,14 +136,13 @@ var ref = useRef(null);
     var _document$getAnimatio, _document;
-
-    var animations = ((_document$getAnimatio = (_document = document).getAnimations) === null || _document$getAnimatio === void 0 ? void 0 : _document$getAnimatio.call(_document) // @ts-expect-error: Property 'animationName' does not exist on type 'Animation'.
+    var animations = ((_document$getAnimatio = (_document = document).getAnimations) === null || _document$getAnimatio === void 0 ? void 0 : _document$getAnimatio.call(_document)
+    // @ts-expect-error: Property 'animationName' does not exist on type 'Animation'.
     .filter(function (animation) {
       return animation.animationName === animationName;
     })) || [];
-    var animationTarget = animations.find( // @ts-expect-error: Property 'target' does not exist on type 'AnimationEffect'.
+    var animationTarget = animations.find(
+    // @ts-expect-error: Property 'target' does not exist on type 'AnimationEffect'.
     function (animation) {
       var _animation$effect;
-
       return ((_animation$effect = animation.effect) === null || _animation$effect === void 0 ? void 0 : _animation$effect.target) === ref.current;
     });
-
     if (animationTarget) {
@@ -163,7 +152,5 @@ if (animationTarget === animations[0] && stashedTime) {
       }
-
       if (animationTarget && animationTarget !== animations[0]) {
         animationTarget.currentTime = animations[0].currentTime;
       }
-
       return function () {
@@ -170,0 +157,0 @@ if (animationTarget === animations[0]) {

internal/dist/spark-web-utils-internal.cjs.dev.js

@@ -11,6 +11,4 @@ 'use strict';
   var dataAttributes = {};
-
   for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
     var key = _keys[_i];
-
     /**
@@ -28,3 +26,2 @@ * NOTE: lowercase keys to support property value shorthand
   }
-
   return dataAttributes;
@@ -42,4 +39,5 @@ };
   WebkitTapHighlightColor: 'transparent'
-}; // HTML5 display-role reset for older browsers
+};
 
+// HTML5 display-role reset for older browsers
 var block = {
@@ -66,4 +64,5 @@ display: 'block'
   appearance: 'none'
-}); // Custom reset rules
+});
 
+// Custom reset rules
 var mark = Object.assign({}, transparent, {
@@ -117,5 +116,6 @@ color: 'inherit'
   input: input
-}; // TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
+};
+
+// TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
 // would strictly accept HTML elements
-
 function resetElementStyles(keyOrComponent) {
@@ -125,3 +125,2 @@ if (typeof keyOrComponent !== 'string') {
   }
-
   if (keyOrComponent in element) {
@@ -131,3 +130,2 @@ var elementStyles = element[keyOrComponent];
   }
-
   return base;
@@ -134,0 +132,0 @@ }

internal/dist/spark-web-utils-internal.cjs.prod.js

@@ -11,6 +11,4 @@ 'use strict';
   var dataAttributes = {};
-
   for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
     var key = _keys[_i];
-
     /**
@@ -28,3 +26,2 @@ * NOTE: lowercase keys to support property value shorthand
   }
-
   return dataAttributes;
@@ -42,4 +39,5 @@ };
   WebkitTapHighlightColor: 'transparent'
-}; // HTML5 display-role reset for older browsers
+};
 
+// HTML5 display-role reset for older browsers
 var block = {
@@ -66,4 +64,5 @@ display: 'block'
   appearance: 'none'
-}); // Custom reset rules
+});
 
+// Custom reset rules
 var mark = Object.assign({}, transparent, {
@@ -117,5 +116,6 @@ color: 'inherit'
   input: input
-}; // TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
+};
+
+// TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
 // would strictly accept HTML elements
-
 function resetElementStyles(keyOrComponent) {
@@ -125,3 +125,2 @@ if (typeof keyOrComponent !== 'string') {
   }
-
   if (keyOrComponent in element) {
@@ -131,3 +130,2 @@ var elementStyles = element[keyOrComponent];
   }
-
   return base;
@@ -134,0 +132,0 @@ }

internal/dist/spark-web-utils-internal.esm.js

@@ -7,6 +7,4 @@ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
   var dataAttributes = {};
-
   for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
     var key = _keys[_i];
-
     /**
@@ -24,3 +22,2 @@ * NOTE: lowercase keys to support property value shorthand
   }
-
   return dataAttributes;
@@ -38,4 +35,5 @@ };
   WebkitTapHighlightColor: 'transparent'
-}; // HTML5 display-role reset for older browsers
+};
 
+// HTML5 display-role reset for older browsers
 var block = {
@@ -62,4 +60,5 @@ display: 'block'
   appearance: 'none'
-}); // Custom reset rules
+});
 
+// Custom reset rules
 var mark = Object.assign({}, transparent, {
@@ -113,5 +112,6 @@ color: 'inherit'
   input: input
-}; // TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
+};
+
+// TODO: supporting `ElementType` (because of "as" prop) is messy. Ideally this
 // would strictly accept HTML elements
-
 function resetElementStyles(keyOrComponent) {
@@ -121,3 +121,2 @@ if (typeof keyOrComponent !== 'string') {
   }
-
   if (keyOrComponent in element) {
@@ -127,3 +126,2 @@ var elementStyles = element[keyOrComponent];
   }
-
   return base;
@@ -130,0 +128,0 @@ }

package.json

 {
   "name": "@spark-web/utils",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
@@ -21,4 +21,4 @@ "repository": {
   "devDependencies": {
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

README.md

@@ -5,1 +5,28 @@ ---
 ---
+
+🚧 — Under construction
+
+## forwardRefWithAs
+
+A best effort attempt to provide strongly typed polymorphic components that (as
+the name suggests) forwards the ref onto the underlying element.
+
+Internally this is used for our layout primitives (`Box`, `Columns`,
+`Container`, `Hidden`, `Inline`, `Row` and `Stack`), our link components
+(`Link`, `ButtonLink` and `TextLink`), our typographic components (`Heading` and
+`Text`) and finally `VisuallyHidden`.
+
+```jsx
+export const PolymorphicComponent = forwardRefWithAs<
+  'div',
+  PolymorphicComponentProps
+>(({ as: Tag = 'div', ...consumerProps }, forwardedRef) => {
+  return (
+    <Tag
+      {...consumerProps}
+      ref={forwardedRef}
+      // Custom props go here
+    />
+  );
+});
+```

ts/dist/spark-web-utils-ts.cjs.dev.js

@@ -6,3 +6,3 @@ 'use strict';
 var react = require('react');
-var typeCheck = require('../../dist/type-check-c9975507.cjs.dev.js');
+var typeCheck = require('../../dist/type-check-042a577c.cjs.dev.js');
 
@@ -9,0 +9,0 @@ /**

ts/dist/spark-web-utils-ts.cjs.prod.js

@@ -6,3 +6,3 @@ 'use strict';
 var react = require('react');
-var typeCheck = require('../../dist/type-check-7d653f66.cjs.prod.js');
+var typeCheck = require('../../dist/type-check-bd3afe6c.cjs.prod.js');
 
@@ -9,0 +9,0 @@ /**

ts/dist/spark-web-utils-ts.esm.js

 import { forwardRef } from 'react';
-export { a as isBoolean, i as isFunction, b as isNumber, c as isString } from '../../dist/type-check-5d26332c.esm.js';
+export { a as isBoolean, i as isFunction, b as isNumber, c as isString } from '../../dist/type-check-d8c35507.esm.js';
 
@@ -4,0 +4,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

42775

increased by1.63%

Lines of code

1309

increased by1.39%

Number of lines in readme file

32

increased by540%

No dependency changes