@vchasno/ui-kit 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.4] - 2024-05-20
+
+## Fixed
+
+-   fix `SelectCreatable` styles
+-   fix `LabelText` styles
+
+## [0.3.3] - 2024-05-13
+
+## Fixed
+
+-   fix `ProjectsPopover` link generation, mobile responsive design
+
 ## [0.3.2] - 2024-05-04
 
 ## Added
@@ -14,7 +27,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   add `BlackTooltip` component MUI tooltip with black background
 -   add `ProjectsPopover` marketing component for show projects list
 
-
 ## [0.3.1] - 2024-05-01
 
 ## Changed

package/dist/Datepicker/index.cjs.js

@@ -15540,7 +15540,7 @@ var InputMeta = function (_a) {
         error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
+var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\nlabel[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\nlabel[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
 styleInject(css_248z$2);
 
 var LabelText = function (_a) {

package/dist/Datepicker/index.js

@@ -15520,7 +15520,7 @@ var InputMeta = function (_a) {
         error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
+var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\nlabel[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\nlabel[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
 styleInject(css_248z$2);
 
 var LabelText = function (_a) {

package/dist/Datepicker/types/components/ProjectsPopover/utils.d.ts

@@ -5,5 +5,6 @@ interface ComposeLinkOptions {
     targetProduct: AllProducts;
     queryParams?: Record<string, string>;
 }
+export declare const composeZakupivliLink: ({ targetProduct, }: Pick<ComposeLinkOptions, 'targetProduct'>) => string;
 export declare const composeLink: ({ targetProduct, ctxProduct, queryParams, edrpou, }: ComposeLinkOptions) => string;
 export {};

package/dist/Menu/types/components/ProjectsPopover/utils.d.ts

@@ -5,5 +5,6 @@ interface ComposeLinkOptions {
     targetProduct: AllProducts;
     queryParams?: Record<string, string>;
 }
+export declare const composeZakupivliLink: ({ targetProduct, }: Pick<ComposeLinkOptions, 'targetProduct'>) => string;
 export declare const composeLink: ({ targetProduct, ctxProduct, queryParams, edrpou, }: ComposeLinkOptions) => string;
 export {};

package/dist/ProjectsPopover/index.cjs.js

@@ -178,42 +178,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$1 = ".vchasno-ui-flex-box {\n    display: flex;\n    max-width: 100%;\n    flex-direction: row;\n    align-content: flex-start;\n    gap: 10px;\n}\n";
-styleInject(css_248z$1);
-
-var FlexBox = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.tagName, tagName = _b === void 0 ? 'div' : _b, children = _a.children, direction = _a.direction, gap = _a.gap, wrap = _a.wrap, align = _a.align, justify = _a.justify, grow = _a.grow, shrink = _a.shrink, _c = _a.style, style = _c === void 0 ? {} : _c, rest = __rest(_a, ["className", "tagName", "children", "direction", "gap", "wrap", "align", "justify", "grow", "shrink", "style"]);
-    return React$1.createElement(tagName, __assign({ ref: ref, className: cn('vchasno-ui-flex-box', className), style: __assign(__assign({}, style), { flexDirection: direction, gap: gap, flexWrap: wrap, justifyContent: justify, alignItems: align, alignContent: align, flexGrow: grow, flexShrink: shrink }) }, rest), children);
-});
-FlexBox.displayName = 'FlexBox';
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -12475,9 +12439,9 @@ var hrefMap = {
     kep: 'https://cap.vchasno.ua',
     kasa: 'https://kasa.vchasno.ua',
     zakupivli: 'https://zakupivli.pro',
-    prozorroSale: 'https://zakupivli.pro',
-    prozorroMarket: 'https://zakupivli.pro',
-    prozorroRRO: 'https://zakupivli.pro',
+    prozorroSale: 'https://zakupivli.pro/auctions-dgf',
+    prozorroMarket: 'https://zakupivli.pro/ecatalog/gov/list',
+    prozorroRRO: 'https://zakupivli.pro/gov/tenders',
 };
 var tooltipHintMap = {
     edo: 'Обмін електронними документами',
@@ -12582,14 +12546,25 @@ var isZakupivliProduct = function (product) {
     return zakupivliProductsList.includes(product);
 };
 
+var composeZakupivliLink = function (_a) {
+    var targetProduct = _a.targetProduct;
+    var baseUrl = hrefMap[targetProduct];
+    var link = new URL(baseUrl);
+    link.searchParams.set('utm_source', 'vchasno-cabinet');
+    link.searchParams.set('utm_medium', 'link');
+    link.searchParams.set('utm_campaign', 'vchasno-cabinet');
+    return link.href;
+};
 var composeLink = function (_a) {
     var targetProduct = _a.targetProduct, ctxProduct = _a.ctxProduct, queryParams = _a.queryParams, edrpou = _a.edrpou;
+    if (zakupivliProductsList.includes(targetProduct)) {
+        return composeZakupivliLink({ targetProduct: targetProduct });
+    }
     var baseUrl = hrefMap[targetProduct];
     var link = new URL(baseUrl);
     if (edrpou) {
         link.searchParams.set('edrpou', edrpou);
     }
-    link.searchParams.set('utm_medium', 'link');
     link.searchParams.set('utm_source', ctxProduct);
     link.searchParams.set('utm_campaign', ctxProduct);
     if (queryParams) {
@@ -12617,7 +12592,34 @@ var ProductLink = function (_a) {
                 React$1.createElement("h5", { className: "vchasno-ui-ProjectsPopover__box__title" }, titleMap[product]))))));
 };
 
-var css_248z = ".vchasno-ui-ProjectsPopover {\n    display: inline-block;\n    max-width: 440px;\n    padding: 24px 16px 0;\n    border-radius: 3px;\n    background-color: #fff;\n}\n\n.vchasno-ui-ProjectsPopover a:hover {\n    color: unset;\n    text-decoration: none;\n}\n\n.vchasno-ui-ProjectsPopover--border {\n    border: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-ProjectsPopover__title {\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n}\n\n.vchasno-ui-ProjectsPopover__box {\n    display: inline-flex;\n    min-width: 198px;\n    min-height: 80px;\n    box-sizing: border-box;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid #dbe5ea;\n    border-radius: 8px;\n    color: var(--vchasno-ui-text-primary-color);\n    gap: 8px;\n    text-decoration: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-ProjectsPopover__box__icon {\n    width: 40px;\n    height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 50%;\n}\n\n.vchasno-ui-ProjectsPopover__box:hover {\n    background-color: #f3f6f8;\n    cursor: pointer;\n}\n\n.vchasno-ui-ProjectsPopover__box__title {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 26px;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer {\n    display: flex;\n    min-height: 42px;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0 0 4px 4px;\n    margin: 0 -16px;\n    background: #ecf4ff;\n    color: #6b8091;\n    font-size: 12px;\n    font-weight: 400;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer > a {\n    color: #0890de;\n    text-decoration: none;\n}\n";
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".vchasno-ui-ProjectsPopover {\n    display: inline-block;\n    width: 440px;\n    max-width: calc(100vw - 32px);\n    box-sizing: border-box;\n    padding: 24px 16px 0;\n    border-radius: 3px;\n    background-color: #fff;\n}\n\n.vchasno-ui-ProjectsPopover__content {\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n}\n\n.vchasno-ui-ProjectsPopover__products {\n    display: flex;\n    width: calc(100% + 32px);\n    box-sizing: border-box;\n    flex-wrap: wrap;\n    gap: 10px;\n}\n\n.vchasno-ui-ProjectsPopover a:hover {\n    color: unset;\n    text-decoration: none;\n}\n\n.vchasno-ui-ProjectsPopover--border {\n    border: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-ProjectsPopover__title {\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n}\n\n.vchasno-ui-ProjectsPopover__box {\n    display: inline-flex;\n    width: 198px;\n    box-sizing: border-box;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid #dbe5ea;\n    border-radius: 8px;\n    aspect-ratio: 198/80;\n    color: var(--vchasno-ui-text-primary-color);\n    gap: 8px;\n    text-decoration: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-ProjectsPopover__box > svg {\n    max-width: 90%;\n}\n\n.vchasno-ui-ProjectsPopover__box__icon {\n    width: 40px;\n    height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 50%;\n}\n\n.vchasno-ui-ProjectsPopover__box:hover {\n    background-color: #f3f6f8;\n    cursor: pointer;\n}\n\n.vchasno-ui-ProjectsPopover__box__title {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 26px;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer {\n    display: flex;\n    min-height: 42px;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0 0 4px 4px;\n    margin: 0 -16px;\n    background: #ecf4ff;\n    color: #6b8091;\n    font-size: 12px;\n    font-weight: 400;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer > a {\n    color: #0890de;\n    text-decoration: none;\n}\n\n@media screen and (width <= 480px) {\n    .vchasno-ui-ProjectsPopover {\n        width: 330px;\n    }\n\n    .vchasno-ui-ProjectsPopover__box {\n        width: calc(50% - 20px);\n        flex-direction: column;\n        justify-content: center;\n        padding: 10px;\n        aspect-ratio: 1 / 1;\n    }\n}\n";
 styleInject(css_248z);
 
 var ProjectsPopover = function (_a) {
@@ -12627,19 +12629,15 @@ var ProjectsPopover = function (_a) {
         .filter(function (item) { return !hideProduct(item); });
     var displayZakupivliProducts = zakupivliProductsList.filter(function (item) { return !hideProduct(item); });
     return (React$1.createElement("div", { className: cn('vchasno-ui-ProjectsPopover', className) },
-        React$1.createElement(FlexBox, { direction: "column", gap: 32 },
-            React$1.createElement(FlexBox, { style: {
-                    width: 420,
-                    boxSizing: 'border-box',
+        React$1.createElement("div", { className: "vchasno-ui-ProjectsPopover__content" },
+            React$1.createElement("div", { className: "vchasno-ui-ProjectsPopover__products", style: {
                     display: displayVchasnoProducts.length ? 'flex' : 'none',
-                }, gap: 10, wrap: "wrap" },
+                } },
                 React$1.createElement("h3", { className: "vchasno-ui-ProjectsPopover__title" }, vchasnoTitle),
                 displayVchasnoProducts.map(function (key) { return (React$1.createElement(ProductLink, { overrideHint: overrideHint, queryParams: queryParams, onLinkClick: onLinkClick, edrpou: edrpou, ctxProduct: product, key: key, product: key })); })),
-            React$1.createElement(FlexBox, { style: {
-                    width: 420,
-                    boxSizing: 'border-box',
+            React$1.createElement("div", { className: "vchasno-ui-ProjectsPopover__products", style: {
                     display: displayZakupivliProducts.length ? 'flex' : 'none',
-                }, gap: 10, wrap: "wrap" },
+                } },
                 React$1.createElement("h3", { className: "vchasno-ui-ProjectsPopover__title" }, zakupivliTitle),
                 displayZakupivliProducts.map(function (key) { return (React$1.createElement(ProductLink, { overrideHint: overrideHint, onLinkClick: onLinkClick, queryParams: queryParams, edrpou: edrpou, ctxProduct: product, key: key, product: key })); })),
             React$1.createElement("footer", { className: "vchasno-ui-ProjectsPopover__footer" },