@itcase/ui 1.0.37 → 1.0.39

package/dist/components/Accordion.js

@@ -8,7 +8,6 @@ var fill = require('../constants/componentProps/fill.js');
 var direction = require('../constants/componentProps/direction.js');
 var shape = require('../constants/componentProps/shape.js');
 var index = require('./Icon.js');
-var index$1 = require('../index-f1505c84.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.js');
 require('react-inlinesvg');
@@ -37,6 +36,24 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var castArray__default = /*#__PURE__*/_interopDefault(castArray);
 
+var ChevronDown16 = function ChevronDown16(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.50398 4.75303C2.81229 4.41566 3.31216 4.41566 3.62047 4.75303L8.1611 9.72163C8.22276 9.7891 8.32274 9.7891 8.3844 9.72163L12.925 4.75303C13.2333 4.41566 13.7332 4.41566 14.0415 4.75303C14.3498 5.09039 14.3498 5.63737 14.0415 5.97474L9.50088 10.9433C8.8226 11.6856 7.7229 11.6856 7.04462 10.9433L2.50398 5.97474C2.19567 5.63737 2.19567 5.09039 2.50398 4.75303Z"
+  }));
+};
+ChevronDown16.defaultProps = {
+  width: "17",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var icon16 = {
+  chevron_down: ChevronDown16
+};
+
 /* React, PropTypes, other third-party modules */
 
 /* Component */
@@ -86,7 +103,7 @@ function AccordionItem(props) {
   }, icon || /*#__PURE__*/React__default.default.createElement(index.Icon, {
     fill: iconFillClass,
     size: "16",
-    SvgImage: index$1.icon16.chevron_down
+    SvgImage: icon16.chevron_down
   })), beforeContent && beforeContent, isExpanded && /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion-item__content"
   }, children || content), afterContent && afterContent);

package/dist/components/Group.js

@@ -33,7 +33,8 @@ function Group(props) {
     horizontalScroll = props.horizontalScroll,
     set = props.set,
     style = props.style,
-    dataTour = props.dataTour;
+    dataTour = props.dataTour,
+    onClick = props.onClick;
   var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_content-align_',
     propsKey: 'contentAlign'
@@ -107,9 +108,10 @@ function Group(props) {
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
-    id: id,
     "data-tour": dataTour,
-    style: Object.assign({}, groupStyles, style)
+    id: id,
+    style: Object.assign({}, groupStyles, style),
+    onClick: onClick
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
     className: "group__wrapper",
     style: groupWrapperStyles
@@ -156,7 +158,8 @@ Group.propTypes = {
   columnsMobile: PropTypes__default.default.number,
   columnsTablet: PropTypes__default.default.number,
   set: PropTypes__default.default.string,
-  horizontalScroll: PropTypes__default.default.bool
+  horizontalScroll: PropTypes__default.default.bool,
+  onClick: PropTypes__default.default.func
 };
 
 exports.Group = Group;

package/dist/components/Pagination.js

@@ -3,50 +3,60 @@
 var React = require('react');
 require('prop-types');
 var clsx = require('clsx');
+var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
-var index = require('./Icon.js');
-var index$1 = require('../index-f1505c84.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('react-inlinesvg');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Link.js');
-require('../useStyles-e4accb53.js');
+require('lodash/castArray');
 require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var ceil__default = /*#__PURE__*/_interopDefault(ceil);
 var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
 
 function Pagination(props) {
-  var className = props.className,
-    forcePage = props.forcePage,
-    pageCount = props.pageCount,
-    marginPagesDisplayed = props.marginPagesDisplayed,
+  var pageNumber = props.pageNumber,
+    perPageCount = props.perPageCount,
+    allItemsCount = props.allItemsCount,
+    className = props.className;
+    props.forcePage;
+    props.pageCount;
+    var marginPagesDisplayed = props.marginPagesDisplayed,
     pageRangeDisplayed = props.pageRangeDisplayed,
+    previousLabel = props.previousLabel,
+    nextLabel = props.nextLabel,
     onPageChange = props.onPageChange;
   var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'pagination_justify-content_',
     propsKey: 'justifyContent'
   });
+
+  // Calculate count of pages for all items
+  var paginationPagesCount = React.useMemo(function () {
+    if (allItemsCount && allItemsCount > 0) {
+      // Round up. "perPageCount" may be is a query params "limit"
+      return ceil__default.default(allItemsCount / perPageCount);
+    }
+    return 0;
+  }, [allItemsCount, perPageCount]);
+
+  // Index for pagination state
+  var paginationPageIndex = React.useMemo(function () {
+    var intPageNumber = parseInt(pageNumber);
+    // For pagination need index of page, not number
+    if (!isNaN(intPageNumber) && intPageNumber > 1) {
+      return intPageNumber - 1;
+    }
+    return 0;
+  }, [pageNumber]);
+  if (paginationPagesCount <= 1) {
+    return null;
+  }
   return /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
     containerClassName: clsx__default.default(className, 'pagination', justifyContentClass)
     // page item
@@ -59,20 +69,12 @@ function Pagination(props) {
     activeLinkClassName: "pagination__item-link_state_active"
     // previous button
     ,
-    previousLabel: /*#__PURE__*/React__default.default.createElement(index.Icon, {
-      fill: "surfaceItemPrimary",
-      SvgImage: index$1.icon24.doubleArrowLeft,
-      size: "24"
-    }),
+    previousLabel: previousLabel,
     previousClassName: "pagination__item pagination__item_previous",
     previousLinkClassName: "pagination__item-link"
     // next button
     ,
-    nextLabel: /*#__PURE__*/React__default.default.createElement(index.Icon, {
-      fill: "surfaceItemPrimary",
-      SvgImage: index$1.icon24.doubleArrowRight,
-      size: "24"
-    }),
+    nextLabel: nextLabel,
     nextClassName: "pagination__item pagination__item_next",
     nextLinkClassName: "pagination__item-link"
     // break element
@@ -82,12 +84,18 @@ function Pagination(props) {
     breakLinkClassName: "pagination__item-link"
     // pages settings
     ,
-    forcePage: forcePage,
-    pageCount: pageCount,
+    forcePage: paginationPageIndex,
+    pageCount: paginationPagesCount,
     marginPagesDisplayed: marginPagesDisplayed,
     pageRangeDisplayed: pageRangeDisplayed,
     onPageChange: onPageChange
   });
 }
+Pagination.propTypes = {};
+Pagination.defaultProps = {
+  pageNumber: 0,
+  perPageCount: 0,
+  allItemsCount: 0
+};
 
 exports.Pagination = Pagination;

package/dist/css/components/Card/Card.css

@@ -2,7 +2,6 @@
   &__wrapper {
     display: flex;
     flex-flow: column nowrap;
-    gap: 16px;
     ^&__image {
       width: 100%;
     }

package/dist/css/components/Select/Select.css

@@ -60,9 +60,14 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    cursor: default;
     outline: 0 !important;
   }
+  &__value-container {
+    cursor: default;
+  }
+  &__input {
+    cursor: default;
+  }
 }
 
 .select {
@@ -121,6 +126,7 @@
 
 .select {
   &__input-container {
+    flex: 1;
     @each $sizeText in xs, s, m, l, xl, xxl {
       &.text_size_$(sizeText) {
         & input {
@@ -131,9 +137,10 @@
     @each $type in accent, primary, secondary, tertiary, surface, success, error {
       &.text-color_$(type) {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
+            disabled, hover {
             &-$(color) {
-              & input {;
+              & input {
                 color: var(--color-$(type)-text-$(color));
               }
             }

package/dist/css/components/Select/css/__control/select__control.css

@@ -5,7 +5,12 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    cursor: default;
     outline: 0 !important;
   }
+  &__value-container {
+    cursor: default;
+  }
+  &__input {
+    cursor: default;
+  }
 }

package/dist/css/components/Select/css/__input-container/select__input-container.css

@@ -1,5 +1,6 @@
 .select {
   &__input-container {
+    flex: 1;
     @each $sizeText in xs, s, m, l, xl, xxl {
       &.text_size_$(sizeText) {
         & input {
@@ -10,9 +11,10 @@
     @each $type in accent, primary, secondary, tertiary, surface, success, error {
       &.text-color_$(type) {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
+            disabled, hover {
             &-$(color) {
-              & input {;
+              & input {
                 color: var(--color-$(type)-text-$(color));
               }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",

package/dist/index-f1505c84.js

@@ -1,86 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var ChevronDown16 = function ChevronDown16(props) {
-  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.50398 4.75303C2.81229 4.41566 3.31216 4.41566 3.62047 4.75303L8.1611 9.72163C8.22276 9.7891 8.32274 9.7891 8.3844 9.72163L12.925 4.75303C13.2333 4.41566 13.7332 4.41566 14.0415 4.75303C14.3498 5.09039 14.3498 5.63737 14.0415 5.97474L9.50088 10.9433C8.8226 11.6856 7.7229 11.6856 7.04462 10.9433L2.50398 5.97474C2.19567 5.63737 2.19567 5.09039 2.50398 4.75303Z"
-  }));
-};
-ChevronDown16.defaultProps = {
-  width: "17",
-  height: "16",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: "none"
-};
-var Facebook24 = function Facebook24(props) {
-  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M24 12.0301C24 5.38947 18.624 0 12 0C5.376 0 0 5.38947 0 12.0301C0 17.8526 4.128 22.7008 9.6 23.8195V15.6391H7.2V12.0301H9.6V9.02256C9.6 6.70075 11.484 4.81203 13.8 4.81203H16.8V8.42105H14.4C13.74 8.42105 13.2 8.96241 13.2 9.62406V12.0301H16.8V15.6391H13.2V24C19.26 23.3985 24 18.2737 24 12.0301Z"
-  }));
-};
-Facebook24.defaultProps = {
-  width: "24",
-  height: "24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: "none"
-};
-var Instagram24 = function Instagram24(props) {
-  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M6.96 0H17.04C20.88 0 24 3.12 24 6.96V17.04C24 18.8859 23.2667 20.6562 21.9615 21.9615C20.6562 23.2667 18.8859 24 17.04 24H6.96C3.12 24 0 20.88 0 17.04V6.96C0 5.11409 0.733284 3.34379 2.03854 2.03854C3.34379 0.733284 5.11409 0 6.96 0ZM6.72 2.4C5.57427 2.4 4.47546 2.85514 3.6653 3.6653C2.85514 4.47546 2.4 5.57427 2.4 6.72V17.28C2.4 19.668 4.332 21.6 6.72 21.6H17.28C18.4257 21.6 19.5245 21.1449 20.3347 20.3347C21.1449 19.5245 21.6 18.4257 21.6 17.28V6.72C21.6 4.332 19.668 2.4 17.28 2.4H6.72ZM18.3 4.2C18.6978 4.2 19.0794 4.35804 19.3607 4.63934C19.642 4.92064 19.8 5.30218 19.8 5.7C19.8 6.09783 19.642 6.47936 19.3607 6.76066C19.0794 7.04197 18.6978 7.2 18.3 7.2C17.9022 7.2 17.5206 7.04197 17.2393 6.76066C16.958 6.47936 16.8 6.09783 16.8 5.7C16.8 5.30218 16.958 4.92064 17.2393 4.63934C17.5206 4.35804 17.9022 4.2 18.3 4.2ZM12 6C13.5913 6 15.1174 6.63214 16.2426 7.75736C17.3679 8.88258 18 10.4087 18 12C18 13.5913 17.3679 15.1174 16.2426 16.2426C15.1174 17.3679 13.5913 18 12 18C10.4087 18 8.88258 17.3679 7.75736 16.2426C6.63214 15.1174 6 13.5913 6 12C6 10.4087 6.63214 8.88258 7.75736 7.75736C8.88258 6.63214 10.4087 6 12 6ZM12 8.4C11.0452 8.4 10.1295 8.77928 9.45442 9.45442C8.77928 10.1295 8.4 11.0452 8.4 12C8.4 12.9548 8.77928 13.8705 9.45442 14.5456C10.1295 15.2207 11.0452 15.6 12 15.6C12.9548 15.6 13.8705 15.2207 14.5456 14.5456C15.2207 13.8705 15.6 12.9548 15.6 12C15.6 11.0452 15.2207 10.1295 14.5456 9.45442C13.8705 8.77928 12.9548 8.4 12 8.4Z"
-  }));
-};
-Instagram24.defaultProps = {
-  width: "24",
-  height: "24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: "none"
-};
-var DoubleArrowRight24 = function DoubleArrowRight24(props) {
-  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M17 12C17 12.2305 16.9233 12.4271 16.764 12.6034L12.1622 17.7763C12.0383 17.9254 11.8732 18 11.6844 18C11.3009 18 11 17.661 11 17.2136C11 16.9966 11.0767 16.8 11.2065 16.6508L15.354 12L11.2065 7.34915C11.0767 7.19322 11 6.99661 11 6.77966C11 6.33898 11.3009 6 11.6844 6C11.8732 6 12.0383 6.07458 12.1622 6.22373L16.764 11.3966C16.9233 11.5729 16.9941 11.7695 17 12Z"
-  }), /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M13 12C13 12.2305 12.9233 12.4271 12.764 12.6034L8.16224 17.7763C8.03835 17.9254 7.87316 18 7.68437 18C7.30089 18 7 17.661 7 17.2136C7 16.9966 7.0767 16.8 7.20649 16.6508L11.354 12L7.20649 7.34915C7.0767 7.19322 7 6.99661 7 6.77966C7 6.33898 7.30089 6 7.68437 6C7.87316 6 8.03835 6.07458 8.16224 6.22373L12.764 11.3966C12.9233 11.5729 12.9941 11.7695 13 12Z"
-  }));
-};
-DoubleArrowRight24.defaultProps = {
-  width: "24",
-  height: "24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: "none"
-};
-var DoubleArrowLeft24 = function DoubleArrowLeft24(props) {
-  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M7 12C7 12.2305 7.0767 12.4271 7.23599 12.6034L11.8378 17.7763C11.9617 17.9254 12.1268 18 12.3156 18C12.6991 18 13 17.661 13 17.2136C13 16.9966 12.9233 16.8 12.7935 16.6508L8.64602 12L12.7935 7.34915C12.9233 7.19322 13 6.99661 13 6.77966C13 6.33898 12.6991 6 12.3156 6C12.1268 6 11.9617 6.07458 11.8378 6.22373L7.23599 11.3966C7.0767 11.5729 7.0059 11.7695 7 12Z"
-  }), /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M11 12C11 12.2305 11.0767 12.4271 11.236 12.6034L15.8378 17.7763C15.9617 17.9254 16.1268 18 16.3156 18C16.6991 18 17 17.661 17 17.2136C17 16.9966 16.9233 16.8 16.7935 16.6508L12.646 12L16.7935 7.34915C16.9233 7.19322 17 6.99661 17 6.77966C17 6.33898 16.6991 6 16.3156 6C16.1268 6 15.9617 6.07458 15.8378 6.22373L11.236 11.3966C11.0767 11.5729 11.0059 11.7695 11 12Z"
-  }));
-};
-DoubleArrowLeft24.defaultProps = {
-  width: "24",
-  height: "24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: "none"
-};
-var icon16 = {
-  chevron_down: ChevronDown16
-};
-var icon24 = {
-  facebook: Facebook24,
-  instagram: Instagram24,
-  doubleArrowRight: DoubleArrowRight24,
-  doubleArrowLeft: DoubleArrowLeft24
-};
-
-exports.icon16 = icon16;
-exports.icon24 = icon24;