oolib 2.208.3 → 2.208.4

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -98,7 +98,7 @@ var OptionsMulti = function (_a) {
         react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
                 console.log({ id: id, v: v });
                 handleSelect(v);
-            }, optionsClassName: optionsClassName, S: S, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions() }),
+            }, optionsClassName: optionsClassName, S: S, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions(), showList: showOptions, usedIn: "dropdown" }),
         genCreateTagButton && genCreateTagButton(options)));
 };
 exports.OptionsMulti = OptionsMulti;

package/dist/v2/components/Dropdowns/comps/OptionsSingle/index.js

@@ -74,7 +74,7 @@ var OptionsSingle = function (_a) {
     }, [showOptions]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, S: S },
-            react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) { return handleSelect(v); }, optionsClassName: optionsClassName, S: S, observerRef: observerRef, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
+            react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) { return handleSelect(v); }, optionsClassName: optionsClassName, S: S, observerRef: observerRef, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, showList: showOptions, usedIn: "dropdown" }),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/v2/components/List/index.d.ts

@@ -1,6 +1,6 @@
 export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export function isGroupedData(options: any): boolean;
-export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style, groupHeaderStickyTop }: {
+export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style, groupHeaderStickyTop, showList: showListInParent, usedIn }: {
     id: any;
     options?: any[];
     value: any;
@@ -25,5 +25,7 @@ export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView,
     enableBorder: any;
     style: any;
     groupHeaderStickyTop: any;
+    showList: any;
+    usedIn: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/v2/components/List/index.js

@@ -67,7 +67,7 @@ var isGroupedData = function (options) {
 exports.isGroupedData = isGroupedData;
 var List = function (_a) {
     // const theme = useTheme();
-    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style, groupHeaderStickyTop = _a.groupHeaderStickyTop;
+    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style, groupHeaderStickyTop = _a.groupHeaderStickyTop, showListInParent = _a.showList, usedIn = _a.usedIn;
     var renderListItems = function () {
         if (options.length === 0) {
             return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
@@ -88,7 +88,10 @@ var List = function (_a) {
             }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value })); });
     };
     return (react_1.default.createElement(exports.StyledListWrapper, { disableShadow: disableShadow, style: style, isSearchable: isSearchable, enableBorder: enableBorder },
-        isSearchable && (react_1.default.createElement(SearchBar_1.SearchBar, { searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus })),
+        isSearchable && (react_1.default.createElement(SearchBar_1.SearchBar, { searchbarPlaceholder: searchbarPlaceholder, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, 
+            // In dropdowns searchBarFocus is only called from search bar component when dropdowns is opened
+            // because in Dropdown  - List and searchBar is present in DOM even when the dropdown is closed  
+            searchBarFocus: usedIn !== "dropdown" ? searchBarFocus : usedIn === "dropdown" && showListInParent ? searchBarFocus : false })),
         children,
         " ",
         renderListItems()));

package/dist/v2/components/Tags/Comps/Tag/index.js

@@ -10,17 +10,19 @@ var icons_1 = require("../../../../../icons");
 var styled_2 = require("./styled");
 var styled_components_1 = require("styled-components");
 var themes_1 = require("../../../../themes");
+var utilsOolib_1 = require("../../../../../utilsOolib");
 var grey40 = themes_1.colors.grey40;
 var Tag = function (_a) {
     var id = _a.id, _b = _a.fill, fill = _b === void 0 ? "solid" : _b, _c = _a.size, size = _c === void 0 ? "S" : _c, display = _a.display, icon = _a.icon, weight = _a.weight, onClick = _a.onClick, variant = _a.variant, typo = _a.typo, badgeColor = _a.badgeColor, style = _a.style;
     var Icon = icons_1.icons[icon];
     var theme = (0, styled_components_1.useTheme)();
     var Typo = typo || styled_2.Styled_UI_CAPTION_DF;
+    var localize = (0, utilsOolib_1.useLocale)();
     return (react_1.default.createElement(styled_1.StyledTag, { id: id, fill: fill, size: size, icon: icon, onClick: onClick, variant: variant, colors: theme === null || theme === void 0 ? void 0 : theme.colors, style: style },
         badgeColor && react_1.default.createElement("div", { style: { background: badgeColor, width: "1rem", height: "1rem", borderRadius: "50%", marginRight: "0.2rem" } }),
         react_1.default.createElement(Typo, { weight: weight },
             " ",
-            display,
+            localize(display),
             " "),
         icon &&
             react_1.default.createElement(styled_2.StyledIconWrapper, { weight: weight },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.208.3",
+  "version": "2.208.4",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",