@highlight-ui/action-bar - npm Package Compare versions

Comparing version 5.0.20 to 5.1.0

dist/cjs/index.js

@@ -44,8 +44,9 @@ 'use strict';
 var styles = {
-  "actionBar": "ActionBar-module__ubLYJLqB__v5-0-20",
-  "inline": "ActionBar-module__e52E4-fm__v5-0-20",
-  "fullWidth": "ActionBar-module__e20jMPMr__v5-0-20",
-  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-0-20",
-  "secondaryAction": "ActionBar-module__477Xyecj__v5-0-20"
+  "actionBar": "ActionBar-module__ubLYJLqB__v5-1-0",
+  "inline": "ActionBar-module__e52E4-fm__v5-1-0",
+  "fullWidth": "ActionBar-module__e20jMPMr__v5-1-0",
+  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-1-0",
+  "secondaryAction": "ActionBar-module__477Xyecj__v5-1-0"
 };
+var GLOBAL_SIDEBAR_COLLAPSED_WIDTH = 64;
 var ActionBar = function (_a) {
@@ -57,6 +58,28 @@ var primaryAction = _a.primaryAction,
     className = _a.className,
-    variant = _a.variant;
-  var variantClassName = variant === 'full-width' ? styles.fullWidth : styles.inline;
+    variant = _a.variant,
+    elementQuerySelector = _a.elementQuerySelector;
+  var _b = React.useState(GLOBAL_SIDEBAR_COLLAPSED_WIDTH),
+    elementWidth = _b[0],
+    setElementWidth = _b[1];
+  React.useEffect(function () {
+    var selectedElement = elementQuerySelector && window.document.querySelector(elementQuerySelector);
+    if (!selectedElement) return;
+    var onElementTransition = function () {
+      var _a;
+      setElementWidth(((_a = selectedElement.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.width) || GLOBAL_SIDEBAR_COLLAPSED_WIDTH);
+    };
+    onElementTransition();
+    selectedElement.addEventListener('transitionend', onElementTransition);
+    return function () {
+      window.document.removeEventListener('transitionend', onElementTransition);
+    };
+  }, [elementQuerySelector, variant]);
+  var isFullWidth = variant === 'full-width';
+  var variantClassName = isFullWidth ? styles.fullWidth : styles.inline;
   return React__default["default"].createElement("div", __assign({
     className: classnames__default["default"](styles.actionBar, variantClassName, className)
+  }, isFullWidth && {
+    style: {
+      width: "calc(100% - " + (elementWidth !== null && elementWidth !== void 0 ? elementWidth : GLOBAL_SIDEBAR_COLLAPSED_WIDTH) + "px)"
+    }
   }, utilsCommons.parseMetadata(metadata)), React__default["default"].createElement("div", {
@@ -63,0 +86,0 @@ className: styles.centerAlignedFlex

dist/cjs/src/ActionBar.d.ts

@@ -14,3 +14,3 @@ import React from 'react';
     className?: string;
-    /** When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` of its container's width. */
+    /** When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` (unless used in combination with `elementQuerySelector` prop - check for more info) of its container's width. */
     variant: 'full-width' | 'inline';
@@ -21,4 +21,6 @@ /** Allows passing props to the primary action button */
     secondaryAction?: ActionButtonProps;
+    /** Used only when `variant="full-width"` is selected. HTML element with transitionend addEventListener which querySelector calculates width from, example: '[data-test-id="navsidebar-container"]'.  */
+    elementQuerySelector?: string;
 }>;
-declare const ActionBar: ({ primaryAction, secondaryAction, information, metadata, className, variant, }: ActionBarProps) => JSX.Element;
+declare const ActionBar: ({ primaryAction, secondaryAction, information, metadata, className, variant, elementQuerySelector, }: ActionBarProps) => JSX.Element;
 export default ActionBar;

dist/esm/index.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
@@ -32,8 +32,9 @@ import { parseMetadata } from '@highlight-ui/utils-commons';
 var styles = {
-  "actionBar": "ActionBar-module__ubLYJLqB__v5-0-20",
-  "inline": "ActionBar-module__e52E4-fm__v5-0-20",
-  "fullWidth": "ActionBar-module__e20jMPMr__v5-0-20",
-  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-0-20",
-  "secondaryAction": "ActionBar-module__477Xyecj__v5-0-20"
+  "actionBar": "ActionBar-module__ubLYJLqB__v5-1-0",
+  "inline": "ActionBar-module__e52E4-fm__v5-1-0",
+  "fullWidth": "ActionBar-module__e20jMPMr__v5-1-0",
+  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-1-0",
+  "secondaryAction": "ActionBar-module__477Xyecj__v5-1-0"
 };
+var GLOBAL_SIDEBAR_COLLAPSED_WIDTH = 64;
 var ActionBar = function (_a) {
@@ -45,6 +46,28 @@ var primaryAction = _a.primaryAction,
     className = _a.className,
-    variant = _a.variant;
-  var variantClassName = variant === 'full-width' ? styles.fullWidth : styles.inline;
+    variant = _a.variant,
+    elementQuerySelector = _a.elementQuerySelector;
+  var _b = useState(GLOBAL_SIDEBAR_COLLAPSED_WIDTH),
+    elementWidth = _b[0],
+    setElementWidth = _b[1];
+  useEffect(function () {
+    var selectedElement = elementQuerySelector && window.document.querySelector(elementQuerySelector);
+    if (!selectedElement) return;
+    var onElementTransition = function () {
+      var _a;
+      setElementWidth(((_a = selectedElement.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.width) || GLOBAL_SIDEBAR_COLLAPSED_WIDTH);
+    };
+    onElementTransition();
+    selectedElement.addEventListener('transitionend', onElementTransition);
+    return function () {
+      window.document.removeEventListener('transitionend', onElementTransition);
+    };
+  }, [elementQuerySelector, variant]);
+  var isFullWidth = variant === 'full-width';
+  var variantClassName = isFullWidth ? styles.fullWidth : styles.inline;
   return /*#__PURE__*/React.createElement("div", __assign({
     className: classnames(styles.actionBar, variantClassName, className)
+  }, isFullWidth && {
+    style: {
+      width: "calc(100% - " + (elementWidth !== null && elementWidth !== void 0 ? elementWidth : GLOBAL_SIDEBAR_COLLAPSED_WIDTH) + "px)"
+    }
   }, parseMetadata(metadata)), /*#__PURE__*/React.createElement("div", {
@@ -51,0 +74,0 @@ className: styles.centerAlignedFlex

dist/esm/src/ActionBar.d.ts

@@ -14,3 +14,3 @@ import React from 'react';
     className?: string;
-    /** When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` of its container's width. */
+    /** When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` (unless used in combination with `elementQuerySelector` prop - check for more info) of its container's width. */
     variant: 'full-width' | 'inline';
@@ -21,4 +21,6 @@ /** Allows passing props to the primary action button */
     secondaryAction?: ActionButtonProps;
+    /** Used only when `variant="full-width"` is selected. HTML element with transitionend addEventListener which querySelector calculates width from, example: '[data-test-id="navsidebar-container"]'.  */
+    elementQuerySelector?: string;
 }>;
-declare const ActionBar: ({ primaryAction, secondaryAction, information, metadata, className, variant, }: ActionBarProps) => JSX.Element;
+declare const ActionBar: ({ primaryAction, secondaryAction, information, metadata, className, variant, elementQuerySelector, }: ActionBarProps) => JSX.Element;
 export default ActionBar;

package.json

 {
   "name": "@highlight-ui/action-bar",
-  "version": "5.0.20",
+  "version": "5.1.0",
   "author": "Personio GmbH & Co. KG",
@@ -52,3 +52,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "c50200cf932ef101808e3bac4da4478eb67d98bf"
+  "gitHead": "7e3600ae984068c91b3c34b6424c6cb162dd16e7"
 }

README.md

@@ -60,8 +60,9 @@ [![npm](https://img.shields.io/npm/v/@highlight-ui/action-bar)](https://www.npmjs.com/package/@highlight-ui/action-bar)
 
-| Prop              | Type                    | Required | Default  | Description                                                                                                                                                                                                                     |
-| :---------------- | :---------------------- | :------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `variant`         | `'inline', 'fullwidth'` | Yes      | `inline` | When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` of its container's width. |
-| `primaryAction`   | `ActionButtonProps`     | Yes      |          | Allows passing props to the primary action button                                                                                                                                                                               |
-| `secondaryAction` | `ActionButtonProps`     | No       |          | Allows passing props to the secondary action button                                                                                                                                                                             |
-| `information`     | `React.ReactNode`       | No       |          | Allows rendering any element on the left side of the ActionBar. If specified, the action buttons will be aligned to the right.                                                                                                  |
+| Prop                   | Type                    | Required | Default  | Description                                                                                                                                                                                                                                                                                                         |
+| :--------------------- | :---------------------- | :------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant`              | `'inline', 'fullwidth'` | Yes      | `inline` | When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` (unless used in combination with `elementQuerySelector` prop - check for more info) of its container's width. |
+| `primaryAction`        | `ActionButtonProps`     | Yes      |          | Allows passing props to the primary action button                                                                                                                                                                                                                                                                   |
+| `secondaryAction`      | `ActionButtonProps`     | No       |          | Allows passing props to the secondary action button                                                                                                                                                                                                                                                                 |
+| `information`          | `React.ReactNode`       | No       |          | Allows rendering any element on the left side of the ActionBar. If specified, the action buttons will be aligned to the right.                                                                                                                                                                                      |
+| `elementQuerySelector` | `string`                | No       |          | Used only when `variant="full-width"` is selected. HTML element with transitionend addEventListener which querySelector calculates width from, example: `[data-test-id="navsidebar-container"]`.                                                                                                                    |
 
@@ -68,0 +69,0 @@ ### Custom types 🔠

No alert changes

Improved metrics

Total package byte prevSize

61179

increased by16.72%

Lines of code

285

increased by22.32%

Number of lines in readme file

79

increased by1.28%

No dependency changes