labsense-ui-kit 1.4.22 → 1.4.24

package/dist/Dropdown/ButtonDropdown.d.ts

@@ -11,6 +11,7 @@ interface ButtonDropdownProps {
     variant?: 'primary' | 'outline-primary' | 'secondary';
     placeholder?: string;
     disabled?: boolean;
+    width?: string;
 }
 declare const ButtonDropdown: React.FC<ButtonDropdownProps>;
 export default ButtonDropdown;

package/dist/index.js

@@ -9932,17 +9932,52 @@ var ButtonDropdown = function ButtonDropdown(_ref) {
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? 'Select Option' : _ref$placeholder,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    width = _ref.width;
   var _useState = React.useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
-  var _useState2 = React.useState(initialValue || ''),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
+  var _useState2 = React.useState(false),
+    dropUp = _useState2[0],
+    setDropUp = _useState2[1];
+  var _useState3 = React.useState('left'),
+    dropdownPosition = _useState3[0],
+    setDropdownPosition = _useState3[1];
+  var _useState4 = React.useState(initialValue || ''),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
   var ref = React.useRef(null);
   useClickOutside(ref, function () {
     return setIsOpen(false);
   });
+  var toggleDropdown = function toggleDropdown() {
+    if (ref.current) {
+      var rect = ref.current.getBoundingClientRect();
+      var windowHeight = window.innerHeight;
+      var windowWidth = window.innerWidth;
+      var spaceBelow = windowHeight - rect.bottom;
+      var spaceAbove = rect.top;
+      var dropdownHeight = 95;
+      if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+        setDropUp(true);
+      } else {
+        setDropUp(false);
+      }
+      var dropdownWidth = rect.width;
+      var spaceRight = windowWidth - rect.left;
+      var spaceLeft = rect.right;
+      if (spaceRight < dropdownWidth && spaceLeft > dropdownWidth) {
+        setDropdownPosition('right');
+      } else if (rect.left < dropdownWidth / 2 && windowWidth - rect.right < dropdownWidth / 2) {
+        setDropdownPosition('center');
+      } else {
+        setDropdownPosition('left');
+      }
+    }
+    setIsOpen(function (prev) {
+      return !prev;
+    });
+  };
   var handleSelect = function handleSelect(value, onClick) {
     setSelected(value);
     onClick();
@@ -9953,21 +9988,22 @@ var ButtonDropdown = function ButtonDropdown(_ref) {
   })) === null || _options$find === void 0 ? void 0 : _options$find.label) || placeholder;
   return React__default.createElement(Container, {
     "$position": 'relative',
-    ref: ref
+    ref: ref,
+    "$width": width
   }, React__default.createElement(ButtonComponent, {
     text: selectedLabel,
     icon: isOpen ? 'UpArrow' : 'DownArrow',
     size: size,
     variant: variant,
     disabled: disabled,
-    onClick: function onClick() {
-      return setIsOpen(function (prev) {
-        return !prev;
-      });
-    }
+    onClick: toggleDropdown,
+    buttonWidth: width
   }), isOpen && React__default.createElement(DropdownMenu$1, {
-    "$top": '40px',
-    "$optionsAvailable": Option.length > 0
+    "$width": width,
+    "$top": dropUp ? 'auto' : '126%',
+    "$bottom": dropUp ? '126%' : 'auto',
+    "$optionsAvailable": options.length > 0,
+    "$dropDownPosition": dropdownPosition
   }, options.map(function (option) {
     return React__default.createElement(Options, {
       key: option.value,
@@ -10549,6 +10585,7 @@ var TextField = function TextField(_ref28) {
       onClick: toggleDropdown,
       onChange: handleTimeInput,
       "$disabled": isDisabled,
+      disabled: isDisabled,
       "$size": size,
       "$color": color || themeColors.vms.text.dark,
       "$background": background || themeColors.vms["default"].tertiary,
@@ -10620,6 +10657,7 @@ var TextField = function TextField(_ref28) {
     value: inputValue,
     placeholder: placeholder,
     "$disabled": isDisabled,
+    disabled: isDisabled,
     onChange: onChange,
     "$size": size,
     "$color": color || themeColors.vms.text.dark,