@henrybuilt/react-lib - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

package.json

 {
   "name": "@henrybuilt/react-lib",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/components/app-header.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-const AppHeader = ({items = [], links, logo}) => {
+const AppHeader = ({items = [], links, logo, style, ...rest}) => {
   const shouldRenderNavMenu = links?.length > 0;
@@ -14,14 +14,14 @@
     header: {
+      display: 'flex',
       height: '70px',
       maxHeight: '70px',
-      display: 'flex',
-      flex: 1,
       alignItems: 'center',
-      padding: '12px 25px', //confirm this padding is correct according to the mockup
+      padding: '12px 25px', //TODO confirm this padding is correct according to the mockup
       backgroundColor: K.colors.accent,
       ...K.fonts.su,
+      ...style,
     },
     itemsGroup: {
       display: 'flex',
-      flex: 1,
+      flexGrow: 1,
       justifyContent: 'space-between',
@@ -41,7 +41,4 @@ alignItems: 'center',
     logo: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: 46.5,
-      height: 46.5,
+      width: '2rem',
+      height: '2rem',
     }
@@ -51,3 +48,3 @@ };
   return (
-    <div style={styles.header}>
+    <div style={styles.header} {...rest}>
       {logo && <Icon style={styles.logo} src={logo} />}
@@ -54,0 +51,0 @@ <div style={styles.itemsGroup}>{items}</div>

src/components/button/add-button.js

@@ -13,3 +13,3 @@ import React, {useRef, useState} from 'react';
   const [isExpanded, setIsExpanded] = hasOptions ? useState(false) : [false, null];
-  const handleClose = () => setIsExpanded(false);
+  const handleClose = () => setIsExpanded?.(false);
 
@@ -80,3 +80,3 @@ useClickOutside(buttonRef, handleClose);
   const handleClick = (e) => {
-    if (hasOptions) setIsExpanded(!isExpanded);
+    if (hasOptions) setIsExpanded?.(!isExpanded);
     else if (onClick) onClick(e);
@@ -83,0 +83,0 @@ };

src/components/checkbox.js

@@ -32,3 +32,3 @@ import React, {useState} from 'react';
       display: 'flex',
-      justifyContent: 'flex-start',
+      justifyContent: 'center',
       alignItems: 'center',
@@ -66,5 +66,5 @@ border: '1px solid',
 
-    if (!isControlled) setIsChecked(!isChecked);
+    setIsChecked?.(!isChecked);
 
-    if (onChange) onChange(!isChecked);
+    onChange?.(!isChecked);
   };
@@ -81,3 +81,3 @@
       <input
-        {...{disabled, name, label, onChange}}
+        {...{disabled, name, label}}
         type={'checkbox'}
@@ -84,0 +84,0 @@ checked={isChecked}

src/components/collapsible-header.js

@@ -1,6 +0,6 @@
-import React, {useState} from 'react';
+import React, {forwardRef, useState} from 'react';
 
 import Icon from './icon';
 
-const CollapsibleHeader = ({header, headerStyle, type = 'h3', collapsed, defaultCollapsed = false, expandIcon, onChange, style, children, contentStyle}) => {
+const CollapsibleHeader = forwardRef(({header, headerStyle, type = 'h3', collapsed, defaultCollapsed = false, expandIcon, onChange, style, children, contentStyle}, ref) => {
   //HINT determines whether or not component should be managed locally.
@@ -28,3 +28,3 @@ //     When isControlled is true, behavior is only driven by props.
   return (
-    <div style={styles.container}>
+    <div {...{ref}} style={styles.container}>
       <div onClick={handleClick} style={styles.headerContainer}>
@@ -39,4 +39,4 @@ <Icon icon={expandIcon} name='upArrow' style={styles.icon}/>
   );
-};
+});
 
 export default CollapsibleHeader;

src/components/image.js

@@ -20,16 +20,17 @@ import React, {useEffect, useState} from 'react';
   onMouseLeave,
+  disableHover, // hide extra and also don't assign classname=hoverable
   ...props
 }) => {
-  const [imgSrc, setImgSrc] = useState(placeholderSrc || src);
+  const [imgSrc, setImgSrc] = useState(src || placeholderSrc);
   const [isHovering, setIsHovering] = !_.isEmpty(extra) ? useState(false) : [false, null];
 
-  useEffect(() => {
-    const img = new Image();
+  // useEffect(() => {
+  //   const img = new Image();
 
-    img.src = src;
+  //   img.src = src;
 
-    img.onload = () => {
-      setImgSrc(src);
-    };
-  }, [src]);
+  //   img.onload = () => {
+  //     setImgSrc(src);
+  //   };
+  // }, [src]);
 
@@ -39,8 +40,6 @@ const styles = {
       position: 'relative',
-      width: 'fit-content',
-      height: 'fit-content',
       ...wrapperStyle
     },
     extra: (sideKey) => {
-      const extraStyle = extraStyles[sideKey] || {};
+      const extraStyle = _.get(extraStyles, sideKey, {});
       const sides = _.split(_.kebabCase(sideKey), '-'); //HINT sides will be like ['top', 'left'] so we can support topLeft, topRight, bottomLeft, bottomRight
@@ -50,5 +49,6 @@
         position: 'absolute',
+        zIndex: 2,
         [sides[0]]: K.spacing,
         [sides[1]]: K.spacing,
-        ...(isHovering
+        ...(isHovering && !disableHover
           ? {pointerEvents: 'auto', visibility: 'visible'}
@@ -62,7 +62,8 @@ : {pointerEvents: 'none', visibility: 'hidden'}
       display: 'block',
-      flex: 1,
-      objectFit: 'none',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
       objectPosition: 'center',
       transition: 'filter 0.5s',
-      ...(isHovering
+      ...(isHovering && !disableHover
         ? {filter: 'brightness(80%)'}
@@ -69,0 +70,0 @@ : {filter: 'none'}

src/components/nav-menu.js

@@ -17,2 +17,3 @@ import React, {useState} from 'react';
       position: 'relative',
+      zIndex: 2,
     },
@@ -19,0 +20,0 @@ contentContainer: {

src/components/search-bar.js

@@ -30,3 +30,4 @@ import React, {useState, useRef} from 'react';
       position: 'absolute',
-      zIndex: 1,
+      top: 40,
+      zIndex: 3,
       backgroundColor: K.colors.base,
@@ -33,0 +34,0 @@ display: 'flex',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3739432

increased by0.03%

Number of package files

61

increased by7.02%

Lines of code

40888

increased by0.01%

Number of medium supply chain risk alerts

4

decreased by-20%

No dependency changes