oolib 2.199.2 → 2.199.3

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

@@ -15,6 +15,7 @@ declare namespace _default {
             export let defaultValue: boolean;
         }
         namespace grouped {
+            export let name: string;
             let control_1: string;
             export { control_1 as control };
             let description_2: string;
@@ -70,11 +71,12 @@ export function ListItem_(args: any): import("react").JSX.Element;
 export namespace ListItem_ {
     export namespace argTypes_1 {
         namespace desc {
-            let name: string;
-        }
-        namespace icon {
             let name_1: string;
             export { name_1 as name };
+        }
+        namespace icon {
+            let name_2: string;
+            export { name_2 as name };
             export { availableIcons as options };
             export namespace control_7 {
                 let type: string;

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

@@ -112,6 +112,7 @@ exports.default = {
             defaultValue: false,
         },
         grouped: {
+            name: "grouped options",
             control: "boolean",
             description: "Display options in groups",
             defaultValue: false,
@@ -185,7 +186,7 @@ var List_ = function (args) {
     };
     return (React.createElement(__1.Container, { style: { background: "#eff" } },
         React.createElement(__1.PaddingTop40, null),
-        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: handleSelect, grouped: args.grouped, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
+        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: handleSelect, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
         React.createElement(__1.PaddingBottom40, null)));
 };
 exports.List_ = List_;

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

@@ -40,7 +40,6 @@ var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
 var List_1 = require("../../../List");
 var __1 = require("../../../../..");
-var getValue_1 = require("../../utils/getValue");
 var OptionsMulti = function (_a) {
     var 
     //from root
@@ -99,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, grouped: (0, getValue_1.isGroupedData)(options), 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() }),
         genCreateTagButton && genCreateTagButton(options)));
 };
 exports.OptionsMulti = OptionsMulti;

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

@@ -39,7 +39,6 @@ var OptionsShell_1 = require("../OptionsShell");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
 var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
 var List_1 = require("../../../List");
-var getValue_1 = require("../../utils/getValue");
 /**
  * if used independently, must be used inside a 'position: relative/absolute' div.
  */
@@ -75,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, grouped: (0, getValue_1.isGroupedData)(options), 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 }),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/v2/components/Dropdowns/utils/getValue.d.ts

@@ -1,4 +1,3 @@
-export function isGroupedData(options: any): boolean;
 export function getValue_SINGLE({ valueProp, optionsFn, options, theme, saveValueAsString }: {
     valueProp: any;
     optionsFn: any;

package/dist/v2/components/Dropdowns/utils/getValue.js

@@ -7,7 +7,7 @@
  * Because thats the only format our dropdowns understand
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValue_MULTI = exports.getValue_SINGLE = exports.isGroupedData = void 0;
+exports.getValue_MULTI = exports.getValue_SINGLE = void 0;
 var toArray_1 = require("../../../../utils/toArray");
 var getAllOptionsFns_1 = require("./getAllOptionsFns");
 // Note: - saveValueAsString can be misleading here, because the value could be a string, integer, boolean values
@@ -22,26 +22,13 @@ var getAllOptionsFns_1 = require("./getAllOptionsFns");
 //     ? valueProp?.map(vProp => (optionsFn ? getAllOptionsFns(theme)[optionsFn.fn](...(toArray(optionsFn.args) || [])) : options).find(d => d.value === vProp))
 //     : valueProp
 // }
-var isGroupedData = function (options) {
-    // If the data is empty or not an array, return false
-    if (!options || !Array.isArray(options) || options.length === 0) {
-        return false;
-    }
-    // Check the first item in the array
-    // If it has an 'options' property that is an array, it's grouped data
-    return (options[0] &&
-        typeof options[0] === "object" &&
-        Array.isArray(options[0].options) &&
-        options[0].options.length > 0);
-};
-exports.isGroupedData = isGroupedData;
 var getValue_SINGLE = function (_a) {
     var _b;
     var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
     if (!saveValueAsString)
         return valueProp;
     var allOptions = optionsFn ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, ((0, toArray_1.toArray)(optionsFn.args) || [])) : options;
-    if ((0, exports.isGroupedData)(allOptions)) {
+    if (isGroupedData(allOptions)) {
         // For grouped data, search through all options in all groups
         for (var _i = 0, allOptions_1 = allOptions; _i < allOptions_1.length; _i++) {
             var group = allOptions_1[_i];
@@ -64,7 +51,7 @@ var getValue_MULTI = function (_a) {
         return valueProp;
     var allOptions = optionsFn
         ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, ((0, toArray_1.toArray)(optionsFn.args) || [])) : options;
-    if ((0, exports.isGroupedData)(allOptions)) {
+    if (isGroupedData(allOptions)) {
         // For grouped data, map each value and search through all options in all groups
         return valueProp.map(function (vProp) {
             for (var _i = 0, allOptions_2 = allOptions; _i < allOptions_2.length; _i++) {

package/dist/v2/components/List/comps/ListGroup.js

@@ -14,7 +14,7 @@ var Divider_1 = require("../../Divider");
 var themes_1 = require("../../../themes");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ListItem_1 = require("./ListItem");
-exports.GroupHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n"], ["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n"])), themes_1.colors.grey50);
+exports.GroupHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n  position: sticky;\n  top: 0;\n  width: 100%;\n  background: white;\n  z-index: 1000;\n"], ["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n  position: sticky;\n  top: 0;\n  width: 100%;\n  background: white;\n  z-index: 1000;\n"])), themes_1.colors.grey50);
 exports.GroupDivider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.4rem 0 0.8rem 0;\n"], ["\n  margin: 0.4rem 0 0.8rem 0;\n"])));
 var ListGroup = function (_a) {
     var id = _a.id, group = _a.group, index = _a.index, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, isMulti = _a.isMulti, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus;

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

@@ -1,5 +1,5 @@
 export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, grouped, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style }: {
+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 }: {
     id: any;
     options?: any[];
     value: any;
@@ -13,7 +13,6 @@ export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView,
     isMulti?: boolean;
     isTagsStyle: any;
     setFocusSelectTagsInput: any;
-    grouped?: boolean;
     disableShadow: any;
     isSearchable: any;
     searchbarPlaceholder: any;

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

@@ -55,14 +55,26 @@ exports.StyledListWrapper = styled_components_1.default.div(templateObject_3 ||
     var enableBorder = _a.enableBorder;
     return enableBorder && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: 1px solid ", ";\n    "], ["\n      border: 1px solid ", ";\n    "])), themes_1.colors.grey10);
 });
+var isGroupedData = function (options) {
+    // If the data is empty or not an array, return false
+    if (!options || !Array.isArray(options) || options.length === 0) {
+        return false;
+    }
+    // Check the first item in the array
+    // If it has an 'options' property that is an array, it's grouped data
+    return (options[0] &&
+        typeof options[0] === "object" &&
+        Array.isArray(options[0].options) &&
+        options[0].options.length > 0);
+};
 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, _d = _a.grouped, grouped = _d === void 0 ? false : _d, 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;
+    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;
     var renderListItems = function () {
         if (options.length === 0) {
             return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
         }
-        if (grouped) {
+        if (isGroupedData(options)) {
             return (react_1.default.createElement(react_1.Fragment, null, options.map(function (group, index) { return (react_1.default.createElement(ListGroup_1.ListGroup, { id: id, key: "group-".concat(index), group: group, index: index, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef, isMulti: isMulti, isTagsStyle: isTagsStyle, setFocusSelectTagsInput: setFocusSelectTagsInput, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, disableShadow: disableShadow })); })));
         }
         return options.map(function (option, index) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === index, index: index, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function () {

package/package.json

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