oolib 2.210.0 → 2.211.0

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.
Files changed (9) hide show
  1. package/dist/stories/v2/components/List.stories.d.ts +15 -3
  2. package/dist/stories/v2/components/List.stories.js +8 -1
  3. package/dist/v2/components/List/comps/ListGroup.d.ts +2 -1
  4. package/dist/v2/components/List/comps/ListGroup.js +2 -2
  5. package/dist/v2/components/List/comps/ListItem.d.ts +2 -1
  6. package/dist/v2/components/List/comps/ListItem.js +9 -2
  7. package/dist/v2/components/List/index.d.ts +2 -1
  8. package/dist/v2/components/List/index.js +3 -3
  9. package/package.json +1 -1
package/dist/stories/v2/components/List.stories.d.ts CHANGED
@@ -72,6 +72,17 @@ declare namespace _default {
72
72
  let defaultValue_7: string;
73
73
  export { defaultValue_7 as defaultValue };
74
74
  }
75
+ namespace iconAfter {
76
+ export namespace control_8 {
77
+ let type: string;
78
+ }
79
+ export { control_8 as control };
80
+ let description_9: string;
81
+ export { description_9 as description };
82
+ export { availableIcons as options };
83
+ let defaultValue_8: any;
84
+ export { defaultValue_8 as defaultValue };
85
+ }
75
86
  }
76
87
  }
77
88
  export default _default;
@@ -87,10 +98,11 @@ export namespace ListItem_ {
87
98
  let name_2: string;
88
99
  export { name_2 as name };
89
100
  export { availableIcons as options };
90
- export namespace control_8 {
91
- let type: string;
101
+ export namespace control_9 {
102
+ let type_1: string;
103
+ export { type_1 as type };
92
104
  }
93
- export { control_8 as control };
105
+ export { control_9 as control };
94
106
  }
95
107
  }
96
108
  export { argTypes_1 as argTypes };
package/dist/stories/v2/components/List.stories.js CHANGED
@@ -148,6 +148,13 @@ exports.default = {
148
148
  description: "Align checkbox",
149
149
  defaultValue: "left",
150
150
  },
151
+ iconAfter: {
152
+ control: "text",
153
+ description: "Icon after",
154
+ options: availableIcons,
155
+ control: { type: "select" },
156
+ defaultValue: undefined,
157
+ },
151
158
  },
152
159
  };
153
160
  var List_ = function (args) {
@@ -192,7 +199,7 @@ var List_ = function (args) {
192
199
  };
193
200
  return (React.createElement(__1.Container, { style: { background: "#eff" } },
194
201
  React.createElement(__1.PaddingTop40, null),
195
- 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, alignCheckbox: args.alignCheckbox, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
202
+ 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, alignCheckbox: args.alignCheckbox, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, iconAfter: args.iconAfter }),
196
203
  React.createElement(__1.PaddingBottom40, null)));
197
204
  };
198
205
  exports.List_ = List_;
package/dist/v2/components/List/comps/ListGroup.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export const GroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export const GroupDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, groupHeaderStickyTop, alignCheckbox, }: {
3
+ export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedOpIntoView, onChange: parentOnChange, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, groupHeaderStickyTop, alignCheckbox, iconAfter }: {
4
4
  id: any;
5
5
  group: any;
6
6
  index: any;
@@ -19,5 +19,6 @@ export function ListGroup({ id, group, index, value, focussedOp, scrollFocussedO
19
19
  setSearchBarFocus: any;
20
20
  groupHeaderStickyTop?: number;
21
21
  alignCheckbox?: string;
22
+ iconAfter: any;
22
23
  }): React.JSX.Element;
23
24
  import React from 'react';
package/dist/v2/components/List/comps/ListGroup.js CHANGED
@@ -20,7 +20,7 @@ exports.GroupHeader = styled_components_1.default.div(templateObject_1 || (templ
20
20
  });
21
21
  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"])));
22
22
  var ListGroup = function (_a) {
23
- 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, _b = _a.groupHeaderStickyTop, groupHeaderStickyTop = _b === void 0 ? 0 : _b, _c = _a.alignCheckbox, alignCheckbox = _c === void 0 ? "left" : _c;
23
+ 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, _b = _a.groupHeaderStickyTop, groupHeaderStickyTop = _b === void 0 ? 0 : _b, _c = _a.alignCheckbox, alignCheckbox = _c === void 0 ? "left" : _c, iconAfter = _a.iconAfter;
24
24
  return (react_1.default.createElement("div", null,
25
25
  index > 0 && (react_1.default.createElement(exports.GroupDivider, null,
26
26
  react_1.default.createElement(Divider_1.Divider, null))),
@@ -36,7 +36,7 @@ var ListGroup = function (_a) {
36
36
  if (setFocusSelectTagsInput)
37
37
  setFocusSelectTagsInput(true);
38
38
  }
39
- }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: group.options.length === idx + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value, alignCheckbox: alignCheckbox })); })));
39
+ }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: group.options.length === idx + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value, alignCheckbox: alignCheckbox, iconAfter: iconAfter })); })));
40
40
  };
41
41
  exports.ListGroup = ListGroup;
42
42
  var templateObject_1, templateObject_2;
package/dist/v2/components/List/comps/ListItem.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpIntoView, onChange: parentOnChange, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, alignCheckbox, }: {
1
+ export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpIntoView, onChange: parentOnChange, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, alignCheckbox, iconAfter }: {
2
2
  id: any;
3
3
  option: any;
4
4
  isSelected: any;
@@ -14,5 +14,6 @@ export function ListItem({ id, option, isSelected, isFocussed, scrollFocussedOpI
14
14
  value: any;
15
15
  index: any;
16
16
  alignCheckbox?: string;
17
+ iconAfter: any;
17
18
  }): React.JSX.Element;
18
19
  import React from "react";
package/dist/v2/components/List/comps/ListItem.js CHANGED
@@ -17,7 +17,7 @@ var RadioAndCheckbox_1 = require("../../RadioAndCheckbox");
17
17
  var styled_1 = require("./styled");
18
18
  var grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
19
19
  var ListItem = function (_a) {
20
- var id = _a.id, option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index, _b = _a.alignCheckbox, alignCheckbox = _b === void 0 ? "left" : _b;
20
+ var id = _a.id, option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index, _b = _a.alignCheckbox, alignCheckbox = _b === void 0 ? "left" : _b, iconAfter = _a.iconAfter;
21
21
  var theme = (0, styled_components_1.useTheme)();
22
22
  var TypoComp = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_SM_DF;
23
23
  var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled;
@@ -65,6 +65,13 @@ var ListItem = function (_a) {
65
65
  react_1.default.createElement("div", null,
66
66
  react_1.default.createElement(TypoComp, { semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || ""), style: { color: disabled ? grey40 : grey80 } }, (0, getText_1.getText)(display)),
67
67
  desc && (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { className: "OKE-Dropdown__optionDesc", style: { color: disabled ? grey40 : grey60, marginTop: "0.2rem" } }, (0, getText_1.getText)(desc))))),
68
- react_1.default.createElement(styled_1.StyledRightSection, null, alignCheckbox === "right" && renderCheckBox())));
68
+ react_1.default.createElement(styled_1.StyledRightSection, null,
69
+ alignCheckbox === "right" && renderCheckBox(),
70
+ iconAfter && (0, genIcon_1.genIcon)({
71
+ icon: iconAfter,
72
+ S: S,
73
+ className: "OKE-Dropdown__optionIcon",
74
+ disabled: disabled
75
+ }))));
69
76
  };
70
77
  exports.ListItem = ListItem;
package/dist/v2/components/List/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export function isGroupedData(options: any): boolean;
3
- 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, alignCheckbox }: {
3
+ 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, alignCheckbox, iconAfter }: {
4
4
  id: any;
5
5
  options?: any[];
6
6
  value: any;
@@ -28,5 +28,6 @@ export function List({ id, options, value, focussedOp, scrollFocussedOpIntoView,
28
28
  showList: any;
29
29
  usedIn: any;
30
30
  alignCheckbox: any;
31
+ iconAfter: any;
31
32
  }): React.JSX.Element;
32
33
  import React from 'react';
package/dist/v2/components/List/index.js CHANGED
@@ -67,13 +67,13 @@ var isGroupedData = function (options) {
67
67
  exports.isGroupedData = isGroupedData;
68
68
  var List = function (_a) {
69
69
  // const theme = useTheme();
70
- 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, alignCheckbox = _a.alignCheckbox;
70
+ 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, alignCheckbox = _a.alignCheckbox, iconAfter = _a.iconAfter;
71
71
  var renderListItems = function () {
72
72
  if (options.length === 0) {
73
73
  return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
74
74
  }
75
75
  if ((0, exports.isGroupedData)(options)) {
76
- 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, groupHeaderStickyTop: groupHeaderStickyTop, alignCheckbox: alignCheckbox })); })));
76
+ 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, groupHeaderStickyTop: groupHeaderStickyTop, alignCheckbox: alignCheckbox, iconAfter: iconAfter })); })));
77
77
  }
78
78
  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 () {
79
79
  if (!option.loading) {
@@ -85,7 +85,7 @@ var List = function (_a) {
85
85
  if (setFocusSelectTagsInput)
86
86
  setFocusSelectTagsInput(true);
87
87
  }
88
- }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value, alignCheckbox: alignCheckbox })); });
88
+ }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value, alignCheckbox: alignCheckbox, iconAfter: iconAfter })); });
89
89
  };
90
90
  return (react_1.default.createElement(exports.StyledListWrapper, { disableShadow: disableShadow, style: style, isSearchable: isSearchable, enableBorder: enableBorder },
91
91
  isSearchable && (react_1.default.createElement(SearchBar_1.SearchBar, { searchbarPlaceholder: searchbarPlaceholder, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.210.0",
3
+ "version": "2.211.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",