@vchasno/ui-kit 0.2.8 → 0.2.10

package/dist/SelectCreatable/types/components/Pagination/Pagination.d.ts

@@ -8,6 +8,9 @@ export interface PaginationProps {
     onChange?: (page: number) => void;
     current?: number;
     scrollOnChange?: boolean;
+    gapStep?: number;
+    hideArrows?: boolean;
+    simple?: boolean;
 }
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/dist/SelectCreatable/types/components/Select/index.d.ts

@@ -3,3 +3,5 @@ export type { SelectProps } from './Select';
 export { default as SelectCreatable } from './SelectCreatable';
 export type { SelectCreatableProps } from './SelectCreatable';
 export type { Option } from './types';
+export { PlaceholderProps, CommonProps, PropsValue, ControlProps, MultiValueProps, MultiValueRemoveProps, MultiValueGenericProps, SingleValueProps, ValueContainerProps, ContainerProps, IndicatorsContainerProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, GroupProps, GroupHeadingProps, MenuProps, MenuListProps, InputProps, AriaGuidanceProps, AriaOnFilterProps, ActionMetaBase, AriaLiveMessages, AriaOnFocusProps, ClearActionMeta, Colors, CommonPropsAndClassName, CreateOptionActionMeta, } from 'react-select';
+export { components } from 'react-select';

package/dist/index.d.ts

@@ -80,6 +80,9 @@ interface PaginationProps {
     onChange?: (page: number) => void;
     current?: number;
     scrollOnChange?: boolean;
+    gapStep?: number;
+    hideArrows?: boolean;
+    simple?: boolean;
 }
 declare const Pagination: React.FC<PaginationProps>;
 

package/dist/index.js

@@ -171,7 +171,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$i = ".vchasno-ui-flex-box {\n    display: flex;\n    flex-direction: row;\n    align-content: flex-start;\n    gap: 10px;\n}\n";
+var css_248z$i = ".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$i);
 
 var FlexBox = React.forwardRef(function (_a, ref) {
@@ -205,7 +205,7 @@ var Button = React.forwardRef(function (_a, ref) {
 });
 Button.displayName = "Button";
 
-var css_248z$f = ".vchasno-ui-meta {\n    display: block;\n    width: 100%;\n    height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint {\n    color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n    color: var(--vchasno-ui-input-color-error);\n}\n";
+var css_248z$f = ".vchasno-ui-meta {\n    display: block;\n    max-width: 100%;\n    height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n    display: inline-block;\n    overflow: hidden;\n    max-width: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n    color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n    color: var(--vchasno-ui-input-color-error);\n}\n";
 styleInject(css_248z$f);
 
 var InputMeta = function (_a) {
@@ -215,7 +215,7 @@ var InputMeta = function (_a) {
         error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$e = ".vchasno-ui-label-text {\n    position: relative;\n    display: inline-flex;\n    height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    align-self: flex-start;\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    text-overflow: ellipsis;\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    white-space: nowrap;\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).--required .vchasno-ui-label-text:hover {\n    cursor: pointer;\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";
+var css_248z$e = ".vchasno-ui-label-text {\n    position: relative;\n    display: inline-flex;\n    max-width: 100%;\n    height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    align-self: flex-start;\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    text-overflow: ellipsis;\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    white-space: nowrap;\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).--required .vchasno-ui-label-text:hover {\n    cursor: pointer;\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";
 styleInject(css_248z$e);
 
 var LabelText = function (_a) {
@@ -224,12 +224,12 @@ var LabelText = function (_a) {
         React.createElement("svg", { className: "vchasno-ui-label-text__title-icon", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99299 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00404 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64499 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" })),
         ' ',
-        children,
+        React.createElement("span", { className: "vchasno-ui-label-text__content" }, children),
         " ",
         React.createElement("sup", null, "*")));
 };
 
-var css_248z$d = ".vchasno-ui-input {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n    flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n    position: relative;\n    display: flex;\n    height: 40px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 10px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    gap: 5px;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n    max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: var(--vchasno-ui-input-font-size, 14px);\n    line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: block;\n    width: 18px;\n    height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n    background-color: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n    cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-color-error);\n    background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$d = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n    flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n    position: relative;\n    display: flex;\n    height: 40px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 10px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    gap: 5px;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n    max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: var(--vchasno-ui-input-font-size, 14px);\n    line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: block;\n    width: 18px;\n    height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n    background-color: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n    cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-color-error);\n    background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$d);
 
 var Input = function (_a) {
@@ -283,13 +283,13 @@ var composePaginationSteps = function (total, current) {
     return display;
 };
 
-var css_248z$b = ".vchasno-ui-pagination {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: 14px;\n    gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n    min-width: var(--vchasno-ui-pagination-size);\n    height: var(--vchasno-ui-pagination-size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\n    line-height: calc(var(--vchasno-ui-pagination-size) - 2px);\n    outline: 0;\n    text-align: center;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        border var(--vchasno-ui-transition-duration-sec, 0.3s);\n    user-select: none;\n    vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n    border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$b = ".vchasno-ui-pagination {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: 14px;\n    gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n    display: flex;\n    min-width: var(--vchasno-ui-pagination-size);\n    height: var(--vchasno-ui-pagination-size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\n    outline: 0;\n    text-align: center;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        border var(--vchasno-ui-transition-duration-sec, 0.3s);\n    user-select: none;\n    vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n    border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n    display: none;\n}\n";
 styleInject(css_248z$b);
 
 var Pagination = function (_a) {
     var _b, _c;
-    var className = _a.className, _d = _a.initPage, initPage = _d === void 0 ? 1 : _d, _e = _a.total, total = _e === void 0 ? 1 : _e, hideOnSinglePage = _a.hideOnSinglePage, onChange = _a.onChange, current = _a.current, _f = _a.scrollOnChange, scrollOnChange = _f === void 0 ? true : _f;
-    var _g = React.useState(current || initPage), _currentPage = _g[0], setCurrentPage = _g[1];
+    var className = _a.className, _d = _a.initPage, initPage = _d === void 0 ? 1 : _d, _e = _a.total, total = _e === void 0 ? 1 : _e, _f = _a.gapStep, gapStep = _f === void 0 ? 5 : _f, hideOnSinglePage = _a.hideOnSinglePage, onChange = _a.onChange, current = _a.current, _g = _a.scrollOnChange, scrollOnChange = _g === void 0 ? true : _g, _h = _a.hideArrows, hideArrows = _h === void 0 ? false : _h, _j = _a.simple, simple = _j === void 0 ? false : _j;
+    var _k = React.useState(current || initPage), _currentPage = _k[0], setCurrentPage = _k[1];
     var currentPage = current || _currentPage;
     var setPage = function (page) {
         setCurrentPage(page);
@@ -310,33 +310,36 @@ var Pagination = function (_a) {
                 }
             }, className: cn('vchasno-ui-pagination__item', 'vchasno-ui-pagination__item-arrow', (_b = {},
                 _b['vchasno-ui-pagination__item-disabled'] = currentPage === 1,
+                _b['vchasno-ui-pagination__item-hidden'] = hideArrows && !simple,
                 _b)) },
             React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { d: "M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z", fill: "currentColor" }))),
-        composePaginationSteps(total, currentPage).map(function (item) {
-            var _a;
-            if (Array.isArray(item)) {
-                var isPrev_1 = item[0] < currentPage;
-                var handleClick = function () {
-                    if (isPrev_1) {
-                        setPage(currentPage - 5 <= 0 ? 1 : currentPage - 5);
-                    }
-                    else {
-                        setPage(currentPage + 5 >= total ? total : currentPage + 5);
-                    }
-                };
-                return (React.createElement("li", { key: isPrev_1 ? 'prev' : 'next', className: "vchasno-ui-pagination__item", onClick: handleClick }, "..."));
-            }
-            return (React.createElement("li", { onClick: function () { return setPage(item); }, key: item, className: cn('vchasno-ui-pagination__item', (_a = {},
-                    _a['vchasno-ui-pagination__item-active'] = item === currentPage,
-                    _a)) }, item));
-        }),
+        !simple &&
+            composePaginationSteps(total, currentPage).map(function (item) {
+                var _a;
+                if (Array.isArray(item)) {
+                    var isPrev_1 = item[0] < currentPage;
+                    var handleClick = function () {
+                        if (isPrev_1) {
+                            setPage(currentPage - gapStep <= 0 ? 1 : currentPage - gapStep);
+                        }
+                        else {
+                            setPage(currentPage + gapStep >= total ? total : currentPage + gapStep);
+                        }
+                    };
+                    return (React.createElement("li", { key: isPrev_1 ? 'prev' : 'next', className: "vchasno-ui-pagination__item", onClick: handleClick }, "..."));
+                }
+                return (React.createElement("li", { onClick: function () { return setPage(item); }, key: item, className: cn('vchasno-ui-pagination__item', (_a = {},
+                        _a['vchasno-ui-pagination__item-active'] = item === currentPage,
+                        _a)) }, item));
+            }),
         React.createElement("li", { onClick: function () {
                 if (currentPage !== total) {
                     setPage(currentPage >= total - 1 ? total : currentPage + 1);
                 }
             }, className: cn('vchasno-ui-pagination__item', 'vchasno-ui-pagination__item-arrow', (_c = {},
                 _c['vchasno-ui-pagination__item-disabled'] = currentPage === total,
+                _c['vchasno-ui-pagination__item-hidden'] = hideArrows && !simple,
                 _c)) },
             React.createElement("svg", { style: { transform: 'rotate(180deg)', transformOrigin: 'center center' }, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { d: "M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z", fill: "currentColor" })))));