labsense-ui-kit 1.2.86 → 1.2.88

package/dist/Dropdown/SelectOption.d.ts

@@ -14,6 +14,7 @@ export declare const DropdownMenu: import("styled-components/dist/types").IStyle
     $top?: string | undefined;
     $bottom?: string | undefined;
     $optionsAvailable: boolean;
+    $dropDownPosition?: "center" | "left" | "right" | undefined;
 }>> & string;
 interface Option {
     label: string;
@@ -73,6 +74,7 @@ interface SelectOption {
         gap: string;
         node: React.ReactNode;
     };
+    dropDownPosition?: 'left' | 'center' | 'right';
 }
 declare const SelectOption: React.FC<SelectOption>;
 export default SelectOption;

package/dist/index.js

@@ -7182,6 +7182,7 @@ var OptionComponent = function OptionComponent(_ref9) {
     _ref9$searchBox = _ref9.searchBox,
     searchBox = _ref9$searchBox === void 0 ? true : _ref9$searchBox,
     NoOptionsText = _ref9.NoOptionsText;
+  var themeColors = useTheme();
   var _useState = React.useState(''),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -7217,7 +7218,7 @@ var OptionComponent = function OptionComponent(_ref9) {
     placeholder: placeholder,
     value: searchQuery,
     onChange: handleSearchChange,
-    "$inputColor": searchbarTextColor,
+    "$inputColor": searchbarTextColor || themeColors.vms.text.white,
     "$placeholderColor": placeholderColor
   })), React__default.createElement(OptionContainer, null, SortedOptions.length > 0 ? SortedOptions.map(function (option, id) {
     return React__default.createElement(OptionItem, {
@@ -7783,7 +7784,7 @@ var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5
   return $disabled ? theme.vms.text.medium : $color || theme.vms.text.medium;
 });
 var NoOptions = styled__default(Span)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 12px;\n  font-size: 14px;\n  font-weight: 400;\n"])));
-var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden; \n  position: absolute;\n  z-index: 1;\n  ", "\n  ", "\n  z-index: 2;\n"])), function (_ref24) {
+var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  position: absolute;\n  z-index: 2;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref24) {
   var theme = _ref24.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref25) {
@@ -7802,79 +7803,91 @@ var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7
 }, function (_ref29) {
   var $bottom = _ref29.$bottom;
   return $bottom && "bottom: " + $bottom + ";";
+}, function (_ref30) {
+  var $dropDownPosition = _ref30.$dropDownPosition;
+  switch ($dropDownPosition) {
+    case 'center':
+      return "\n          left: 50%;\n          transform: translateX(-50%);\n        ";
+    case 'right':
+      return "\n          right: 0;\n          left: auto;\n        ";
+    default:
+      return "\n          left: 0;\n        ";
+  }
 });
 var OptionsWrapper = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  max-height: 150px; \n  overflow-y: auto;\n  scrollbar-width: thin;\n  width: 100%;\n"])));
-var SearchContainer$1 = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 10px 12px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  z-index: 10; \n"])), function (_ref30) {
-  var $background = _ref30.$background,
-    theme = _ref30.theme;
+var SearchContainer$1 = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 10px 12px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  z-index: 10; \n"])), function (_ref31) {
+  var $background = _ref31.$background,
+    theme = _ref31.theme;
   return $background || theme.vms.accent.light_2;
-}, function (_ref31) {
-  var $border = _ref31.$border;
-  return $border || 'none';
 }, function (_ref32) {
-  var theme = _ref32.theme;
-  return "1px solid " + theme.vms.border.light;
+  var $border = _ref32.$border;
+  return $border || 'none';
 }, function (_ref33) {
-  var $borderRadius = _ref33.$borderRadius;
+  var theme = _ref33.theme;
+  return "1px solid " + theme.vms.border.light;
+}, function (_ref34) {
+  var $borderRadius = _ref34.$borderRadius;
   return $borderRadius || '8px 8px 0 0';
 });
-var SearchBar$1 = styled__default.input(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: transparent;\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref34) {
-  var $inputColor = _ref34.$inputColor,
-    theme = _ref34.theme;
-  return $inputColor || theme.vms.text.medium;
-}, function (_ref35) {
-  var $placeholderColor = _ref35.$placeholderColor,
+var SearchBar$1 = styled__default.input(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: transparent;\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref35) {
+  var $inputColor = _ref35.$inputColor,
     theme = _ref35.theme;
+  return $inputColor || theme.vms.text.medium;
+}, function (_ref36) {
+  var $placeholderColor = _ref36.$placeholderColor,
+    theme = _ref36.theme;
   return $placeholderColor || theme.vms.text.light;
 });
-var SelectOption = function SelectOption(_ref36) {
+var SelectOption = function SelectOption(_ref37) {
   var _options$find;
-  var title = _ref36.title,
-    titlecolor = _ref36.titlecolor,
-    titleWeight = _ref36.titleWeight,
-    options = _ref36.options,
-    value = _ref36.value,
-    onChange = _ref36.onChange,
-    _ref36$disabled = _ref36.disabled,
-    disabled = _ref36$disabled === void 0 ? false : _ref36$disabled,
-    size = _ref36.size,
-    width = _ref36.width,
-    _ref36$labelText = _ref36.labelText,
-    labelText = _ref36$labelText === void 0 ? 'Select' : _ref36$labelText,
-    border = _ref36.border,
-    background = _ref36.background,
-    _ref36$padding = _ref36.padding,
-    padding = _ref36$padding === void 0 ? '0px' : _ref36$padding,
-    borderRadius = _ref36.borderRadius,
-    optionColor = _ref36.optionColor,
-    optionFontSize = _ref36.optionFontSize,
-    optionFontWeight = _ref36.optionFontWeight,
-    optionBackgroundColor = _ref36.optionBackgroundColor,
-    menuBackground = _ref36.menuBackground,
-    optionsBorderRadius = _ref36.optionsBorderRadius,
-    color = _ref36.color,
-    required = _ref36.required,
-    _ref36$NoOptionsText = _ref36.NoOptionsText,
-    NoOptionsText = _ref36$NoOptionsText === void 0 ? 'No Options Available' : _ref36$NoOptionsText,
-    positionRef = _ref36.positionRef,
-    fontStyle = _ref36.fontStyle,
-    icon = _ref36.icon,
-    _ref36$searchBox = _ref36.searchBox,
-    searchBox = _ref36$searchBox === void 0 ? true : _ref36$searchBox,
-    searchBoxBackground = _ref36.searchBoxBackground,
-    searchBoxBorder = _ref36.searchBoxBorder,
-    searchBoxBorderRadius = _ref36.searchBoxBorderRadius,
-    searchIcon = _ref36.searchIcon,
-    _ref36$placeholderTex = _ref36.placeholderText,
-    placeholderText = _ref36$placeholderTex === void 0 ? 'Search...' : _ref36$placeholderTex,
-    iconColor = _ref36.iconColor,
-    placeholderColor = _ref36.placeholderColor,
-    inputColor = _ref36.inputColor,
-    _ref36$iconSize = _ref36.iconSize,
-    iconSize = _ref36$iconSize === void 0 ? 16 : _ref36$iconSize,
-    _ref36$allowDeselect = _ref36.allowDeselect,
-    allowDeselect = _ref36$allowDeselect === void 0 ? true : _ref36$allowDeselect,
-    titleRightNode = _ref36.titleRightNode;
+  var title = _ref37.title,
+    titlecolor = _ref37.titlecolor,
+    titleWeight = _ref37.titleWeight,
+    options = _ref37.options,
+    value = _ref37.value,
+    onChange = _ref37.onChange,
+    _ref37$disabled = _ref37.disabled,
+    disabled = _ref37$disabled === void 0 ? false : _ref37$disabled,
+    size = _ref37.size,
+    width = _ref37.width,
+    _ref37$labelText = _ref37.labelText,
+    labelText = _ref37$labelText === void 0 ? 'Select' : _ref37$labelText,
+    border = _ref37.border,
+    background = _ref37.background,
+    _ref37$padding = _ref37.padding,
+    padding = _ref37$padding === void 0 ? '0px' : _ref37$padding,
+    borderRadius = _ref37.borderRadius,
+    optionColor = _ref37.optionColor,
+    optionFontSize = _ref37.optionFontSize,
+    optionFontWeight = _ref37.optionFontWeight,
+    optionBackgroundColor = _ref37.optionBackgroundColor,
+    menuBackground = _ref37.menuBackground,
+    optionsBorderRadius = _ref37.optionsBorderRadius,
+    color = _ref37.color,
+    required = _ref37.required,
+    _ref37$NoOptionsText = _ref37.NoOptionsText,
+    NoOptionsText = _ref37$NoOptionsText === void 0 ? 'No Options Available' : _ref37$NoOptionsText,
+    positionRef = _ref37.positionRef,
+    fontStyle = _ref37.fontStyle,
+    icon = _ref37.icon,
+    _ref37$searchBox = _ref37.searchBox,
+    searchBox = _ref37$searchBox === void 0 ? true : _ref37$searchBox,
+    searchBoxBackground = _ref37.searchBoxBackground,
+    searchBoxBorder = _ref37.searchBoxBorder,
+    searchBoxBorderRadius = _ref37.searchBoxBorderRadius,
+    searchIcon = _ref37.searchIcon,
+    _ref37$placeholderTex = _ref37.placeholderText,
+    placeholderText = _ref37$placeholderTex === void 0 ? 'Search...' : _ref37$placeholderTex,
+    iconColor = _ref37.iconColor,
+    placeholderColor = _ref37.placeholderColor,
+    inputColor = _ref37.inputColor,
+    _ref37$iconSize = _ref37.iconSize,
+    iconSize = _ref37$iconSize === void 0 ? 16 : _ref37$iconSize,
+    _ref37$allowDeselect = _ref37.allowDeselect,
+    allowDeselect = _ref37$allowDeselect === void 0 ? true : _ref37$allowDeselect,
+    titleRightNode = _ref37.titleRightNode,
+    _ref37$dropDownPositi = _ref37.dropDownPosition,
+    dropDownPosition = _ref37$dropDownPositi === void 0 ? 'left' : _ref37$dropDownPositi;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -8003,7 +8016,8 @@ var SelectOption = function SelectOption(_ref36) {
     "$optionsBorderRadius": optionsBorderRadius,
     "$optionsAvailable": options.length > 0,
     "$top": dropUp ? 'auto' : '126%',
-    "$bottom": dropUp ? '126%' : 'auto'
+    "$bottom": dropUp ? '126%' : 'auto',
+    "$dropDownPosition": dropDownPosition
   }, showSearchBox && React__default.createElement(SearchContainer$1, {
     "$background": searchBoxBackground,
     "$border": searchBoxBorder,