scorer-ui-kit 1.7.23 → 1.7.25

package/dist/Global/index.d.ts

@@ -46,6 +46,7 @@ export interface ICustomDrawer {
     status?: IStatusDot;
     counter?: number;
     width?: string;
+    maxCounter?: number;
 }
 export interface IUserDrawerFooter {
     icon?: string;

package/dist/Icons/StatusIcon.d.ts

@@ -4,6 +4,7 @@ interface IStatusIcon {
     icon: string;
     status?: IStatusDot;
     counter?: number;
+    maxCounter?: number;
 }
 declare const StatusIcon: React.FC<IStatusIcon>;
 export default StatusIcon;

package/dist/LineUI/LineUIRTC.d.ts

@@ -7,13 +7,15 @@ interface LineUIProps {
         w: number;
     }) => void;
     onLineMoveEnd?: () => void;
-    onLineClick?: () => void;
+    onLineClick?: (lineSetId: number) => void;
     onLoaded?: (metadata: {
         height: number;
         width: number;
     }) => void;
     options?: LineUIOptions;
     videoOptions?: LineUIVideoOptions;
+    lineClickSensingBorder?: string;
+    hasClickSensingBorder?: boolean;
 }
 declare const LineUI: React.FC<LineUIProps>;
 export default LineUI;

package/dist/index.js

@@ -5470,15 +5470,18 @@ var TopLine$1 = styled__default.div(_templateObject2$A || (_templateObject2$A =
 });
 var InnerBox = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n  border-right: solid 1px hsl(207, 16%, 86%);\n  border-bottom: solid 1px hsl(207, 16%, 86%);\n  border-left: solid 1px hsl(207, 16%, 86%);\n  background-color: hsl(200, 23%, 97%);\n"])));
 var StyledFilterOption = styled__default(FilterOption)(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  letter-spacing: 0.2px;\n"])));
-var OptionList = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  max-height: 162px;\n  min-height: 40px;\n  position: relative;\n  overflow-y: scroll;\n  ::-webkit-scrollbar {  /* Hide scrollbar for Chrome, Safari and Opera */\n    display: none;\n  }\n  -ms-overflow-style: none;  /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  ", " {\n    height: 35px;\n    padding-left: 10px;\n  }\n"])), StyledFilterOption);
+var OptionList = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  min-height: 40px;\n  position: relative;\n  overflow-y: auto;\n  margin-right: 2px;\n  \n  /* Firefox supports the scrollbar-width property */\n  scrollbar-width: thin;\n\n  /* Customize the scrollbar width for Chrome and Safari */\n  ::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background: #44444499;\n  }\n\n  ", " {\n    height: 35px;\n    padding-left: 10px;\n  }\n"])), function (_ref2) {
+  var moreItem = _ref2.moreItem;
+  return moreItem ? '168px' : '175px';
+}, StyledFilterOption);
 var ResultsContainer = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  border-top: 1px solid hsl(0, 0%, 91%);\n  padding-bottom: 8px;\n"])));
-var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: 1px solid hsl(0, 0%, 91%);\n"])), function (_ref2) {
-  var theme = _ref2.theme;
+var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: 1px solid hsl(0, 0%, 91%);\n"])), function (_ref3) {
+  var theme = _ref3.theme;
   return theme.fontFamily.data;
 });
 var SearchWrapper = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  height: 41px;\n  display: flex;\n  align-items: center;\n"])));
 var EmptyResultText = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  display: block;\n  color: hsl(0, 0%, 56%);\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
-var Gradient = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0px;\n  bottom: 9px;\n  height: 25px;\n  background-image: linear-gradient(to bottom, rgba(246, 247, 249, 0) 1%, #F6F7F9 120%);\n  width: 100%;\n"])));
+var Gradient = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  height: 15px;\n  background-image: linear-gradient(to bottom, transparent, #e5e5e5);\n  width: 99%;\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n"])));
 
 var isValueSelected = function isValueSelected(item, selected) {
   var isItemSelected = false;
@@ -5604,29 +5607,29 @@ var getResultText = function getResultText(template, visible, total) {
   return newMessage.replace('[VISIBLE]', "" + visible);
 };
 
-var FilterDropdown = function FilterDropdown(_ref3) {
-  var buttonIcon = _ref3.buttonIcon,
-      buttonText = _ref3.buttonText,
-      list = _ref3.list,
-      _ref3$selected = _ref3.selected,
-      selected = _ref3$selected === void 0 ? null : _ref3$selected,
-      _ref3$disabled = _ref3.disabled,
-      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-      _ref3$isLoading = _ref3.isLoading,
-      isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-      loadingText = _ref3.loadingText,
-      _ref3$optionType = _ref3.optionType,
-      optionType = _ref3$optionType === void 0 ? 'text' : _ref3$optionType,
-      hasOptionsFilter = _ref3.hasOptionsFilter,
-      searchPlaceholder = _ref3.searchPlaceholder,
-      _ref3$maxDisplayedIte = _ref3.maxDisplayedItems,
-      maxDisplayedItems = _ref3$maxDisplayedIte === void 0 ? 5 : _ref3$maxDisplayedIte,
-      _ref3$searchResultTex = _ref3.searchResultText,
-      searchResultText = _ref3$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref3$searchResultTex,
-      emptyResultText = _ref3.emptyResultText,
-      _ref3$onSelect = _ref3.onSelect,
-      onSelect = _ref3$onSelect === void 0 ? function () {} : _ref3$onSelect,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded$o);
+var FilterDropdown = function FilterDropdown(_ref4) {
+  var buttonIcon = _ref4.buttonIcon,
+      buttonText = _ref4.buttonText,
+      list = _ref4.list,
+      _ref4$selected = _ref4.selected,
+      selected = _ref4$selected === void 0 ? null : _ref4$selected,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _ref4$isLoading = _ref4.isLoading,
+      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+      loadingText = _ref4.loadingText,
+      _ref4$optionType = _ref4.optionType,
+      optionType = _ref4$optionType === void 0 ? 'text' : _ref4$optionType,
+      hasOptionsFilter = _ref4.hasOptionsFilter,
+      searchPlaceholder = _ref4.searchPlaceholder,
+      _ref4$maxDisplayedIte = _ref4.maxDisplayedItems,
+      maxDisplayedItems = _ref4$maxDisplayedIte === void 0 ? 5 : _ref4$maxDisplayedIte,
+      _ref4$searchResultTex = _ref4.searchResultText,
+      searchResultText = _ref4$searchResultTex === void 0 ? 'Showing [VISIBLE] of [TOTAL]' : _ref4$searchResultTex,
+      emptyResultText = _ref4.emptyResultText,
+      _ref4$onSelect = _ref4.onSelect,
+      onSelect = _ref4$onSelect === void 0 ? function () {} : _ref4$onSelect,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
 
   var _useState = React.useState(selectedOrderList(list, maxDisplayedItems, selected)),
       visibleList = _useState[0],
@@ -5691,7 +5694,9 @@ var FilterDropdown = function FilterDropdown(_ref3) {
     noBackground: true
   })), isLoading || !list ? React__default.createElement(LoadingBox, Object.assign({}, {
     loadingText: loadingText
-  })) : React__default.createElement(ResultsContainer, null, hasOptionsFilter && React__default.createElement(ResultCounter, null, getResultText(searchResultText, visibleList.length, list.length)), React__default.createElement(OptionList, null, visibleList.length > 0 ? visibleList.map(function (item, index) {
+  })) : React__default.createElement(ResultsContainer, null, hasOptionsFilter && React__default.createElement(ResultCounter, null, getResultText(searchResultText, visibleList.length, list.length)), React__default.createElement(OptionList, {
+    moreItem: list.length > 5
+  }, visibleList.length > 0 ? visibleList.map(function (item, index) {
     var value = item.value;
     var text = item.text;
     return React__default.createElement(StyledFilterOption, Object.assign({
@@ -6784,7 +6789,7 @@ var FilterBar = function FilterBar(_ref5) {
 
 var _templateObject$I, _templateObject2$G, _templateObject3$B, _templateObject4$v, _templateObject5$r;
 var Container$v = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n"])));
-var StatusCounter = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 14px;;\n  top: -12px;\n  border-radius: 50%;\n  height: 14px;\n  min-width: 14px;\n  padding: 2px;\n  font-size: 10px;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  background-color: ", ";\n"])), function (_ref) {
+var StatusCounter = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 14px;;\n  top: -12px;\n  border-radius: 4px;\n  height: 14px;\n  min-width: 14px;\n  padding: 2px;\n  font-size: 10px;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  background-color: ", ";\n"])), function (_ref) {
   var animation = _ref.theme.animation;
   return styled.css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n    transition: background-color ", " ", ";\n  "])), animation.speed.slow, animation.easing.primary.easeInOut);
 }, function (_ref2) {
@@ -6804,12 +6809,14 @@ var StatusDot = styled__default.div(_templateObject4$v || (_templateObject4$v =
 var StatusIcon = function StatusIcon(_ref5) {
   var icon = _ref5.icon,
       status = _ref5.status,
-      counter = _ref5.counter;
+      counter = _ref5.counter,
+      _ref5$maxCounter = _ref5.maxCounter,
+      maxCounter = _ref5$maxCounter === void 0 ? 999 : _ref5$maxCounter;
   return React__default.createElement(Container$v, null, status && counter === undefined ? React__default.createElement(StatusDot, {
     color: status
   }) : counter === undefined ? null : React__default.createElement(StatusCounter, {
     color: status
-  }, counter), React__default.createElement(Icon, {
+  }, counter > maxCounter ? maxCounter + "+" : counter), React__default.createElement(Icon, {
     icon: icon,
     size: 18,
     color: 'dimmed'
@@ -8438,6 +8445,10 @@ var LineUI$1 = function LineUI(_ref) {
       onLineClick = _ref$onLineClick === void 0 ? function () {} : _ref$onLineClick,
       _ref$onLoaded = _ref.onLoaded,
       onLoaded = _ref$onLoaded === void 0 ? function () {} : _ref$onLoaded,
+      _ref$lineClickSensing = _ref.lineClickSensingBorder,
+      lineClickSensingBorder = _ref$lineClickSensing === void 0 ? '65' : _ref$lineClickSensing,
+      _ref$hasClickSensingB = _ref.hasClickSensingBorder,
+      hasClickSensingBorder = _ref$hasClickSensingB === void 0 ? true : _ref$hasClickSensingB,
       videoOptions = _ref.videoOptions,
       _ref$options = _ref.options;
   _ref$options = _ref$options === void 0 ? {} : _ref$options;
@@ -8615,6 +8626,8 @@ var LineUI$1 = function LineUI(_ref) {
   }, state.map(function (lineSet, index) {
     return React__default.createElement(LineSet, {
       key: index,
+      hasClickSensingBorder: hasClickSensingBorder,
+      lineClickSensingBorder: lineClickSensingBorder,
       onLineMoveEnd: onLineMoveEnd,
       onLineClick: onLineClick,
       lineSetId: index,