glints-aries 4.0.268 → 4.0.270

package/es/@next/Pagination/IconPagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconPaginationProps } from './paginationUtils';
+export declare const IconPagination: React.ForwardRefExoticComponent<IconPaginationProps & React.RefAttributes<HTMLElement>>;

package/es/@next/Pagination/IconPagination.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconPaginationStyledNav, StyledBorderPaginationButton, StyledLabel } from './PaginationStyle';
+import { Icon } from '../Icon';
+export var IconPagination = /*#__PURE__*/React.forwardRef(function IconPagination(_ref, ref) {
+  var label = _ref.label,
+    disableNext = _ref.disableNext,
+    disablePrevious = _ref.disablePrevious,
+    onNext = _ref.onNext,
+    onPrevious = _ref.onPrevious;
+  return /*#__PURE__*/React.createElement(IconPaginationStyledNav, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(StyledBorderPaginationButton, {
+    "data-testid": "previous-page",
+    disabled: disablePrevious,
+    onClick: onPrevious
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-left-line"
+  })), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledBorderPaginationButton, {
+    "data-testid": "next-page",
+    disabled: disableNext,
+    onClick: onNext
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-right-line"
+  })));
+});

package/es/@next/Pagination/IconPagination.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const WithLabel: any;

package/es/@next/Pagination/PaginationStyle.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { PageButtonProps } from './PageButton';
 export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const SimplePaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const IconPaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const StyledPageButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
 export declare const StyledSimplePaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledBorderPaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledActiveSimplePaginationButton: import("styled-components").StyledComponent<(props: PageButtonProps) => JSX.Element, any, {}, never>;
 export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../NumberInput").NumberInputProps & React.RefAttributes<HTMLInputElement>>, any, {}, never>;

package/es/@next/Pagination/PaginationStyle.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import { NumberInput } from '../NumberInput';
-import { borderRadius2 } from '../utilities/borderRadius';
+import { borderRadius2, borderRadius4 } from '../utilities/borderRadius';
 import { Blue, Neutral } from '../utilities/colors';
-import { space4 } from '../utilities/spacing';
+import { space12, space4 } from '../utilities/spacing';
 import { PageButton } from './PageButton';
 export var StyledNav = styled.nav.withConfig({
   displayName: "PaginationStyle__StyledNav",
@@ -13,21 +13,33 @@ export var SimplePaginationStyledNav = styled(StyledNav).withConfig({
   displayName: "PaginationStyle__SimplePaginationStyledNav",
   componentId: "sc-1hi5sa8-1"
 })(["gap:4px;"]);
+export var IconPaginationStyledNav = styled(StyledNav).withConfig({
+  displayName: "PaginationStyle__IconPaginationStyledNav",
+  componentId: "sc-1hi5sa8-2"
+})(["gap:0px;align-items:center;column-gap:1px;"]);
 export var StyledPageButton = styled.button.withConfig({
   displayName: "PaginationStyle__StyledPageButton",
-  componentId: "sc-1hi5sa8-2"
+  componentId: "sc-1hi5sa8-3"
 })(["cursor:pointer;height:32px;min-width:32px;border:0;background:transparent;border-radius:", ";padding:", ";color:", ";&:hover{background:", ";}&:disabled{color:", ";}svg{fill:", ";width:24px;height:24px;}&[data-active='true']{background:", ";color:", ";}&:disabled svg{fill:", ";}&[data-active='true']:disabled{background:", ";color:", ";}"], borderRadius2, space4, Neutral.B18, Neutral.B95, Neutral.B85, Neutral.B40, Blue.S08, Blue.S99, Neutral.B85, Neutral.B95, Neutral.B85);
 export var StyledSimplePaginationButton = styled(StyledPageButton).withConfig({
   displayName: "PaginationStyle__StyledSimplePaginationButton",
-  componentId: "sc-1hi5sa8-3"
+  componentId: "sc-1hi5sa8-4"
 })(["pointer-events:none;"]);
+export var StyledBorderPaginationButton = styled(StyledPageButton).withConfig({
+  displayName: "PaginationStyle__StyledBorderPaginationButton",
+  componentId: "sc-1hi5sa8-5"
+})(["outline:1px solid ", ";height:36px;min-width:36px;svg{vertical-align:middle;}&:first-of-type{border-radius:", " 0 0 ", ";}&:last-of-type{border-radius:0 ", " ", " 0;}&:hover{background:", ";}&:disabled{background:", ";}"], Neutral.B85, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Blue.S08, Neutral.B95);
+export var StyledLabel = styled.div.withConfig({
+  displayName: "PaginationStyle__StyledLabel",
+  componentId: "sc-1hi5sa8-6"
+})(["padding:0 ", " 0;vertical-align:middle;"], space12);
 export var StyledActiveSimplePaginationButton = styled(function (props) {
   return /*#__PURE__*/React.createElement(PageButton, props);
 }).withConfig({
   displayName: "PaginationStyle__StyledActiveSimplePaginationButton",
-  componentId: "sc-1hi5sa8-4"
+  componentId: "sc-1hi5sa8-7"
 })(["background:", ";color:", ";&:hover{background:", ";color:", ";}"], Blue.S08, Blue.S99, Neutral.B95, Neutral.B18);
 export var StyledSimplePaginationInput = styled(NumberInput).withConfig({
   displayName: "PaginationStyle__StyledSimplePaginationInput",
-  componentId: "sc-1hi5sa8-5"
+  componentId: "sc-1hi5sa8-8"
 })(["padding:0;text-align:center;height:32px;width:32px;"]);

package/es/@next/Pagination/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Pagination';
+export * from './IconPagination';
 export * from './SimplePagination';
-export { PaginationProps } from './paginationUtils';
+export { PaginationProps, IconPaginationProps } from './paginationUtils';

package/es/@next/Pagination/index.js

@@ -1,3 +1,4 @@
 export * from './Pagination';
+export * from './IconPagination';
 export * from './SimplePagination';
-export { PaginationProps } from './paginationUtils';
+export { PaginationProps, IconPaginationProps } from './paginationUtils';

package/es/@next/Pagination/paginationUtils.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare type PaginationProps = {
     /** Total items to be displayed, must be positive integer and above 0 */
     totalItems: number;
@@ -8,6 +9,13 @@ export declare type PaginationProps = {
     disabled?: boolean;
     onPageChanged?: (currentPage: number) => void;
 };
+export declare type IconPaginationProps = {
+    label?: React.ReactNode;
+    disableNext?: boolean;
+    disablePrevious?: boolean;
+    onNext?: () => void;
+    onPrevious?: () => void;
+};
 export declare const defaultPageSize = 10;
 export declare const defaultBufferSize = 2;
 export declare const getAllPages: (pageSize: number, total: number) => number;

package/es/@next/TextArea/TextArea.d.ts

@@ -1,13 +1,31 @@
-import React, { TextareaHTMLAttributes } from 'react';
+import React, { TextareaHTMLAttributes, RefObject } from 'react';
 export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
     value: string;
     onChange: (value: string) => void;
     error?: boolean;
     width?: string;
+    forwardedRef?: RefObject<HTMLTextAreaElement>;
+    /**
+     * if true, allows the user to type more than the maxLength.
+     * if false, the user will not be able to type more than the maxLength,
+     * all the characters typed after the maxLength will be ignored.
+     *
+     * **defaults to** `true`
+     */
+    canExceedMaxLength: boolean;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
     value: string;
     onChange: (value: string) => void;
     error?: boolean;
     width?: string;
+    forwardedRef?: RefObject<HTMLTextAreaElement>;
+    /**
+     * if true, allows the user to type more than the maxLength.
+     * if false, the user will not be able to type more than the maxLength,
+     * all the characters typed after the maxLength will be ignored.
+     *
+     * **defaults to** `true`
+     */
+    canExceedMaxLength: boolean;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/es/@next/TextArea/TextArea.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange"];
-import React, { useEffect, useRef, useState } from 'react';
+var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength"];
+import React, { useRef, useState } from 'react';
 import { StyledTextAreaContainer, StyledTextArea, StyledWordCountContainer } from './TextAreaStyle';
 import { Typography } from '../Typography';
-export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
+var _TextArea = function _TextArea(_ref) {
   var value = _ref.value,
     _ref$rows = _ref.rows,
     rows = _ref$rows === void 0 ? 3 : _ref$rows,
@@ -16,28 +16,20 @@ export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref)
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '520px' : _ref$width,
     onChange = _ref.onChange,
+    forwardedRef = _ref.forwardedRef,
+    _ref$canExceedMaxLeng = _ref.canExceedMaxLength,
+    canExceedMaxLength = _ref$canExceedMaxLeng === void 0 ? true : _ref$canExceedMaxLeng,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(0),
-    charCount = _useState[0],
-    setCharCount = _useState[1];
-  var _useState2 = useState(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var isError = error || !!maxLength && charCount > maxLength;
+  var _useState = useState(false),
+    isFocused = _useState[0],
+    setIsFocused = _useState[1];
+  var charCount = value.length;
+  var hasMaxLengthEnforced = maxLength > 0;
+  var hasError = error || canExceedMaxLength && charCount > maxLength;
   var localRef = useRef(null);
-  var setRefs = function setRefs(node) {
-    localRef.current = node;
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  };
-  useEffect(function () {
-    setCharCount(value.length);
-  }, [value]);
+  var textAreaInputRef = forwardedRef || localRef;
   var handleContainerClick = function handleContainerClick() {
-    if (localRef.current) {
+    if (textAreaInputRef.current) {
       localRef.current.focus();
     }
   };
@@ -46,30 +38,38 @@ export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref)
     onChange(val);
   };
   return /*#__PURE__*/React.createElement(StyledTextAreaContainer, {
-    "data-error": isError,
+    "data-error": hasError,
     "data-disabled": disabled,
     "data-focus": isFocused,
-    "data-has-counter": !!maxLength,
+    "data-has-counter": hasMaxLengthEnforced,
     width: width,
     onClick: handleContainerClick
   }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
-    ref: setRefs,
+    ref: textAreaInputRef,
     value: value,
     rows: rows,
     width: width,
     onChange: handleChange,
     disabled: disabled,
+    maxLength: !canExceedMaxLength && maxLength,
     onFocus: function onFocus() {
       return setIsFocused(true);
     },
     onBlur: function onBlur() {
       return setIsFocused(false);
     }
-  }, props)), !!maxLength && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
+  }, props)), hasMaxLengthEnforced && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
     "data-disabled": disabled,
-    "data-error": isError
+    "data-error": hasError
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "overline"
   }, charCount, " / ", maxLength)));
-});
+};
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/React.createElement(_TextArea, _extends({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = _TextArea.name;
+export var TextArea = /*#__PURE__*/React.forwardRef(forwardRef);

package/es/@next/index.d.ts

@@ -26,7 +26,7 @@ export { Link, LinkProps } from './Link';
 export { Menu, MenuProps } from './Menu';
 export { Modal, ModalContext, ModalProps, ModalProvider, useModal, } from './Modal';
 export { NumberInput, NumberInputProps } from './NumberInput';
-export { Pagination, PaginationProps, SimplePagination } from './Pagination';
+export { IconPagination, IconPaginationProps, Pagination, PaginationProps, SimplePagination, } from './Pagination';
 export { PasswordInput, PasswordInputProps } from './PasswordInput';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';

package/es/@next/index.js

@@ -27,7 +27,7 @@ export { Link, LinkProps } from './Link';
 export { Menu, MenuProps } from './Menu';
 export { Modal, ModalContext, ModalProps, ModalProvider, useModal } from './Modal';
 export { NumberInput, NumberInputProps } from './NumberInput';
-export { Pagination, PaginationProps, SimplePagination } from './Pagination';
+export { IconPagination, IconPaginationProps, Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { PasswordInput, PasswordInputProps } from './PasswordInput';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';

package/lib/@next/Pagination/IconPagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconPaginationProps } from './paginationUtils';
+export declare const IconPagination: React.ForwardRefExoticComponent<IconPaginationProps & React.RefAttributes<HTMLElement>>;

package/lib/@next/Pagination/IconPagination.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.IconPagination = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PaginationStyle = require("./PaginationStyle");
+var _Icon = require("../Icon");
+var IconPagination = /*#__PURE__*/_react["default"].forwardRef(function IconPagination(_ref, ref) {
+  var label = _ref.label,
+    disableNext = _ref.disableNext,
+    disablePrevious = _ref.disablePrevious,
+    onNext = _ref.onNext,
+    onPrevious = _ref.onPrevious;
+  return /*#__PURE__*/_react["default"].createElement(_PaginationStyle.IconPaginationStyledNav, {
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledBorderPaginationButton, {
+    "data-testid": "previous-page",
+    disabled: disablePrevious,
+    onClick: onPrevious
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-arrow-m-left-line"
+  })), label && /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledBorderPaginationButton, {
+    "data-testid": "next-page",
+    disabled: disableNext,
+    onClick: onNext
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-arrow-m-right-line"
+  })));
+});
+exports.IconPagination = IconPagination;

package/lib/@next/Pagination/IconPagination.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const WithLabel: any;

package/lib/@next/Pagination/PaginationStyle.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { PageButtonProps } from './PageButton';
 export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const SimplePaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const IconPaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const StyledPageButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
 export declare const StyledSimplePaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledBorderPaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledActiveSimplePaginationButton: import("styled-components").StyledComponent<(props: PageButtonProps) => JSX.Element, any, {}, never>;
 export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../NumberInput").NumberInputProps & React.RefAttributes<HTMLInputElement>>, any, {}, never>;

package/lib/@next/Pagination/PaginationStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledSimplePaginationInput = exports.StyledSimplePaginationButton = exports.StyledPageButton = exports.StyledNav = exports.StyledActiveSimplePaginationButton = exports.SimplePaginationStyledNav = void 0;
+exports.StyledSimplePaginationInput = exports.StyledSimplePaginationButton = exports.StyledPageButton = exports.StyledNav = exports.StyledLabel = exports.StyledBorderPaginationButton = exports.StyledActiveSimplePaginationButton = exports.SimplePaginationStyledNav = exports.IconPaginationStyledNav = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _NumberInput = require("../NumberInput");
@@ -20,25 +20,40 @@ var SimplePaginationStyledNav = (0, _styledComponents["default"])(StyledNav).wit
   componentId: "sc-1hi5sa8-1"
 })(["gap:4px;"]);
 exports.SimplePaginationStyledNav = SimplePaginationStyledNav;
+var IconPaginationStyledNav = (0, _styledComponents["default"])(StyledNav).withConfig({
+  displayName: "PaginationStyle__IconPaginationStyledNav",
+  componentId: "sc-1hi5sa8-2"
+})(["gap:0px;align-items:center;column-gap:1px;"]);
+exports.IconPaginationStyledNav = IconPaginationStyledNav;
 var StyledPageButton = _styledComponents["default"].button.withConfig({
   displayName: "PaginationStyle__StyledPageButton",
-  componentId: "sc-1hi5sa8-2"
+  componentId: "sc-1hi5sa8-3"
 })(["cursor:pointer;height:32px;min-width:32px;border:0;background:transparent;border-radius:", ";padding:", ";color:", ";&:hover{background:", ";}&:disabled{color:", ";}svg{fill:", ";width:24px;height:24px;}&[data-active='true']{background:", ";color:", ";}&:disabled svg{fill:", ";}&[data-active='true']:disabled{background:", ";color:", ";}"], _borderRadius.borderRadius2, _spacing.space4, _colors.Neutral.B18, _colors.Neutral.B95, _colors.Neutral.B85, _colors.Neutral.B40, _colors.Blue.S08, _colors.Blue.S99, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85);
 exports.StyledPageButton = StyledPageButton;
 var StyledSimplePaginationButton = (0, _styledComponents["default"])(StyledPageButton).withConfig({
   displayName: "PaginationStyle__StyledSimplePaginationButton",
-  componentId: "sc-1hi5sa8-3"
+  componentId: "sc-1hi5sa8-4"
 })(["pointer-events:none;"]);
 exports.StyledSimplePaginationButton = StyledSimplePaginationButton;
+var StyledBorderPaginationButton = (0, _styledComponents["default"])(StyledPageButton).withConfig({
+  displayName: "PaginationStyle__StyledBorderPaginationButton",
+  componentId: "sc-1hi5sa8-5"
+})(["outline:1px solid ", ";height:36px;min-width:36px;svg{vertical-align:middle;}&:first-of-type{border-radius:", " 0 0 ", ";}&:last-of-type{border-radius:0 ", " ", " 0;}&:hover{background:", ";}&:disabled{background:", ";}"], _colors.Neutral.B85, _borderRadius.borderRadius4, _borderRadius.borderRadius4, _borderRadius.borderRadius4, _borderRadius.borderRadius4, _colors.Blue.S08, _colors.Neutral.B95);
+exports.StyledBorderPaginationButton = StyledBorderPaginationButton;
+var StyledLabel = _styledComponents["default"].div.withConfig({
+  displayName: "PaginationStyle__StyledLabel",
+  componentId: "sc-1hi5sa8-6"
+})(["padding:0 ", " 0;vertical-align:middle;"], _spacing.space12);
+exports.StyledLabel = StyledLabel;
 var StyledActiveSimplePaginationButton = (0, _styledComponents["default"])(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_PageButton.PageButton, props);
 }).withConfig({
   displayName: "PaginationStyle__StyledActiveSimplePaginationButton",
-  componentId: "sc-1hi5sa8-4"
+  componentId: "sc-1hi5sa8-7"
 })(["background:", ";color:", ";&:hover{background:", ";color:", ";}"], _colors.Blue.S08, _colors.Blue.S99, _colors.Neutral.B95, _colors.Neutral.B18);
 exports.StyledActiveSimplePaginationButton = StyledActiveSimplePaginationButton;
 var StyledSimplePaginationInput = (0, _styledComponents["default"])(_NumberInput.NumberInput).withConfig({
   displayName: "PaginationStyle__StyledSimplePaginationInput",
-  componentId: "sc-1hi5sa8-5"
+  componentId: "sc-1hi5sa8-8"
 })(["padding:0;text-align:center;height:32px;width:32px;"]);
 exports.StyledSimplePaginationInput = StyledSimplePaginationInput;

package/lib/@next/Pagination/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Pagination';
+export * from './IconPagination';
 export * from './SimplePagination';
-export { PaginationProps } from './paginationUtils';
+export { PaginationProps, IconPaginationProps } from './paginationUtils';

package/lib/@next/Pagination/index.js

@@ -2,9 +2,10 @@
 
 exports.__esModule = true;
 var _exportNames = {
-  PaginationProps: true
+  PaginationProps: true,
+  IconPaginationProps: true
 };
-exports.PaginationProps = void 0;
+exports.PaginationProps = exports.IconPaginationProps = void 0;
 var _Pagination = require("./Pagination");
 Object.keys(_Pagination).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -12,6 +13,13 @@ Object.keys(_Pagination).forEach(function (key) {
   if (key in exports && exports[key] === _Pagination[key]) return;
   exports[key] = _Pagination[key];
 });
+var _IconPagination = require("./IconPagination");
+Object.keys(_IconPagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _IconPagination[key]) return;
+  exports[key] = _IconPagination[key];
+});
 var _SimplePagination = require("./SimplePagination");
 Object.keys(_SimplePagination).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -20,4 +28,5 @@ Object.keys(_SimplePagination).forEach(function (key) {
   exports[key] = _SimplePagination[key];
 });
 var _paginationUtils = require("./paginationUtils");
-exports.PaginationProps = _paginationUtils.PaginationProps;
+exports.PaginationProps = _paginationUtils.PaginationProps;
+exports.IconPaginationProps = _paginationUtils.IconPaginationProps;

package/lib/@next/Pagination/paginationUtils.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare type PaginationProps = {
     /** Total items to be displayed, must be positive integer and above 0 */
     totalItems: number;
@@ -8,6 +9,13 @@ export declare type PaginationProps = {
     disabled?: boolean;
     onPageChanged?: (currentPage: number) => void;
 };
+export declare type IconPaginationProps = {
+    label?: React.ReactNode;
+    disableNext?: boolean;
+    disablePrevious?: boolean;
+    onNext?: () => void;
+    onPrevious?: () => void;
+};
 export declare const defaultPageSize = 10;
 export declare const defaultBufferSize = 2;
 export declare const getAllPages: (pageSize: number, total: number) => number;

package/lib/@next/TextArea/TextArea.d.ts

@@ -1,13 +1,31 @@
-import React, { TextareaHTMLAttributes } from 'react';
+import React, { TextareaHTMLAttributes, RefObject } from 'react';
 export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
     value: string;
     onChange: (value: string) => void;
     error?: boolean;
     width?: string;
+    forwardedRef?: RefObject<HTMLTextAreaElement>;
+    /**
+     * if true, allows the user to type more than the maxLength.
+     * if false, the user will not be able to type more than the maxLength,
+     * all the characters typed after the maxLength will be ignored.
+     *
+     * **defaults to** `true`
+     */
+    canExceedMaxLength: boolean;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
     value: string;
     onChange: (value: string) => void;
     error?: boolean;
     width?: string;
+    forwardedRef?: RefObject<HTMLTextAreaElement>;
+    /**
+     * if true, allows the user to type more than the maxLength.
+     * if false, the user will not be able to type more than the maxLength,
+     * all the characters typed after the maxLength will be ignored.
+     *
+     * **defaults to** `true`
+     */
+    canExceedMaxLength: boolean;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/lib/@next/TextArea/TextArea.js

@@ -8,10 +8,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _TextAreaStyle = require("./TextAreaStyle");
 var _Typography = require("../Typography");
-var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange"];
+var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(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 = {}; 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; }
-var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref, ref) {
+var _TextArea = function _TextArea(_ref) {
   var value = _ref.value,
     _ref$rows = _ref.rows,
     rows = _ref$rows === void 0 ? 3 : _ref$rows,
@@ -23,28 +23,20 @@ var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '520px' : _ref$width,
     onChange = _ref.onChange,
+    forwardedRef = _ref.forwardedRef,
+    _ref$canExceedMaxLeng = _ref.canExceedMaxLength,
+    canExceedMaxLength = _ref$canExceedMaxLeng === void 0 ? true : _ref$canExceedMaxLeng,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var _useState = (0, _react.useState)(0),
-    charCount = _useState[0],
-    setCharCount = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var isError = error || !!maxLength && charCount > maxLength;
+  var _useState = (0, _react.useState)(false),
+    isFocused = _useState[0],
+    setIsFocused = _useState[1];
+  var charCount = value.length;
+  var hasMaxLengthEnforced = maxLength > 0;
+  var hasError = error || canExceedMaxLength && charCount > maxLength;
   var localRef = (0, _react.useRef)(null);
-  var setRefs = function setRefs(node) {
-    localRef.current = node;
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  };
-  (0, _react.useEffect)(function () {
-    setCharCount(value.length);
-  }, [value]);
+  var textAreaInputRef = forwardedRef || localRef;
   var handleContainerClick = function handleContainerClick() {
-    if (localRef.current) {
+    if (textAreaInputRef.current) {
       localRef.current.focus();
     }
   };
@@ -53,31 +45,39 @@ var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref,
     onChange(val);
   };
   return /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledTextAreaContainer, {
-    "data-error": isError,
+    "data-error": hasError,
     "data-disabled": disabled,
     "data-focus": isFocused,
-    "data-has-counter": !!maxLength,
+    "data-has-counter": hasMaxLengthEnforced,
     width: width,
     onClick: handleContainerClick
   }, /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledTextArea, (0, _extends2["default"])({
-    ref: setRefs,
+    ref: textAreaInputRef,
     value: value,
     rows: rows,
     width: width,
     onChange: handleChange,
     disabled: disabled,
+    maxLength: !canExceedMaxLength && maxLength,
     onFocus: function onFocus() {
       return setIsFocused(true);
     },
     onBlur: function onBlur() {
       return setIsFocused(false);
     }
-  }, props)), !!maxLength && /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledWordCountContainer, {
+  }, props)), hasMaxLengthEnforced && /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledWordCountContainer, {
     "data-disabled": disabled,
-    "data-error": isError
+    "data-error": hasError
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
     variant: "overline"
   }, charCount, " / ", maxLength)));
-});
+};
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_TextArea, (0, _extends2["default"])({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = _TextArea.name;
+var TextArea = /*#__PURE__*/_react["default"].forwardRef(forwardRef);
 exports.TextArea = TextArea;

package/lib/@next/index.d.ts

@@ -26,7 +26,7 @@ export { Link, LinkProps } from './Link';
 export { Menu, MenuProps } from './Menu';
 export { Modal, ModalContext, ModalProps, ModalProvider, useModal, } from './Modal';
 export { NumberInput, NumberInputProps } from './NumberInput';
-export { Pagination, PaginationProps, SimplePagination } from './Pagination';
+export { IconPagination, IconPaginationProps, Pagination, PaginationProps, SimplePagination, } from './Pagination';
 export { PasswordInput, PasswordInputProps } from './PasswordInput';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';

package/lib/@next/index.js

@@ -1,8 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TextAreaProps = exports.TextArea = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = exports.SimplePagination = exports.SideSheetProps = exports.SideSheet = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PasswordInputProps = exports.PasswordInput = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CarouselProps = exports.Carousel = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.UploadProps = exports.Upload = exports.TypographyProps = exports.Typography = exports.TooltipProps = void 0;
+exports.TextInputProps = exports.TextInput = exports.TextAreaProps = exports.TextArea = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = exports.SimplePagination = exports.SideSheetProps = exports.SideSheet = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PasswordInputProps = exports.PasswordInput = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.IconPaginationProps = exports.IconPagination = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CarouselProps = exports.Carousel = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.UploadProps = exports.Upload = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -98,6 +98,8 @@ var _NumberInput = require("./NumberInput");
 exports.NumberInput = _NumberInput.NumberInput;
 exports.NumberInputProps = _NumberInput.NumberInputProps;
 var _Pagination = require("./Pagination");
+exports.IconPagination = _Pagination.IconPagination;
+exports.IconPaginationProps = _Pagination.IconPaginationProps;
 exports.Pagination = _Pagination.Pagination;
 exports.PaginationProps = _Pagination.PaginationProps;
 exports.SimplePagination = _Pagination.SimplePagination;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.268",
+  "version": "4.0.270",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",