@kdcloudjs/kdesign 1.6.4 → 1.6.6

package/es/_utils/hooks.js

@@ -226,15 +226,7 @@ export function useResizeObserver(element, handler) {
 
       ['width', 'height', 'x', 'y', 'bottom', 'top', 'left', 'right'].forEach(function (prop) {
         rect[prop] = contentRect[prop];
-      }); // rect.width = contentRect.width
-      // rect.height = contentRect.height
-      // rect.x = contentRect.x
-      // rect.y = contentRect.y
-      // rect.bottom = contentRect.bottom
-      // rect.top = contentRect.top
-      // rect.left = contentRect.left
-      // rect.right = contentRect.right
-
+      });
       handler && handler(rect);
     };
 

package/es/cascader/cascader.js

@@ -130,7 +130,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var handleClear = function handleClear() {
-    setValue([]);
+    onChange([]);
   };
 
   var inputProps = {
@@ -162,7 +162,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-picker-label")
   }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(Icon, {
-    type: "close",
+    type: "close-solid",
     className: "".concat(prefixCls, "-picker-close"),
     onClick: handleClear
   })));

package/es/cascader/style/index.css

@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-clear-color-text, #666);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -196,6 +196,9 @@
   -webkit-transform: scale(0.9) translateY(-50%);
           transform: scale(0.9) translateY(-50%);
 }
+.kd-cascader-picker-close:hover {
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+}
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/es/cascader/style/index.less

@@ -99,10 +99,14 @@
     opacity: 0;
     cursor: pointer;
     visibility: hidden;
-    color: @cascader-active-color;
+    color: @cascader-clear-color;
     transition: all 0.1s;
     transform-origin: 50% 50%;
     transform: scale(0.9) translateY(-50%);
+
+    &:hover {
+      color: @cascader-active-color;
+    }
   }
 }
 

package/es/cascader/style/token.less

@@ -19,6 +19,7 @@
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #666);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/es/config-provider/compDefaultProps.d.ts

@@ -283,6 +283,7 @@ declare const compDefaultProps: {
         borderType: string;
         disabled: boolean;
         count: boolean;
+        countPosition: string;
         maxLength: number;
     };
     Timeline: {

package/es/config-provider/compDefaultProps.js

@@ -294,6 +294,7 @@ var compDefaultProps = {
     borderType: 'underline',
     disabled: false,
     count: true,
+    countPosition: 'outter',
     maxLength: 255
   },
   Timeline: {

package/es/input/TextArea.d.ts

@@ -5,6 +5,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
     borderType?: BorderType;
     defaultValue?: string;
     count?: boolean;
+    countPosition?: string;
     value?: any;
     canResize?: boolean;
     disabled?: boolean;

package/es/input/TextArea.js

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Number$MAX_SAFE_INTEGER from "@babel/runtime-corejs3/core-js-stable/number/max-safe-integer";
@@ -49,6 +49,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       borderType = textAreaProps.borderType,
       defaultValue = textAreaProps.defaultValue,
       count = textAreaProps.count,
+      countPosition = textAreaProps.countPosition,
       autoSize = textAreaProps.autoSize,
       className = textAreaProps.className,
       customPrefixcls = textAreaProps.prefixCls,
@@ -61,7 +62,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       placeholder = textAreaProps.placeholder,
       style = textAreaProps.style,
       size = textAreaProps.size,
-      others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
+      others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
 
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
 
@@ -116,7 +117,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   };
 
   var handleBlur = function handleBlur(e) {
-    showNumberMark && setShowNumberMark(false);
+    // showNumberMark && setShowNumberMark(false)
     onBlur && onBlur(e);
   };
 
@@ -145,8 +146,9 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     }
 
     if (count && showNumberMark && !disabled && maxLength !== '' && maxLength >= 0) {
+      var countClass = classNames("".concat(textAreaPrefixCls, "-textarea-mark"), _defineProperty({}, "".concat(textAreaPrefixCls, "-textarea-mark-inner"), countPosition === 'inner'));
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(textAreaPrefixCls, "-textarea-mark")
+        className: countClass
       }, enteredLength, "/", maxLength);
     }
 
@@ -163,7 +165,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   }, [propsValue, setValue]);
 
   var renderTextArea = function renderTextArea(prefixCls) {
-    var _context, _classNames, _context2;
+    var _context, _classNames2, _context2;
 
     var hadCount = count && !disabled && !allowClear;
 
@@ -195,7 +197,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: _extends({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: classNames("".concat(prefixCls, "-textarea"), (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames), _defineProperty({}, className, className && !allowClear && !hadCount)),
+      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/es/input/style/index.css

@@ -205,6 +205,13 @@ textarea {
   z-index: 1;
   color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
   font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  line-height: 18px;
+  background-color: #fff;
+}
+.kd-input-textarea-mark-inner {
+  top: auto;
+  bottom: 5px;
+  right: 8px;
 }
 .kd-input-no-resize {
   resize: none;
@@ -225,7 +232,7 @@ textarea {
 .kd-input-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
@@ -318,7 +325,7 @@ textarea {
       -ms-flex-pack: center;
           justify-content: center;
   word-break: keep-all;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
 }
 .kd-input-wrapper .kd-input-suffix {
   margin-left: 4px;
@@ -472,7 +479,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;

package/es/input/style/index.less

@@ -37,7 +37,14 @@ textarea {
 			z-index: 1;
 			color: @input-placeholder-color-inner;
 			font-size: @input-small-font-size-inner;
+      line-height: 18px;
+      background-color: #fff;
 		}
+    &-mark-inner {
+      top: auto;
+      bottom: 5px;
+      right: 8px;
+    }
 	}
 	&-no-resize {
 		resize: none;

package/es/input/style/token.less

@@ -13,7 +13,7 @@
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
 @input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
-@input-affix-color: var(~'@{input-prefix}-affix-color-text', @color-text-primary);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/es/locale/locale.d.ts

@@ -37,6 +37,8 @@ declare class LocaleCache {
         'Pagination.prevPage': string;
         'Pagination.nextPage': string;
         'Pagination.total': string;
+        'Pagination.page': string;
+        'Pagination.row': string;
         'Pagination.first': string;
         'Pagination.last': string;
         'Pagination.perPage': string;
@@ -62,9 +64,6 @@ declare class LocaleCache {
         'CityPicker.internation': string;
         'CityPicker.common': string;
         'CityPicker.noData': string;
-        /**
-         * 获取所有语言包数据
-         */
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;

package/es/locale/zh-CN.d.ts

@@ -11,6 +11,8 @@ declare const locale: {
     'Pagination.prevPage': string;
     'Pagination.nextPage': string;
     'Pagination.total': string;
+    'Pagination.page': string;
+    'Pagination.row': string;
     'Pagination.first': string;
     'Pagination.last': string;
     'Pagination.perPage': string;

package/es/locale/zh-CN.js

@@ -15,7 +15,9 @@ var locale = _extends(_extends({
   'Progress.success': '加载成功',
   'Pagination.prevPage': '上一页',
   'Pagination.nextPage': '下一页',
-  'Pagination.total': '共{total}页',
+  'Pagination.total': '共{page}页{row}条',
+  'Pagination.page': '共{page}页',
+  'Pagination.row': '共{row}条',
   'Pagination.first': '第一页',
   'Pagination.last': '最后一页',
   'Pagination.perPage': '{size}条/页',

package/es/pagination/pagination.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { DropDownProps } from '../dropdown';
 export declare const PageTypes: ["basic", "bill", "simple", "less", "nicety"];
+export declare const TotalTypes: ["page", "row", "all"];
 export declare type pageType = typeof PageTypes[number];
+export declare type totalType = typeof TotalTypes[number];
 export interface IPaginationProps {
     total?: number;
     current?: number;
@@ -12,6 +14,7 @@ export interface IPaginationProps {
     bordered?: boolean;
     pageType?: pageType;
     showTitle?: boolean;
+    showTotal?: boolean | totalType;
     defaultCurrent?: number;
     defaultPageSize?: number;
     showSizeChanger?: boolean;

package/es/pagination/pagination.js

@@ -17,6 +17,7 @@ import Dropdown from '../dropdown';
 import devWarning from '../_utils/devwarning';
 import { tuple } from '../_utils/type';
 export var PageTypes = tuple('basic', 'bill', 'simple', 'less', 'nicety');
+export var TotalTypes = tuple('page', 'row', 'all');
 
 var Pagination = function Pagination(props) {
   var _context4;
@@ -198,14 +199,30 @@ var Pagination = function Pagination(props) {
       size: size
     }));
   }));
+  var mapShowTotal = {
+    basic: 'page',
+    nicety: 'row'
+  };
+  var mapTotalText = {
+    page: locale.getLangMsg('Pagination', 'page', {
+      page: totalPage
+    }),
+    row: locale.getLangMsg('Pagination', 'row', {
+      row: total
+    }),
+    all: locale.getLangMsg('Pagination', 'total', {
+      page: totalPage,
+      row: total
+    })
+  };
+  var showTotal = props.showTotal ? props.showTotal === true ? 'page' : props.showTotal : mapShowTotal[pageType];
+  var Total = showTotal && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-total")
+  }, mapTotalText[showTotal]);
   var normalPagination = /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, className),
     style: style
-  }, pageType === 'basic' && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-total")
-  }, locale.getLangMsg('Pagination', 'total', {
-    total: totalPage
-  })), showJumper && /*#__PURE__*/React.createElement("span", {
+  }, Total, showJumper && /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, locale.getLangMsg('Pagination', 'order', {
     order: /*#__PURE__*/React.createElement("input", {
@@ -266,18 +283,20 @@ var Pagination = function Pagination(props) {
     type: "arrow-down",
     className: classNames("".concat(prefixCls, "-dropdown-icon"), _defineProperty({}, "".concat(prefixCls, "-dropdown-icon-open"), isOpen))
   })))));
-  var simplePagination = /*#__PURE__*/React.createElement("ul", {
-    className: classNames(prefixCls, 'simple', {
+  var simplePagination = /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, 'simple', className),
+    style: style
+  }, Total, /*#__PURE__*/React.createElement("ul", {
+    className: classNames("".concat(prefixCls, "-action"), {
       bordered: bordered,
       disabled: disabled
-    }, className),
-    style: style
-  }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
+    })
+  }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('action-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
     disabled: page === 1 || disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "arrow-left"
-  }))), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('item', _concatInstanceProperty(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
+  }))), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('action-item', _concatInstanceProperty(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, showJumper ? /*#__PURE__*/React.createElement("input", {
     type: "text",
@@ -289,12 +308,12 @@ var Pagination = function Pagination(props) {
     value: inputPage === undefined ? page : inputPage
   }) : page), "/ ", /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-total")
-  }, totalPage)), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
+  }, totalPage)), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('action-item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handleNext,
     disabled: page === totalPage || disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "arrow-right"
-  }))));
+  })))));
   var lessPages = genArray(1, totalPage);
   var lessPagination = /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, 'less', {
@@ -302,7 +321,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
@@ -347,7 +366,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,

package/es/pagination/style/index.css

@@ -292,7 +292,7 @@
 .kd-pagination .kd-pagination-selector .kd-dropdown-menu-item span {
   white-space: nowrap;
 }
-.kd-pagination.simple {
+.kd-pagination.simple .kd-pagination-action {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -305,22 +305,22 @@
   border-radius: var(--kd-g-radius-border, 2px);
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid transparent;
 }
-.kd-pagination.simple.bordered {
+.kd-pagination.simple .kd-pagination-action.bordered {
   border-color: var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-transition: border-color var(--kd-g-duration, 0.3s);
   transition: border-color var(--kd-g-duration, 0.3s);
 }
-.kd-pagination.simple.bordered:active:not(.disabled) {
+.kd-pagination.simple .kd-pagination-action.bordered:active:not(.disabled) {
   border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
-.kd-pagination.simple.bordered.disabled,
-.kd-pagination.simple.bordered.disabled > .kd-pagination-item > button {
+.kd-pagination.simple .kd-pagination-action.bordered.disabled,
+.kd-pagination.simple .kd-pagination-action.bordered.disabled > .kd-pagination-item > button {
   background-color: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
-.kd-pagination.simple.disabled > .kd-pagination-item {
+.kd-pagination.simple .kd-pagination-action.disabled > .kd-pagination-action-item {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-pagination.simple .kd-pagination-item {
+.kd-pagination.simple .kd-pagination-action-item {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin: 0;
@@ -336,26 +336,29 @@
   vertical-align: middle;
   color: var(--kd-g-color-text-primary, #212121);
 }
-.kd-pagination.simple .kd-pagination-item:first-child,
-.kd-pagination.simple .kd-pagination-item:last-child {
+.kd-pagination.simple .kd-pagination-action-item:first-child,
+.kd-pagination.simple .kd-pagination-action-item:last-child {
   margin: 0;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current {
   margin-right: 2px;
   vertical-align: middle;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input {
   margin: 0;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input:disabled {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input:disabled {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-total {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-total {
   vertical-align: middle;
   margin-right: 0;
 }
-.kd-pagination.simple .kd-pagination-item button {
+.kd-pagination.simple .kd-pagination-action-item.bordered > button {
+  border: none;
+}
+.kd-pagination.simple .kd-pagination-action-item button {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
@@ -370,21 +373,21 @@
   -webkit-transition: border-color var(--kd-g-duration, 0.3s);
   transition: border-color var(--kd-g-duration, 0.3s);
 }
-.kd-pagination.simple .kd-pagination-item button:hover:not(:disabled),
-.kd-pagination.simple .kd-pagination-item button:active:not(:disabled) {
+.kd-pagination.simple .kd-pagination-action-item button:hover:not(:disabled),
+.kd-pagination.simple .kd-pagination-action-item button:active:not(:disabled) {
   border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
-.kd-pagination.simple .kd-pagination-item button:hover i,
-.kd-pagination.simple .kd-pagination-item button:active i {
+.kd-pagination.simple .kd-pagination-action-item button:hover i,
+.kd-pagination.simple .kd-pagination-action-item button:active i {
   color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-pagination.simple .kd-pagination-item button:disabled {
+.kd-pagination.simple .kd-pagination-action-item button:disabled {
   cursor: not-allowed;
 }
-.kd-pagination.simple .kd-pagination-item button:disabled i {
+.kd-pagination.simple .kd-pagination-action-item button:disabled i {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-pagination.simple .kd-pagination-item button i {
+.kd-pagination.simple .kd-pagination-action-item button i {
   position: absolute;
   top: 0;
   right: 0;