intelicoreact 1.5.41 → 1.6.0

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.scss

@@ -1,4 +1,4 @@
-@import "../../../scss/vars";
+@use "../../../scss/vars";
 
 .dropdown-live-search {
   position: relative;
@@ -40,7 +40,7 @@
     }
 
     &.error {
-      border-color: $color--secondary;
+      border-color: vars.$color--secondary;
     }
 
     &.placeholder .text {
@@ -92,7 +92,7 @@
 
     &::-webkit-scrollbar-thumb {
       border-radius: 4px;
-      background: $color--gray--dark;
+      background: vars.$color--gray--dark;
     }
 
     &-top {
@@ -117,7 +117,7 @@
       cursor: pointer;
       white-space: nowrap;
 
-      color: $color--dark;
+      color: vars.$color--dark;
       border: none;
       background: transparent;
 
@@ -155,7 +155,7 @@
 
       &:hover,
       &_active {
-        background: $color--gray--gentle;
+        background: vars.$color--gray--gentle;
       }
 
       &_disabled {
@@ -242,24 +242,28 @@
 
 .dropdown-live-search-mobile {
   .dropdown-live-search__arrow {
+    top: 50%;
+
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+
     transform: rotate(90deg) translateX(-50%);
-    top: 50%;
 
     svg {
       width: 12px;
       height: 12px;
-      color: #9AA0B9;
+
+      color: #9aa0b9;
     }
   }
   .dropdown-live-search__container-wrapper {
-    overflow: hidden !important;
     position: fixed;
     top: 0 !important;
     left: 0 !important;
 
+    overflow: hidden !important;
+
     width: 100dvw;
     height: 100dvh;
     max-height: 100dvh;
@@ -283,28 +287,27 @@
     width: 100dvw;
     height: 100dvh;
     max-height: 100dvh;
-    padding: $spacing-s;
+    padding: vars.$spacing-s;
 
     animation-name: slideup;
     animation-duration: 0.4s;
   }
 
   .dropdown-live-search__container {
+    --spacing: vars.$spacing-s;
     position: absolute;
-    bottom: $spacing-s;
-    top: auto;
     z-index: auto;
-    width: calc(100% - calc(2 * $spacing-s));
-    margin: 0;
-    box-sizing: border-box;
+    top: auto;
+    bottom: var(--spacing);
 
     overflow: hidden;
 
     box-sizing: border-box;
-
-    border-radius: $spacing-l !important;
+    width: calc(100% - calc(2 * var(--spacing)));
     max-height: 500px;
-    // height: 500px !important;
+    margin: 0;
+
+    border-radius: vars.$spacing-l !important;
 
     &--with-bottom-shadow::after {
       position: absolute;
@@ -339,18 +342,19 @@
 
   .dropdown-live-search__list {
     max-height: 500px;
-    box-shadow: none;
     padding: 0 16px 16px !important;
 
+    box-shadow: none;
+
     &-header {
       position: relative;
 
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      gap: $spacing-m;
+      gap: vars.$spacing-m;
 
-      padding: $spacing-m;
+      padding: vars.$spacing-m;
 
       font-size: 16px;
       font-weight: 600;
@@ -376,7 +380,7 @@
           align-items: center;
 
           width: 100%;
-          padding-right: $spacing-s;
+          padding-right: vars.$spacing-s;
 
           border: 1px solid var(--form-input-border, #e1e8f1);
           border-radius: 6px;
@@ -395,7 +399,7 @@
           width: 24px;
           min-width: 24px;
           height: 24px;
-          padding: $spacing-xs;
+          padding: vars.$spacing-xs;
 
           border-radius: 2px;
           background: var(--bg-gray-box, #f0f1f4);
@@ -446,15 +450,15 @@
       .dropdown-live-search__input {
         display: flex;
         align-items: center;
-    
+
         width: 100%;
         height: 28px;
-        padding-right: $spacing-s;
-    
+        padding-right: vars.$spacing-s;
+
         border: 1px solid var(--form-input-border, #e1e8f1);
         border-radius: 6px;
         background: var(--black-bg-color, #f8fbff) !important;
-    
+
         input {
           background: unset !important;
         }
@@ -473,7 +477,7 @@
       box-sizing: border-box;
       width: 50px;
       height: 50px;
-      padding: $spacing-m;
+      padding: vars.$spacing-m;
 
       svg {
         width: 16px;
@@ -488,7 +492,7 @@
       justify-content: space-between;
 
       height: auto !important;
-      padding: 10px $spacing-s !important;
+      padding: 10px vars.$spacing-s !important;
 
       line-height: 24px;
 

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.stories.js

@@ -0,0 +1,272 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DropdownLiveSearchTemplate: function() {
+        return DropdownLiveSearchTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _DropdownLiveSearch = /*#__PURE__*/ _interop_require_default(require("./DropdownLiveSearch"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const _default = {
+    title: "Form Elements/DropdownLiveSearch",
+    component: _DropdownLiveSearch.default,
+    argTypes: {
+        className: {
+            description: "string"
+        },
+        value: {
+            description: "string - current option"
+        },
+        isSearchable: {
+            description: "boolean - enable search",
+            type: "boolean",
+            defaultValue: false
+        },
+        onChange: {
+            description: "callback return selected value"
+        },
+        entity: {
+            description: "string"
+        },
+        attributesOfNativeInput: {
+            description: "Object. Optional. This is list of attributes to add in native search-input"
+        }
+    }
+};
+const blockStyles = {
+    display: "flex",
+    flexFlow: "row no-wrap",
+    alignItems: "flex-start",
+    height: "300px",
+    background: "#e9eaeb",
+    padding: "10px"
+};
+const buttonStyles = {
+    border: "solid 1px #000",
+    padding: "5px",
+    margin: "0 0 0 50px"
+};
+const separatorStyles = {
+    display: 'block',
+    marginBottom: '20px'
+};
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)(args.value);
+    const [disabled, setDisabled] = (0, _react.useState)(args.disabled);
+    const [isLoading, setIsLoading] = (0, _react.useState)(false);
+    const [newOptions, setNewOptions] = (0, _react.useState)(args.options);
+    //request emulation
+    const doRequest = async (debouncedSearchTerm, isScrollDown)=>{
+        if (isScrollDown) {
+            setIsLoading(true);
+            setDisabled(true);
+            const res = await fetch("test").then((res)=>{
+                setTimeout(()=>{
+                    args.isSearchable && setNewOptions(args.options.filter((item)=>item.label.toLowerCase().includes(debouncedSearchTerm === null || debouncedSearchTerm === void 0 ? void 0 : debouncedSearchTerm.toLowerCase())));
+                    setIsLoading(false);
+                    setDisabled(false);
+                }, 1000);
+            });
+        } else {
+            setNewOptions(args.options.filter((item)=>item.label.toLowerCase().includes(debouncedSearchTerm === null || debouncedSearchTerm === void 0 ? void 0 : debouncedSearchTerm.toLowerCase())));
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: blockStyles,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        width: 200
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DropdownLiveSearch.default, {
+                        ...args,
+                        doRequest: doRequest,
+                        value: value,
+                        onChange: (val)=>setValue(val),
+                        isLoading: isLoading,
+                        options: newOptions,
+                        withMobileLogic: true,
+                        label: "Test"
+                    })
+                }, "dropdown"),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    style: buttonStyles,
+                    onClick: ()=>{
+                        setValue("");
+                    // doRequest('');
+                    },
+                    children: "Clear"
+                })
+            ]
+        })
+    });
+};
+const DropdownLiveSearchTemplate = Template.bind({});
+DropdownLiveSearchTemplate.args = {
+    value: "",
+    placeholder: "Placeholder",
+    isSearchable: true,
+    isNotValidateASCII: false,
+    fieldKey: "test-dropdown-live-search",
+    id: "test-dropdown-live-search",
+    disabled: false,
+    isListTop: false,
+    options: [
+        {
+            label: "bDropdown2",
+            value: 636,
+            postfix: "(postfix)",
+            className: "optionClassName"
+        },
+        {
+            label: "dDropdown3",
+            value: "drop3",
+            disabled: true
+        },
+        {
+            label: "CDropdown4",
+            value: "drop4"
+        },
+        {
+            label: "other",
+            value: "other"
+        },
+        {
+            label: "other2",
+            value: "other2"
+        },
+        {
+            label: "other3",
+            value: "other3"
+        },
+        {
+            label: "ADropdown1",
+            value: "drop1"
+        },
+        {
+            label: "FDropdown5 (HELLO)",
+            value: "drop5"
+        },
+        {
+            label: "EDropdown6 hidden text lorem ipsum",
+            value: "drop6"
+        },
+        {
+            label: "Group 11",
+            value: "group111"
+        },
+        {
+            label: "Group 13",
+            value: "group132"
+        },
+        {
+            label: "Group 12",
+            value: "group123",
+            disabled: true
+        },
+        {
+            label: "Dot3her",
+            value: "oth3er1"
+        },
+        {
+            label: "BGroup 13",
+            value: "group13"
+        },
+        {
+            label: "AGroup 12",
+            value: "group12",
+            disabled: true
+        },
+        {
+            label: "AGroup 11",
+            value: "group14"
+        },
+        {
+            label: "AGroup 11",
+            value: "group15"
+        },
+        {
+            label: "AGroup 11",
+            value: "group16"
+        },
+        {
+            label: "AGroup 11",
+            value: "group17"
+        },
+        {
+            label: "AGroup 11",
+            value: "group18"
+        },
+        {
+            label: "AGroup 11",
+            value: "group19"
+        },
+        {
+            label: "AGroup 11",
+            value: "group20"
+        },
+        {
+            label: "AGroup 11",
+            value: "group21"
+        }
+    ]
+};

package/dist/Atomic/FormElements/FileLoader/FileLoader.js

@@ -1,76 +1,109 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _LoadZone = _interopRequireDefault(require("./partial/LoadZone"));
-var _LoadedContent = _interopRequireDefault(require("./partial/LoadedContent"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _LoadZone = /*#__PURE__*/ _interop_require_default(require("./partial/LoadZone"));
+const _LoadedContent = /*#__PURE__*/ _interop_require_default(require("./partial/LoadedContent"));
 require("./FileLoader.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 const RC = "file-loader";
-const FileLoader = props => {
-  const {
-    // будет использован в качестве id инпута в LoadZone, обязателен для корректной работы
-    fieldKey,
-    // null или структура { name, path, ... остальное по желанию }
-    value,
-    disabled,
-    error,
-    className,
-    placeholder,
-    onChange,
-    doLoad,
-    filterFiles,
-    processErrors,
-    isBlockNullValues,
-    isDisableErrorsClass = true,
-    uploadIcon,
-    downloadIcon,
-    deleteIcon,
-    spiner,
-    isIconAfter,
-    isLinkTypeDownload = false,
-    isUseLinkTitle = false,
-    attributesOfNativeInput = {}
-  } = props;
-  const [isLoadContent, setIsLoadContent] = (0, _react.useState)(false);
-  const [dragenter, setDragenter] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(RC, className, {
-      [`${RC}_load-content`]: isLoadContent,
-      [`${RC}_load-zone`]: !value,
-      [`${RC}_hover`]: dragenter,
-      [`${RC}_disabled`]: disabled,
-      [`${RC}_error`]: !isDisableErrorsClass && Boolean(error)
-    })
-  }, isLoadContent && spiner, !doLoad && "develop error: no doLoad", Boolean(doLoad) && Boolean(value) && /*#__PURE__*/_react.default.createElement(_LoadedContent.default, {
-    RC: RC,
-    value: value,
-    onDelete: () => onChange(null),
-    icon: downloadIcon,
-    isIconAfter: isIconAfter,
-    deleteIcon: deleteIcon,
-    isUseLinkTitle: isUseLinkTitle,
-    isLinkTypeDownload: isLinkTypeDownload
-  }), Boolean(doLoad) && !value && /*#__PURE__*/_react.default.createElement(_LoadZone.default, {
-    RC: RC,
-    fieldKey: fieldKey,
-    onChange: onChange,
-    icon: uploadIcon,
-    doLoad: doLoad,
-    dragenter: dragenter,
-    setDragenter: setDragenter,
-    setIsLoadContent: setIsLoadContent,
-    placeholder: placeholder,
-    filterFiles: filterFiles,
-    processErrors: processErrors,
-    isBlockNullValues: isBlockNullValues,
-    attributesOfNativeInput: attributesOfNativeInput
-  }));
+const FileLoader = (props)=>{
+    const { // будет использован в качестве id инпута в LoadZone, обязателен для корректной работы
+    fieldKey, // null или структура { name, path, ... остальное по желанию }
+    value, disabled, error, className, placeholder, onChange, doLoad, filterFiles, processErrors, isBlockNullValues, isDisableErrorsClass = true, uploadIcon, downloadIcon, deleteIcon, spiner, isIconAfter, isLinkTypeDownload = false, isUseLinkTitle = false, attributesOfNativeInput = {} } = props;
+    const [isLoadContent, setIsLoadContent] = (0, _react.useState)(false);
+    const [dragenter, setDragenter] = (0, _react.useState)(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}_load-content`]: isLoadContent,
+            [`${RC}_load-zone`]: !value,
+            [`${RC}_hover`]: dragenter,
+            [`${RC}_disabled`]: disabled,
+            [`${RC}_error`]: !isDisableErrorsClass && Boolean(error)
+        }),
+        children: [
+            isLoadContent && spiner,
+            !doLoad && "develop error: no doLoad",
+            Boolean(doLoad) && Boolean(value) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_LoadedContent.default, {
+                RC: RC,
+                value: value,
+                onDelete: ()=>onChange(null),
+                icon: downloadIcon,
+                isIconAfter: isIconAfter,
+                deleteIcon: deleteIcon,
+                isUseLinkTitle: isUseLinkTitle,
+                isLinkTypeDownload: isLinkTypeDownload
+            }),
+            Boolean(doLoad) && !value && /*#__PURE__*/ (0, _jsxruntime.jsx)(_LoadZone.default, {
+                RC: RC,
+                fieldKey: fieldKey,
+                onChange: onChange,
+                icon: uploadIcon,
+                doLoad: doLoad,
+                dragenter: dragenter,
+                setDragenter: setDragenter,
+                setIsLoadContent: setIsLoadContent,
+                placeholder: placeholder,
+                filterFiles: filterFiles,
+                processErrors: processErrors,
+                isBlockNullValues: isBlockNullValues,
+                attributesOfNativeInput: attributesOfNativeInput
+            })
+        ]
+    });
 };
-var _default = exports.default = FileLoader;
+const _default = FileLoader;

package/dist/Atomic/FormElements/FileLoader/FileLoader.scss

@@ -1,5 +1,3 @@
-// @import '../../scss/main.scss';
-
 .file-loader {
   position: relative;