labsense-ui-kit 1.1.91 → 1.1.92

package/dist/Dropdown/ButtonDropdown.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface DropdownOption {
+    label: string;
+    value: string;
+    onClick: () => void;
+}
+interface ButtonDropdownProps {
+    options: DropdownOption[];
+    initialValue?: string;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'primary' | 'outline-primary' | 'secondary';
+    placeholder?: string;
+}
+declare const ButtonDropdown: React.FC<ButtonDropdownProps>;
+export default ButtonDropdown;

package/dist/Dropdown/index.d.ts

@@ -1,5 +1,6 @@
+import ButtonDropdown from './ButtonDropdown';
 import MultiSelectDropdown from './MultiSelectDropdown';
 import OptionComponent from './OptionComponent';
 import SelectedOption from './SelectedOption';
 import SelectOption, { DropdownMenu, Options } from './SelectOption';
-export { MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options };
+export { ButtonDropdown, MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { Button, ButtonProps, ButtonLoaderProps } from './Buttons';
 import { ButtonCarousel } from './Carousel';
 import { Container, Span } from './Container&Span/StyledComponents';
 import { DatePicker } from './Date-Time';
-import { MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options } from './Dropdown';
+import { ButtonDropdown, MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options } from './Dropdown';
 import { useClickOutside, useCustomModal, useNotification, useTheme } from './hooks';
 import { Icon, IconNames } from './Icons';
 import { SearchBox, TextArea, TextField, TextFieldWithDropdown, CheckBox } from './Inputs';
@@ -23,7 +23,7 @@ export { Button, ButtonProps, ButtonLoaderProps };
 export { ButtonCarousel };
 export { Container, Span };
 export { DatePicker };
-export { MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options };
+export { ButtonDropdown, MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options };
 export { useClickOutside, useCustomModal, useNotification, useTheme };
 export { Icon, IconNames };
 export { SearchBox, TextArea, TextField, TextFieldWithDropdown, CheckBox };

package/dist/index.js

@@ -5348,74 +5348,8 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
   }))));
 };
 
-var _templateObject$c, _templateObject2$9, _templateObject3$6;
-var SelectedOptionsWrapper$1 = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
-var SelectedOptionDiv$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _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-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref) {
-  var $selectedOptionBackground = _ref.$selectedOptionBackground,
-    $type = _ref.$type,
-    theme = _ref.theme;
-  return $selectedOptionBackground || $type === 'remove' ? theme.disabled.error : theme.accent.softBlue;
-}, function (_ref2) {
-  var $selectedOptionColor = _ref2.$selectedOptionColor,
-    $type = _ref2.$type,
-    theme = _ref2.theme;
-  return $selectedOptionColor || $type === 'remove' ? theme["default"].error : theme.brand.primary;
-});
-var RemoveIcon$1 = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n"])), function (_ref3) {
-  var $removeIconBackground = _ref3.$removeIconBackground,
-    $type = _ref3.$type,
-    theme = _ref3.theme;
-  return $removeIconBackground || $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
-});
-var SelectedOption = function SelectedOption(_ref4) {
-  var selectedOptions = _ref4.selectedOptions,
-    allOptions = _ref4.allOptions,
-    selectedOptionBackground = _ref4.selectedOptionBackground,
-    selectedOptionColor = _ref4.selectedOptionColor,
-    removeIconBackground = _ref4.removeIconBackground,
-    removeIconColor = _ref4.removeIconColor,
-    onChange = _ref4.onChange,
-    type = _ref4.type;
-  var themeColors = useTheme();
-  var selectedOptionObjects = allOptions.filter(function (opt) {
-    return selectedOptions.includes(opt.value);
-  }).sort(function (a, b) {
-    return a.labelText.localeCompare(b.labelText);
-  });
-  var handleOptionRemoval = function handleOptionRemoval(optionValue) {
-    if (onChange) {
-      onChange(selectedOptions.filter(function (value) {
-        return value !== optionValue;
-      }));
-    }
-  };
-  return React__default.createElement(SelectedOptionsWrapper$1, null, selectedOptionObjects.map(function (option) {
-    return React__default.createElement(SelectedOptionDiv$1, {
-      key: option.value,
-      "$type": type,
-      "$selectedOptionBackground": selectedOptionBackground,
-      "$selectedOptionColor": selectedOptionColor,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        handleOptionRemoval(option.value);
-      }
-    }, option.labelText, React__default.createElement(RemoveIcon$1, {
-      "$removeIconBackground": removeIconBackground,
-      "$type": type,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        handleOptionRemoval(option.value);
-      }
-    }, React__default.createElement(Icon, {
-      icon: 'Close',
-      size: 6,
-      color: removeIconColor || type === 'remove' ? themeColors["default"].error : themeColors.brand.primary
-    })));
-  }));
-};
-
-var _templateObject$d, _templateObject2$a, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
-var TitleText$1 = styled__default.label(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: max-content;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$c, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
+var TitleText$1 = styled__default.label(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: max-content;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $titleWeight = _ref.$titleWeight;
   return $titleWeight || 500;
 }, function (_ref2) {
@@ -5454,11 +5388,11 @@ var TitleText$1 = styled__default.label(_templateObject$d || (_templateObject$d
       return $titlecolor;
   }
 });
-var DropdownContainer$1 = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: 100%;\n  position: relative;\n  gap: 8px;\n  display: flex;\n"])), function (_ref4) {
+var DropdownContainer$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: 100%;\n  position: relative;\n  gap: 8px;\n  display: flex;\n"])), function (_ref4) {
   var $width = _ref4.$width;
   return $width || '100%';
 });
-var DropdownButton$1 = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  transition: all 0.3s ease;\n  border: ", ";\n  gap: 6px;\n  padding: ", ";\n  background: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
+var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  transition: all 0.3s ease;\n  border: ", ";\n  gap: 6px;\n  padding: ", ";\n  background: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
   var $disabled = _ref5.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref6) {
@@ -5816,6 +5750,126 @@ var SelectOption = function SelectOption(_ref36) {
   }) : React__default.createElement(NoOptions, null, NoOptionsText)))));
 };
 
+var ButtonDropdown = function ButtonDropdown(_ref) {
+  var _options$find;
+  var options = _ref.options,
+    initialValue = _ref.initialValue,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline-primary' : _ref$variant,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select Option' : _ref$placeholder;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = React.useState(initialValue || ''),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var ref = React.useRef(null);
+  useClickOutside(ref, function () {
+    return setIsOpen(false);
+  });
+  var handleSelect = function handleSelect(value, onClick) {
+    setSelected(value);
+    onClick();
+    setIsOpen(false);
+  };
+  var selectedLabel = ((_options$find = options.find(function (opt) {
+    return opt.value === selected;
+  })) === null || _options$find === void 0 ? void 0 : _options$find.label) || placeholder;
+  return React__default.createElement(Container, {
+    "$position": 'relative',
+    ref: ref
+  }, React__default.createElement(ButtonComponent, {
+    text: selectedLabel,
+    icon: isOpen ? 'UpArrow' : 'DownArrow',
+    size: size,
+    variant: variant,
+    onClick: function onClick() {
+      return setIsOpen(function (prev) {
+        return !prev;
+      });
+    }
+  }), isOpen && React__default.createElement(DropdownMenu$1, {
+    "$top": '40px',
+    "$optionsAvailable": Option.length > 0
+  }, options.map(function (option) {
+    return React__default.createElement(Options, {
+      key: option.value,
+      onClick: function onClick() {
+        return handleSelect(option.value, option.onClick);
+      }
+    }, option.label);
+  })));
+};
+
+var _templateObject$d, _templateObject2$a, _templateObject3$7;
+var SelectedOptionsWrapper$1 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
+var SelectedOptionDiv$1 = styled__default.div(_templateObject2$a || (_templateObject2$a = _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-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref) {
+  var $selectedOptionBackground = _ref.$selectedOptionBackground,
+    $type = _ref.$type,
+    theme = _ref.theme;
+  return $selectedOptionBackground || $type === 'remove' ? theme.disabled.error : theme.accent.softBlue;
+}, function (_ref2) {
+  var $selectedOptionColor = _ref2.$selectedOptionColor,
+    $type = _ref2.$type,
+    theme = _ref2.theme;
+  return $selectedOptionColor || $type === 'remove' ? theme["default"].error : theme.brand.primary;
+});
+var RemoveIcon$1 = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n"])), function (_ref3) {
+  var $removeIconBackground = _ref3.$removeIconBackground,
+    $type = _ref3.$type,
+    theme = _ref3.theme;
+  return $removeIconBackground || $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
+});
+var SelectedOption = function SelectedOption(_ref4) {
+  var selectedOptions = _ref4.selectedOptions,
+    allOptions = _ref4.allOptions,
+    selectedOptionBackground = _ref4.selectedOptionBackground,
+    selectedOptionColor = _ref4.selectedOptionColor,
+    removeIconBackground = _ref4.removeIconBackground,
+    removeIconColor = _ref4.removeIconColor,
+    onChange = _ref4.onChange,
+    type = _ref4.type;
+  var themeColors = useTheme();
+  var selectedOptionObjects = allOptions.filter(function (opt) {
+    return selectedOptions.includes(opt.value);
+  }).sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  });
+  var handleOptionRemoval = function handleOptionRemoval(optionValue) {
+    if (onChange) {
+      onChange(selectedOptions.filter(function (value) {
+        return value !== optionValue;
+      }));
+    }
+  };
+  return React__default.createElement(SelectedOptionsWrapper$1, null, selectedOptionObjects.map(function (option) {
+    return React__default.createElement(SelectedOptionDiv$1, {
+      key: option.value,
+      "$type": type,
+      "$selectedOptionBackground": selectedOptionBackground,
+      "$selectedOptionColor": selectedOptionColor,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleOptionRemoval(option.value);
+      }
+    }, option.labelText, React__default.createElement(RemoveIcon$1, {
+      "$removeIconBackground": removeIconBackground,
+      "$type": type,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleOptionRemoval(option.value);
+      }
+    }, React__default.createElement(Icon, {
+      icon: 'Close',
+      size: 6,
+      color: removeIconColor || type === 'remove' ? themeColors["default"].error : themeColors.brand.primary
+    })));
+  }));
+};
+
 var _templateObject$e, _templateObject2$b;
 var SearchContainer$2 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 5.5px 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  // cursor: ", ";\n  transition: all 0.3s ease;\n\n &:focus-within {\n    border: ", ";\n  }\n"])), function (_ref) {
   var $background = _ref.$background,
@@ -5835,7 +5889,7 @@ var SearchContainer$2 = styled__default.div(_templateObject$e || (_templateObjec
   var theme = _ref5.theme;
   return "1px solid " + theme.text.dark;
 });
-var SearchBar$2 = styled__default.input(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    line-height: 1005;\n  }\n"])), function (_ref6) {
+var SearchBar$2 = styled__default.input(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    line-height: 100%;\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme["default"].tertiary;
 }, function (_ref7) {
@@ -7417,7 +7471,7 @@ var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f
   var $disabled = _ref10.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    color: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
+var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
   var $headerHeight = _ref11.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
@@ -7517,6 +7571,7 @@ exports.Badge = Badge;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = ButtonComponent;
 exports.ButtonCarousel = ButtonCarousel;
+exports.ButtonDropdown = ButtonDropdown;
 exports.CheckBox = CheckBox;
 exports.CircularLoader = CircularLoader;
 exports.CircularProgress = CircularProgress;