labsense-ui-kit 1.4.2 → 1.4.3

package/dist/Dropdown/MultiSelectDropdown.d.ts

@@ -58,6 +58,7 @@ interface MultiSelectDropdownProps {
     NoOptionsText?: string;
     selectAllOption?: boolean;
     selectAllLabel?: string;
+    dropdownPosition?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
 }
 declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
 export default MultiSelectDropdown;

package/dist/index.js

@@ -8562,7 +8562,7 @@ var LabelText = styled__default.div(_templateObject5$4 || (_templateObject5$4 =
     theme = _ref21.theme;
   return $labelColor || theme.vms.text.medium;
 });
-var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), function (_ref22) {
+var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n  \n  ", "\n"])), function (_ref22) {
   var theme = _ref22.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref23) {
@@ -8575,12 +8575,30 @@ var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4
   var $menuBackground = _ref25.$menuBackground,
     theme = _ref25.theme;
   return $menuBackground || theme.vms.accent.light_2;
+}, function (_ref26) {
+  var $position = _ref26.$position;
+  switch ($position) {
+    case 'topLeft':
+      return "\n          bottom: calc(100% + 8px);\n          left: 0;\n          top: auto;\n        ";
+    case 'topCenter':
+      return "\n          bottom: calc(100% + 8px);\n          left: 50%;\n          transform: translateX(-50%);\n          top: auto;\n        ";
+    case 'topRight':
+      return "\n          bottom: calc(100% + 8px);\n          right: 0;\n          top: auto;\n        ";
+    case 'bottomLeft':
+      return "\n          top: calc(100% + 8px);\n          left: 0;\n          bottom: auto;\n        ";
+    case 'bottomCenter':
+      return "\n          top: calc(100% + 8px);\n          left: 50%;\n          transform: translateX(-50%);\n          bottom: auto;\n        ";
+    case 'bottomRight':
+      return "\n          top: calc(100% + 8px);\n          right: 0;\n          bottom: auto;\n        ";
+    default:
+      return '';
+  }
 });
 var SelectedOptionsWrapper = styled__default.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
-var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref26) {
-  var $selectedOptionBackground = _ref26.$selectedOptionBackground,
-    $disabled = _ref26.$disabled,
-    theme = _ref26.theme;
+var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref27) {
+  var $selectedOptionBackground = _ref27.$selectedOptionBackground,
+    $disabled = _ref27.$disabled,
+    theme = _ref27.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8601,9 +8619,9 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref27) {
-  var $selectedOptionColor = _ref27.$selectedOptionColor,
-    theme = _ref27.theme;
+}, function (_ref28) {
+  var $selectedOptionColor = _ref28.$selectedOptionColor,
+    theme = _ref28.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8625,88 +8643,94 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
       return $selectedOptionColor;
   }
 });
-var RemoveIcon = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref28) {
-  var $disabled = _ref28.$disabled;
+var RemoveIcon = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref29) {
+  var $disabled = _ref29.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref29) {
-  var removeIconBackground = _ref29.removeIconBackground,
-    $type = _ref29.$type,
-    theme = _ref29.theme;
-  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
 }, function (_ref30) {
-  var $disabled = _ref30.$disabled;
+  var removeIconBackground = _ref30.removeIconBackground,
+    $type = _ref30.$type,
+    theme = _ref30.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
+}, function (_ref31) {
+  var $disabled = _ref31.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
 var TextWrapper = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
-var Asterisk = styled__default.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref31) {
-  var theme = _ref31.theme;
+var Asterisk = styled__default.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref32) {
+  var theme = _ref32.theme;
   return theme.vms["default"].error;
 });
-var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
-  var title = _ref32.title,
-    titleWeight = _ref32.titleWeight,
-    titleSize = _ref32.titleSize,
-    titleColor = _ref32.titleColor,
-    _ref32$labelText = _ref32.labelText,
-    labelText = _ref32$labelText === void 0 ? 'Select Cameras' : _ref32$labelText,
-    labelStyle = _ref32.labelStyle,
-    labelColor = _ref32.labelColor,
-    _ref32$replaceLabel = _ref32.replaceLabel,
-    replaceLabel = _ref32$replaceLabel === void 0 ? true : _ref32$replaceLabel,
-    options = _ref32.options,
-    width = _ref32.width,
-    optionWidth = _ref32.optionWidth,
-    height = _ref32.height,
-    placeholder = _ref32.placeholder,
-    border = _ref32.border,
-    background = _ref32.background,
-    selectedOptionBackground = _ref32.selectedOptionBackground,
-    selectedOptionColor = _ref32.selectedOptionColor,
-    menuBackground = _ref32.menuBackground,
-    optionsBorderRadius = _ref32.optionsBorderRadius,
-    borderRadius = _ref32.borderRadius,
-    removeIconBackground = _ref32.removeIconBackground,
-    handleSelectChange = _ref32.handleSelectChange,
-    selectedOptions = _ref32.selectedOptions,
-    placeholderColor = _ref32.placeholderColor,
-    optionBorder = _ref32.optionBorder,
-    optionColor = _ref32.optionColor,
-    searchIcon = _ref32.searchIcon,
-    searchbarTextColor = _ref32.searchbarTextColor,
-    searchBoxBackground = _ref32.searchBoxBackground,
-    searchBoxBorder = _ref32.searchBoxBorder,
-    searchBoxBorderRadius = _ref32.searchBoxBorderRadius,
-    size = _ref32.size,
-    removeIcon = _ref32.removeIcon,
-    type = _ref32.type,
-    icon = _ref32.icon,
-    _ref32$disabled = _ref32.disabled,
-    disabled = _ref32$disabled === void 0 ? false : _ref32$disabled,
-    _ref32$required = _ref32.required,
-    required = _ref32$required === void 0 ? false : _ref32$required,
-    _ref32$searchBox = _ref32.searchBox,
-    searchBox = _ref32$searchBox === void 0 ? true : _ref32$searchBox,
-    _ref32$NoOptionsText = _ref32.NoOptionsText,
-    NoOptionsText = _ref32$NoOptionsText === void 0 ? 'No Options Available' : _ref32$NoOptionsText,
-    _ref32$selectAllOptio = _ref32.selectAllOption,
-    selectAllOption = _ref32$selectAllOptio === void 0 ? false : _ref32$selectAllOptio,
-    _ref32$selectAllLabel = _ref32.selectAllLabel,
-    selectAllLabel = _ref32$selectAllLabel === void 0 ? 'Select All' : _ref32$selectAllLabel;
+var MultiSelectDropdown = function MultiSelectDropdown(_ref33) {
+  var title = _ref33.title,
+    titleWeight = _ref33.titleWeight,
+    titleSize = _ref33.titleSize,
+    titleColor = _ref33.titleColor,
+    _ref33$labelText = _ref33.labelText,
+    labelText = _ref33$labelText === void 0 ? 'Select Cameras' : _ref33$labelText,
+    labelStyle = _ref33.labelStyle,
+    labelColor = _ref33.labelColor,
+    _ref33$replaceLabel = _ref33.replaceLabel,
+    replaceLabel = _ref33$replaceLabel === void 0 ? true : _ref33$replaceLabel,
+    options = _ref33.options,
+    width = _ref33.width,
+    optionWidth = _ref33.optionWidth,
+    height = _ref33.height,
+    placeholder = _ref33.placeholder,
+    border = _ref33.border,
+    background = _ref33.background,
+    selectedOptionBackground = _ref33.selectedOptionBackground,
+    selectedOptionColor = _ref33.selectedOptionColor,
+    menuBackground = _ref33.menuBackground,
+    optionsBorderRadius = _ref33.optionsBorderRadius,
+    borderRadius = _ref33.borderRadius,
+    removeIconBackground = _ref33.removeIconBackground,
+    handleSelectChange = _ref33.handleSelectChange,
+    selectedOptions = _ref33.selectedOptions,
+    placeholderColor = _ref33.placeholderColor,
+    optionBorder = _ref33.optionBorder,
+    optionColor = _ref33.optionColor,
+    searchIcon = _ref33.searchIcon,
+    searchbarTextColor = _ref33.searchbarTextColor,
+    searchBoxBackground = _ref33.searchBoxBackground,
+    searchBoxBorder = _ref33.searchBoxBorder,
+    searchBoxBorderRadius = _ref33.searchBoxBorderRadius,
+    size = _ref33.size,
+    removeIcon = _ref33.removeIcon,
+    type = _ref33.type,
+    icon = _ref33.icon,
+    _ref33$disabled = _ref33.disabled,
+    disabled = _ref33$disabled === void 0 ? false : _ref33$disabled,
+    _ref33$required = _ref33.required,
+    required = _ref33$required === void 0 ? false : _ref33$required,
+    _ref33$searchBox = _ref33.searchBox,
+    searchBox = _ref33$searchBox === void 0 ? true : _ref33$searchBox,
+    _ref33$NoOptionsText = _ref33.NoOptionsText,
+    NoOptionsText = _ref33$NoOptionsText === void 0 ? 'No Options Available' : _ref33$NoOptionsText,
+    _ref33$selectAllOptio = _ref33.selectAllOption,
+    selectAllOption = _ref33$selectAllOptio === void 0 ? false : _ref33$selectAllOptio,
+    _ref33$selectAllLabel = _ref33.selectAllLabel,
+    selectAllLabel = _ref33$selectAllLabel === void 0 ? 'Select All' : _ref33$selectAllLabel,
+    dropdownPosition = _ref33.dropdownPosition;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
     setDropUp = _useState[1];
-  var _useState2 = React.useState(false),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+  var _useState2 = React.useState('left'),
+    horizontalAlign = _useState2[0],
+    setHorizontalAlign = _useState2[1];
+  var _useState3 = React.useState(false),
+    isOpen = _useState3[0],
+    setIsOpen = _useState3[1];
   var dropdownRef = React.useRef(null);
   var dropdownButtonRef = React.useRef(null);
+  var dropdownMenuRef = React.useRef(null);
   var toggleDropdown = function toggleDropdown() {
     if (disabled) return;
     var refToUse = dropdownRef.current;
-    if (refToUse) {
+    if (refToUse && !dropdownPosition) {
       var rect = refToUse.getBoundingClientRect();
       var windowHeight = window.innerHeight;
+      var windowWidth = window.innerWidth;
       var spaceBelow = windowHeight - rect.bottom;
       var spaceAbove = rect.top;
       var dropdownHeight = 156;
@@ -8715,6 +8739,19 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
       } else {
         setDropUp(false);
       }
+      var estimatedDropdownWidth = optionWidth ? parseInt(optionWidth) : 200;
+      var spaceRight = windowWidth - rect.left;
+      var spaceLeft = rect.right;
+      var buttonWidth = rect.width;
+      if (spaceRight >= estimatedDropdownWidth) {
+        setHorizontalAlign('left');
+      } else if (spaceLeft >= estimatedDropdownWidth) {
+        setHorizontalAlign('right');
+      } else if (rect.left + buttonWidth / 2 >= estimatedDropdownWidth / 2 && windowWidth - (rect.left + buttonWidth / 2) >= estimatedDropdownWidth / 2) {
+        setHorizontalAlign('center');
+      } else {
+        setHorizontalAlign('left');
+      }
     }
     setIsOpen(function (prev) {
       return !prev;
@@ -8854,12 +8891,17 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
     weight: '2px',
     color: themeColors.vms.text.medium
   })), isOpen && React__default.createElement(DropdownMenu, {
+    ref: dropdownMenuRef,
     "$width": optionWidth,
     "$menuBackground": menuBackground || themeColors.vms.text.white,
     "$optionsBorderRadius": optionsBorderRadius,
-    style: {
+    "$position": dropdownPosition,
+    style: dropdownPosition ? undefined : {
       top: dropUp ? 'auto' : 'calc(100% + 8px)',
-      bottom: dropUp ? 'calc(100% + 8px)' : 'auto'
+      bottom: dropUp ? 'calc(100% + 8px)' : 'auto',
+      left: horizontalAlign === 'left' ? '0' : horizontalAlign === 'center' ? '50%' : 'auto',
+      right: horizontalAlign === 'right' ? '0' : 'auto',
+      transform: horizontalAlign === 'center' ? 'translateX(-50%)' : 'none'
     }
   }, React__default.createElement(OptionComponent, {
     options: computedOptions,