oolib 2.202.1 → 2.203.0

package/dist/icons/index.d.ts

@@ -131,6 +131,7 @@ export namespace icons {
     export { ChartBarHorizontal };
     export { GridNine };
     export { ChartDonut };
+    export { Translate };
     export { SlidersHorizontal };
     export { Stack };
     export { OkeGoogleIcon };
@@ -329,6 +330,7 @@ import { ShareIcon as Share } from '@phosphor-icons/react';
 import { ChartBarHorizontalIcon as ChartBarHorizontal } from '@phosphor-icons/react';
 import { GridNineIcon as GridNine } from '@phosphor-icons/react';
 import { ChartDonutIcon as ChartDonut } from '@phosphor-icons/react';
+import { TranslateIcon as Translate } from '@phosphor-icons/react';
 import { SlidersHorizontalIcon as SlidersHorizontal } from '@phosphor-icons/react';
 import { StackIcon as Stack } from '@phosphor-icons/react';
 import { OkeGoogleIcon } from "./custom";

package/dist/icons/index.js

@@ -136,6 +136,7 @@ exports.icons = {
     ChartBarHorizontal: react_1.ChartBarHorizontalIcon,
     GridNine: react_1.GridNineIcon,
     ChartDonut: react_1.ChartDonutIcon,
+    Translate: react_1.TranslateIcon,
     SlidersHorizontal: react_1.SlidersHorizontalIcon,
     Stack: react_1.StackIcon,
     //custom icons

package/dist/v2/components/Dropdowns/DropdownMulti/index.js

@@ -163,6 +163,11 @@ function DropdownMulti(_a) {
         // hideShowOtherTextInputOnSelect_MULTI,
         saveValueAsString: saveValueAsString
     }); };
+    var handleClearAll = function () {
+        var newValForParent = saveValueAsString ? [] : [];
+        parentOnChange && parentOnChange(id, newValForParent);
+        setSearchString('');
+    };
     var genDisplayComp = function () {
         if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
             return null;
@@ -172,7 +177,7 @@ function DropdownMulti(_a) {
     var _h = (0, react_1.useState)(false), focusSelectTagsInput = _h[0], setFocusSelectTagsInput = _h[1];
     var genSelectTagsInput = function (ops) {
         if (ops === void 0) { ops = {}; }
-        return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, handleSelect: handleSelect, searchString: searchString,
+        return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, handleSelect: handleSelect, handleClearAll: handleClearAll, searchString: searchString,
             setSearchString: setSearchString,
             single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled, style: ops.style }));
     };

package/dist/v2/components/Dropdowns/comps/SelectTagsInput/index.d.ts

@@ -1,4 +1,4 @@
-export function SelectTagsInput({ id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, tagColor, style }: {
+export function SelectTagsInput({ id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, handleClearAll, tagColor, style }: {
     id: any;
     value: any;
     disabled: any;
@@ -11,6 +11,7 @@ export function SelectTagsInput({ id, value, disabled, handleSelect, searchStrin
     single_multi: any;
     showOptions: any;
     S: any;
+    handleClearAll: any;
     tagColor: any;
     style: any;
 }): React.JSX.Element;

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

@@ -38,12 +38,14 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
 var toArray_1 = require("../../../../../utils/toArray");
 var utilsOolib_1 = require("../../../../../utilsOolib");
-var styled_1 = require("../../styled");
 var genTagComp_1 = require("../../utils/genTagComp");
-var styled_2 = require("./styled");
+var styled_1 = require("./styled");
 var getKeyCode_1 = require("../../../../../utils/getKeyCode");
 var themes_1 = require("../../../../themes");
+var TextInputs_1 = require("../../../TextInputs");
+var Buttons_1 = require("../../../Buttons");
 var Typo2_1 = require("../../../Typo2");
+var __1 = require("../../../../..");
 var SelectTagsInput = function (_a) {
     var 
     //from root
@@ -52,7 +54,7 @@ var SelectTagsInput = function (_a) {
     handleSelect = _a.handleSelect, searchString = _a.searchString, setSearchString = _a.setSearchString, placeholder = _a.placeholder, 
     // minHeight, // standard | wide | actual height in rem
     setFocusSelectTagsInput = _a.setFocusSelectTagsInput, focusSelectTagsInput = _a.focusSelectTagsInput, //force focus when after an option is selected in multiselect
-    single_multi = _a.single_multi, showOptions = _a.showOptions, S = _a.S, tagColor = _a.tagColor, style = _a.style;
+    single_multi = _a.single_multi, showOptions = _a.showOptions, S = _a.S, handleClearAll = _a.handleClearAll, tagColor = _a.tagColor, style = _a.style;
     var inputRef = (0, react_1.useRef)(null);
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
@@ -74,32 +76,14 @@ var SelectTagsInput = function (_a) {
             handleFocus(true);
         }
     }, [focusSelectTagsInput]);
-    var genSelectedTagsTextLabel = function () {
-        var TYPO_COMP = S ? Typo2_1.UI_BODY_SM : Typo2_1.UI_BODY;
-        return (react_1.default.createElement("div", { style: {
-                minHeight: S ? "2rem" : "3rem",
-                display: "flex",
-                alignItems: "center",
-            } },
-            react_1.default.createElement(TYPO_COMP, { color: disabled
-                    ? themes_1.colors.grey40
-                    : themes_1.colors.grey80 }, "".concat(localize('Selected Tags'), ":"))));
-    };
     var genSelectComp = function () {
-        // const minHeightStyle = minHeight
-        //   ? minHeight === "standard"
-        //     ? "4rem"
-        //     : minHeight === "wide"
-        //     ? "9rem"
-        //     : minHeight // else use explicit value
-        //   : "9rem"; //wide by default
-        return (react_1.default.createElement(styled_2.StyledSelectTagsInputContainer, { onKeyDown: blurInputOnEscKey, 
-            // style={{ minHeight: '9rem' }}
-            style: style, className: "".concat(isFocussed ? "focussed" : ""), disabled: disabled, onFocus: function () {
-                handleFocus(true);
-            }, onBlur: function () { return handleFocus(false); }, tabIndex: 0 },
-            react_1.default.createElement(styled_1.StyledTagsInputWrapper, null,
-                genSelectedTagsTextLabel(),
+        return (react_1.default.createElement(styled_1.StyledSelectTagsWrapper, { style: style, disabled: disabled, className: "".concat(isFocussed ? "focussed" : "") },
+            react_1.default.createElement("div", { style: { display: "flex", gap: "0.4rem", alignItems: "center", height: "2.4rem" } },
+                " ",
+                single_multi === "multi" ?
+                    react_1.default.createElement(Buttons_1.ButtonTertiaryCompact, { onClick: function () { return handleClearAll(); }, children: "Clear all", disabled: !value || !value.length })
+                    :
+                        react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, { style: { color: __1.colors2.grey50 } }, "Selected : "),
                 value &&
                     (0, toArray_1.toArray)(value).map(function (d) {
                         return (0, genTagComp_1.genTagComp)(id, d, {
@@ -110,11 +94,13 @@ var SelectTagsInput = function (_a) {
                             S: S,
                             color: tagColor
                         });
-                    }),
-                //   isCombobox ? (
-                react_1.default.createElement(styled_2.StyledTagsSelectTextInput, { ref: inputRef, className: S ? "UI_BODY_SM" : "UI_BODY", style: { color: themes_1.colors.grey80 }, placeholder: localize(placeholder || "Type to Search"), type: "text", value: searchString, onBlur: function () {
-                        return setFocusSelectTagsInput && setFocusSelectTagsInput(false);
-                    }, onChange: function (e) { return setSearchString(e.target.value); } }))));
+                    })),
+            react_1.default.createElement(TextInputs_1.TextInput, { onKeyDown: blurInputOnEscKey, onFocus: function () {
+                    handleFocus(true);
+                }, ref: inputRef, className: S ? "UI_BODY_SM" : "UI_BODY", style: { color: themes_1.colors.grey80 }, placeholder: localize(placeholder || "Type to Search"), icon: "Tag", value: searchString, onBlur: function () {
+                    handleFocus(false);
+                    setFocusSelectTagsInput && setFocusSelectTagsInput(false);
+                }, onChange: function (id, v) { return setSearchString(v); } })));
     };
     return genSelectComp();
 };

package/dist/v2/components/Dropdowns/comps/SelectTagsInput/styled.d.ts

@@ -1,2 +1 @@
-export const StyledTagsSelectTextInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export const StyledSelectTagsInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSelectTagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/v2/components/Dropdowns/comps/SelectTagsInput/styled.js

@@ -3,48 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledSelectTagsInputContainer = exports.StyledTagsSelectTextInput = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var globalVariables_1 = require("../../../../../globalStyles/globalVariables");
-var mixins_1 = require("../../../../../themes/mixins");
-var themes_1 = require("../../../../themes");
-exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: inherit;\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: inherit;\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), globalVariables_1.globalInputElemPadding, themes_1.colors.grey40);
-exports.StyledSelectTagsInputContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"], ["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"])), themes_1.colors.grey5, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
-}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalInputElemFocused, globalVariables_1.globalInputElemHover);
-var templateObject_1, templateObject_2, templateObject_3;
+exports.StyledSelectTagsWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledSelectTagsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.8rem;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0.8rem;\n"])));
+var templateObject_1;

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

@@ -14,7 +14,11 @@ var genTagComp = function (id, d, options) {
     switch (true) {
         case !options.display:
             return (react_1.default.createElement("div", { tabIndex: 0, style: { minWidth: 0 }, onFocus: function (e) { return !showOptions && e.stopPropagation(); } },
-                react_1.default.createElement(Tags_1.TagClear, { XS: options.S, grey: true, display: d.display, onClick: function (e) {
+                react_1.default.createElement(Tags_1.TagClear
+                // size={options.S}
+                , { 
+                    // size={options.S}
+                    grey: true, display: d.display, onClick: function (e) {
                         e.stopPropagation();
                         options.handleSelect(options.single_multi === "single" ? undefined : d);
                     } })));

package/package.json

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