@highlight-ui/utils-hooks - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

package.json

 {
   "name": "@highlight-ui/utils-hooks",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "author": "Personio GmbH & Co. KG",
@@ -26,4 +26,4 @@ "main": "dist/cjs/index.js",
     "@highlight-ui/configs-base-tsconfig": "^3.1.1",
-    "@highlight-ui/configs-scripts": "^3.1.2",
-    "@highlight-ui/utils-commons": "^2.1.1",
+    "@highlight-ui/configs-scripts": "^3.2.0",
+    "@highlight-ui/utils-commons": "^2.1.2",
     "@popperjs/core": "^2.9.2",
@@ -46,2 +46,3 @@ "@testing-library/dom": "^8.6.0",
   "dependencies": {
+    "@floating-ui/react-dom-interactions": "0.11.0",
     "@popperjs/core": "^2.9.2",
@@ -52,3 +53,3 @@ "@use-it/event-listener": "^0.1.6",
   },
-  "gitHead": "513522a2608f3efe03abb52850594ac407912bfa"
+  "gitHead": "97d7d06ba8c1bfcc1dfb3b4b5549a615bf95576a"
 }

README.md

@@ -12,2 +12,3 @@ # `@highlight-ui/utils-hooks`
 - [useAutoPositioner](#useautopositioner)
+- [useAutoPosition](#useautoposition)
 - [useForkRef](#useforkref)
@@ -20,2 +21,3 @@ - [useClickOutside](#useclickoutside)
 ## useAutoPositioner
+*This component is deprecated*  
 
@@ -51,2 +53,117 @@ A wrapper for the [usePopper](https://popper.js.org/react-popper/v2/hook/) from
 
+## useAutoPosition
+
+Calculating position of "floating" elements like tooltips, popovers, dropdowns, menus, and more.
+
+### Usage
+
+Accepts a config as an argument and returns the `styles`, `triggerRef` and `floatRef` functions.
+
+``` ts
+type Options = {
+  // Position of the element to the trigger element. Default: bottom-start
+  placement: Placement;
+  // Automatic position based on the space around the trigger. This overrides flip and placement options. Default: Disabled
+  auto: AutoConfig | null | false;
+  // Flip position if there is not enough space on the placement area: Default: Enabled
+  flip: FlipConfig | null | false;
+  // Offset from the trigger element: Default: Enabled
+  offset: OffsetConfig | null | false;
+};
+```
+
+```jsx
+import { useAutoPosition } from '@highlight-ui/utils-hooks';
+
+const MyComponent = () => {
+  const {
+    triggerRef,
+    floatRef,
+    styles,
+  } = useAutoPosition();
+
+  return (
+    <>
+      <div ref={triggerRef}>Trigger</div>
+      <div ref={floatRef} style={...styles}>
+        Floating tooltip
+      </div>
+    </>
+  )
+};
+```
+  
+## useAutoIntegration
+
+Wrap above useAutoPosition with interaction controls.
+Based on the config updated open property
+
+### Usage
+
+Accepts a config as an argument and returns the `styles`, `open`, `getTriggerProps`, `getFloatProps`, `triggerRef` and `floatRef` functions.
+
+``` ts
+type Options = AutoPositionOptions & {
+  // Auto open on hover. Default: Enabled
+  hover?: HoverConfig;
+  // Auto open on click.  Default: Disabled
+  click?: EnableConfig;
+  // Auto open on focus.  Default: Enabled
+  focus?: EnableConfig;
+  // Set role to automatically add a11y params to floater. Default: Disabled
+  role?: RoleConfig;
+  // Auto close.  Default: Enabled
+  dimish?: EnableConfig;
+};
+```
+
+```jsx
+import { useAutoInteractions } from '@highlight-ui/utils-hooks';
+
+const MyComponent = () => {
+  const {
+    triggerRef,
+    floatRef,
+    styles,
+    open,
+    getTriggerProps,
+    getFloatProps
+  } = useAutoInteractions();
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        // Functions like onClick, onHover, ... are at risk of being overriden
+        // to prevent that we add then into the getTriggerProps that will join
+        // the props/callbacks if it needs/uses it
+        {...getTriggerProps({
+          onClick: () => {
+            console.log('clicked')
+          }
+        })}>
+          Trigger
+      </div>
+      {open &&
+        <div
+          ref={floatRef}
+          style={...styles}
+          // Functions like onClick, onHover, ... are at risk of being overriden
+          // to prevent that we add then into the getTriggerProps that will join
+          // the props/callbacks if it needs/uses it
+          {...getFloatProps({
+            onClick: () => {
+              console.log('clicked')
+            } 
+          })}
+      >
+        Floating tooltip
+      </div>}
+    </>
+  )
+};
+```
+
+   
+
 ## useForkRef
@@ -53,0 +170,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Improved metrics

Total package byte prevSize

967445

increased by259.07%

Number of package files

23

increased by21.05%

Lines of code

7445

increased by227.83%

Number of lines in readme file

237

increased by97.5%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low supply chain risk alerts

9

increased by800%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• + Added@floating-ui/react-dom-interactions@0.11.0

• + Added@floating-ui/core@1.6.8(transitive)

• + Added@floating-ui/dom@1.6.12(transitive)

• + Added@floating-ui/react-dom@1.3.0(transitive)

• + Added@floating-ui/react-dom-interactions@0.11.0(transitive)

• + Added@floating-ui/utils@0.2.8(transitive)

• + Addedaria-hidden@1.2.4(transitive)

• + Addedtslib@2.8.1(transitive)