labsense-ui-kit 1.1.44 → 1.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dropdown/MultiSelectDropdown.d.ts +1 -0
- package/dist/index.js +79 -74
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +79 -74
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4549,16 +4549,19 @@ var DropdownButton = styled__default.div(_templateObject2$6 || (_templateObject2
|
|
|
4549
4549
|
return '14px';
|
|
4550
4550
|
}
|
|
4551
4551
|
});
|
|
4552
|
-
var TitleText = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n width: max-content;\n position: relative;\n font-weight:
|
|
4553
|
-
var $
|
|
4554
|
-
|
|
4555
|
-
return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
|
|
4552
|
+
var TitleText = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n width: max-content;\n position: relative;\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n\n color: ", ";\n"])), function (_ref15) {
|
|
4553
|
+
var $titleWeight = _ref15.$titleWeight;
|
|
4554
|
+
return $titleWeight != null ? $titleWeight : '500';
|
|
4556
4555
|
}, function (_ref16) {
|
|
4557
4556
|
var $titleSize = _ref16.$titleSize,
|
|
4558
4557
|
$size = _ref16.$size;
|
|
4559
4558
|
return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
|
|
4560
4559
|
}, function (_ref17) {
|
|
4561
|
-
var $
|
|
4560
|
+
var $titleSize = _ref17.$titleSize,
|
|
4561
|
+
$size = _ref17.$size;
|
|
4562
|
+
return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
|
|
4563
|
+
}, function (_ref18) {
|
|
4564
|
+
var $titleColor = _ref18.$titleColor;
|
|
4562
4565
|
switch ($titleColor) {
|
|
4563
4566
|
case 'dark':
|
|
4564
4567
|
return colorVariables.text.dark;
|
|
@@ -4581,24 +4584,24 @@ var TitleText = styled__default.div(_templateObject3$4 || (_templateObject3$4 =
|
|
|
4581
4584
|
}
|
|
4582
4585
|
});
|
|
4583
4586
|
var Container$2 = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: 8px;\n"])));
|
|
4584
|
-
var LabelText = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n font-style:", ";\n color: ", ";\n"])), function (
|
|
4585
|
-
var $labelStyle =
|
|
4587
|
+
var LabelText = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n font-style:", ";\n color: ", ";\n"])), function (_ref19) {
|
|
4588
|
+
var $labelStyle = _ref19.$labelStyle;
|
|
4586
4589
|
return $labelStyle;
|
|
4587
4590
|
}, colorVariables.text.medium);
|
|
4588
|
-
var DropdownMenu = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n max-height: 156px;\n padding: 4px;\n box-sizing: border-box;\n border: 1px solid ", ";\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"])), colorVariables.border.light, function (
|
|
4589
|
-
var $optionsBorderRadius =
|
|
4591
|
+
var DropdownMenu = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n max-height: 156px;\n padding: 4px;\n box-sizing: border-box;\n border: 1px solid ", ";\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"])), colorVariables.border.light, function (_ref20) {
|
|
4592
|
+
var $optionsBorderRadius = _ref20.$optionsBorderRadius;
|
|
4590
4593
|
return $optionsBorderRadius || '8px';
|
|
4591
|
-
}, function (_ref20) {
|
|
4592
|
-
var $width = _ref20.$width;
|
|
4593
|
-
return $width ? $width : 'max-content';
|
|
4594
4594
|
}, function (_ref21) {
|
|
4595
|
-
var $
|
|
4595
|
+
var $width = _ref21.$width;
|
|
4596
|
+
return $width ? $width : 'max-content';
|
|
4597
|
+
}, function (_ref22) {
|
|
4598
|
+
var $menuBackground = _ref22.$menuBackground;
|
|
4596
4599
|
return $menuBackground || colorVariables.accent.extraLight;
|
|
4597
4600
|
});
|
|
4598
4601
|
var SelectedOptionsWrapper = styled__default.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n height: 100%;\n"])));
|
|
4599
|
-
var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _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 (
|
|
4600
|
-
var $selectedOptionBackground =
|
|
4601
|
-
$disabled =
|
|
4602
|
+
var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _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 (_ref23) {
|
|
4603
|
+
var $selectedOptionBackground = _ref23.$selectedOptionBackground,
|
|
4604
|
+
$disabled = _ref23.$disabled;
|
|
4602
4605
|
switch ($selectedOptionBackground) {
|
|
4603
4606
|
case 'dark':
|
|
4604
4607
|
return colorVariables.text.dark;
|
|
@@ -4619,8 +4622,8 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObje
|
|
|
4619
4622
|
default:
|
|
4620
4623
|
return $selectedOptionBackground || colorVariables.accent.extraLight;
|
|
4621
4624
|
}
|
|
4622
|
-
}, function (
|
|
4623
|
-
var $selectedOptionColor =
|
|
4625
|
+
}, function (_ref24) {
|
|
4626
|
+
var $selectedOptionColor = _ref24.$selectedOptionColor;
|
|
4624
4627
|
switch ($selectedOptionColor) {
|
|
4625
4628
|
case 'dark':
|
|
4626
4629
|
return colorVariables.text.dark;
|
|
@@ -4642,67 +4645,68 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObje
|
|
|
4642
4645
|
return $selectedOptionColor;
|
|
4643
4646
|
}
|
|
4644
4647
|
});
|
|
4645
|
-
var RemoveIcon = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _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 (
|
|
4646
|
-
var $disabled =
|
|
4648
|
+
var RemoveIcon = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _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 (_ref25) {
|
|
4649
|
+
var $disabled = _ref25.$disabled;
|
|
4647
4650
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
4648
|
-
}, function (_ref25) {
|
|
4649
|
-
var removeIconBackground = _ref25.removeIconBackground,
|
|
4650
|
-
$type = _ref25.$type;
|
|
4651
|
-
return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
|
|
4652
4651
|
}, function (_ref26) {
|
|
4653
|
-
var
|
|
4652
|
+
var removeIconBackground = _ref26.removeIconBackground,
|
|
4653
|
+
$type = _ref26.$type;
|
|
4654
|
+
return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
|
|
4655
|
+
}, function (_ref27) {
|
|
4656
|
+
var $disabled = _ref27.$disabled;
|
|
4654
4657
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
4655
4658
|
});
|
|
4656
4659
|
var TextWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
4657
4660
|
var Asterisk = styled__default.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size: 10px;\n height: fit-content;\n position: absolute;\n top: -2px;\n right: -8px;\n"])), colorVariables["default"].error);
|
|
4658
|
-
var MultiSelectDropdown = function MultiSelectDropdown(
|
|
4659
|
-
var title =
|
|
4660
|
-
|
|
4661
|
-
|
|
4662
|
-
titleColor =
|
|
4663
|
-
|
|
4664
|
-
labelText =
|
|
4665
|
-
|
|
4666
|
-
|
|
4667
|
-
|
|
4668
|
-
replaceLabel =
|
|
4669
|
-
|
|
4670
|
-
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
background =
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
menuBackground =
|
|
4681
|
-
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
|
|
4687
|
-
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
disabled =
|
|
4700
|
-
|
|
4701
|
-
required =
|
|
4702
|
-
|
|
4703
|
-
searchBox =
|
|
4704
|
-
|
|
4705
|
-
NoOptionsText =
|
|
4661
|
+
var MultiSelectDropdown = function MultiSelectDropdown(_ref28) {
|
|
4662
|
+
var title = _ref28.title,
|
|
4663
|
+
titleWeight = _ref28.titleWeight,
|
|
4664
|
+
titleSize = _ref28.titleSize,
|
|
4665
|
+
_ref28$titleColor = _ref28.titleColor,
|
|
4666
|
+
titleColor = _ref28$titleColor === void 0 ? colorVariables.text.dark : _ref28$titleColor,
|
|
4667
|
+
_ref28$labelText = _ref28.labelText,
|
|
4668
|
+
labelText = _ref28$labelText === void 0 ? 'Select Cameras' : _ref28$labelText,
|
|
4669
|
+
labelStyle = _ref28.labelStyle,
|
|
4670
|
+
labelColor = _ref28.labelColor,
|
|
4671
|
+
_ref28$replaceLabel = _ref28.replaceLabel,
|
|
4672
|
+
replaceLabel = _ref28$replaceLabel === void 0 ? true : _ref28$replaceLabel,
|
|
4673
|
+
options = _ref28.options,
|
|
4674
|
+
width = _ref28.width,
|
|
4675
|
+
optionWidth = _ref28.optionWidth,
|
|
4676
|
+
height = _ref28.height,
|
|
4677
|
+
placeholder = _ref28.placeholder,
|
|
4678
|
+
border = _ref28.border,
|
|
4679
|
+
_ref28$background = _ref28.background,
|
|
4680
|
+
background = _ref28$background === void 0 ? colorVariables["default"].tertiary : _ref28$background,
|
|
4681
|
+
selectedOptionBackground = _ref28.selectedOptionBackground,
|
|
4682
|
+
selectedOptionColor = _ref28.selectedOptionColor,
|
|
4683
|
+
_ref28$menuBackground = _ref28.menuBackground,
|
|
4684
|
+
menuBackground = _ref28$menuBackground === void 0 ? 'white' : _ref28$menuBackground,
|
|
4685
|
+
optionsBorderRadius = _ref28.optionsBorderRadius,
|
|
4686
|
+
borderRadius = _ref28.borderRadius,
|
|
4687
|
+
removeIconBackground = _ref28.removeIconBackground,
|
|
4688
|
+
handleSelectChange = _ref28.handleSelectChange,
|
|
4689
|
+
selectedOptions = _ref28.selectedOptions,
|
|
4690
|
+
placeholderColor = _ref28.placeholderColor,
|
|
4691
|
+
optionBorder = _ref28.optionBorder,
|
|
4692
|
+
optionColor = _ref28.optionColor,
|
|
4693
|
+
searchIcon = _ref28.searchIcon,
|
|
4694
|
+
searchbarTextColor = _ref28.searchbarTextColor,
|
|
4695
|
+
searchBoxBackground = _ref28.searchBoxBackground,
|
|
4696
|
+
searchBoxBorder = _ref28.searchBoxBorder,
|
|
4697
|
+
searchBoxBorderRadius = _ref28.searchBoxBorderRadius,
|
|
4698
|
+
size = _ref28.size,
|
|
4699
|
+
removeIcon = _ref28.removeIcon,
|
|
4700
|
+
type = _ref28.type,
|
|
4701
|
+
icon = _ref28.icon,
|
|
4702
|
+
_ref28$disabled = _ref28.disabled,
|
|
4703
|
+
disabled = _ref28$disabled === void 0 ? false : _ref28$disabled,
|
|
4704
|
+
_ref28$required = _ref28.required,
|
|
4705
|
+
required = _ref28$required === void 0 ? false : _ref28$required,
|
|
4706
|
+
_ref28$searchBox = _ref28.searchBox,
|
|
4707
|
+
searchBox = _ref28$searchBox === void 0 ? true : _ref28$searchBox,
|
|
4708
|
+
_ref28$NoOptionsText = _ref28.NoOptionsText,
|
|
4709
|
+
NoOptionsText = _ref28$NoOptionsText === void 0 ? 'No Options Available' : _ref28$NoOptionsText;
|
|
4706
4710
|
var _useState = React.useState(false),
|
|
4707
4711
|
isOpen = _useState[0],
|
|
4708
4712
|
setIsOpen = _useState[1];
|
|
@@ -4738,7 +4742,8 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref27) {
|
|
|
4738
4742
|
return React__default.createElement(Container$2, null, title && React__default.createElement(TitleText, {
|
|
4739
4743
|
"$titleColor": titleColor,
|
|
4740
4744
|
"$titleSize": titleSize,
|
|
4741
|
-
"$size": size
|
|
4745
|
+
"$size": size,
|
|
4746
|
+
"$titleWeight": titleWeight
|
|
4742
4747
|
}, title, required && React__default.createElement(Asterisk, null, "*")), React__default.createElement(DropdownContainer, {
|
|
4743
4748
|
ref: dropdownRef,
|
|
4744
4749
|
"$width": width,
|