Merge branch 'main' into filterable-table-settings

gravity-ui · Jun 13, 2024 · 217f581 · 217f581
2 parents 6e70da7 + 5cdc675
commit 217f581
Show file tree

Hide file tree

Showing 133 changed files with 1,970 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## [6.17.0](https://github.com/gravity-ui/uikit/compare/v6.16.0...v6.17.0) (2024-06-11)
+
+
+### Features
+
+* add PinInput component ([#1557](https://github.com/gravity-ui/uikit/issues/1557)) ([7d26272](https://github.com/gravity-ui/uikit/commit/7d26272ed67e7f94f002f501a9ff703f4210a925))
+
+
+### Bug Fixes
+
+* **Button:** normal-contrast loading view ([#1630](https://github.com/gravity-ui/uikit/issues/1630)) ([bfa2dbf](https://github.com/gravity-ui/uikit/commit/bfa2dbfa85c2c01e0fcd8c5f07d6e93fa31660ff))
+* **Slider:** export function for preparing initial value ([#1637](https://github.com/gravity-ui/uikit/issues/1637)) ([434949e](https://github.com/gravity-ui/uikit/commit/434949e4f608cde2330cca02cbd0ab99244fd0fb))
+* **Text:** return missing props to TextProps type ([#1631](https://github.com/gravity-ui/uikit/issues/1631)) ([6a70f17](https://github.com/gravity-ui/uikit/commit/6a70f17c04f4af52e49ea5bcbe9c1f886d9c3969))
+* **theme:** bring back root classname helper and fix docs ([#1633](https://github.com/gravity-ui/uikit/issues/1633)) ([ba08c66](https://github.com/gravity-ui/uikit/commit/ba08c66d83dac2d8ff9d44c27f2739f192d68e92))
+* **Toc:** unify item line height ([#1635](https://github.com/gravity-ui/uikit/issues/1635)) ([4612a77](https://github.com/gravity-ui/uikit/commit/4612a7713ee04590a8e4073d831a42ba2e03d9fe))
+* **useList:** add qa property to container ([#1625](https://github.com/gravity-ui/uikit/issues/1625)) ([05c1fc2](https://github.com/gravity-ui/uikit/commit/05c1fc2df61226cc070c007388c1aeb5e5744799))
+
 ## [6.16.0](https://github.com/gravity-ui/uikit/compare/v6.15.0...v6.16.0) (2024-05-24)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.16.0",
+    "version": "6.17.0",
     "description": "Gravity UI base styling and components",
     "license": "MIT",
     "engines": {
-      "node": ">= 18",
-      "npm": ">= 9",
-      "yarn": "Please use npm instead of yarn to install dependencies",
-      "pnpm": "Please use npm instead of pnpm to install dependencies"
+        "node": ">= 18",
+        "npm": ">= 9",
+        "yarn": "Please use npm instead of yarn to install dependencies",
+        "pnpm": "Please use npm instead of pnpm to install dependencies"
     },
     "repository": {
         "type": "git",
@@ -179,9 +179,9 @@
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.33",
         "prettier": "^3.2.4",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-docgen-typescript": "^2.2.2",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "sass-loader": "^14.0.0",

diff --git a/src/components/ActionTooltip/ActionTooltip.tsx b/src/components/ActionTooltip/ActionTooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useForkRef} from '../../hooks';

diff --git a/src/components/Alert/AlertAction.tsx b/src/components/Alert/AlertAction.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Button} from '../Button';

diff --git a/src/components/Alert/AlertActions.tsx b/src/components/Alert/AlertActions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Flex} from '../layout';

diff --git a/src/components/Alert/AlertContextProvider.tsx b/src/components/Alert/AlertContextProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AlertContext} from './AlertContext';

diff --git a/src/components/Alert/useAlertContext.tsx b/src/components/Alert/useAlertContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AlertContext} from './AlertContext';

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -27,10 +27,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
         qa,
     } = props;
 
-    const style = React.useMemo(
-        () => ({backgroundColor, color: borderColor, ...styleProp}),
-        [backgroundColor, borderColor, styleProp],
-    );
+    const style = {backgroundColor, color: borderColor, ...styleProp};
 
     const renderContent = () => {
         if ('imgUrl' in props && props.imgUrl) {

diff --git a/src/components/Avatar/AvatarIcon/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon/AvatarIcon.tsx
@@ -14,7 +14,7 @@ const avatarSizeToIconSize: Record<AvatarSize, number> = {
 };
 
 export const AvatarIcon = ({icon, color, size, className}: AvatarIconProps) => {
-    const style = React.useMemo(() => ({color}), [color]);
+    const style = {color};
 
     return (
         <div style={style} className={className}>

diff --git a/src/components/Avatar/AvatarImage/AvatarImage.tsx b/src/components/Avatar/AvatarImage/AvatarImage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AVATAR_SIZES} from '../constants';

diff --git a/src/components/Avatar/AvatarText/AvatarText.tsx b/src/components/Avatar/AvatarText/AvatarText.tsx
@@ -4,8 +4,8 @@ import type {AvatarTextProps} from './types';
 import {getAvatarDisplayText} from './utils';
 
 export const AvatarText = ({text, color, className}: AvatarTextProps) => {
-    const style = React.useMemo(() => ({color}), [color]);
-    const displayText = React.useMemo(() => getAvatarDisplayText(text), [text]);
+    const style = {color};
+    const displayText = getAvatarDisplayText(text);
 
     return (
         <div style={style} className={className}>

diff --git a/src/components/Avatar/AvatarText/utils.ts b/src/components/Avatar/AvatarText/utils.ts
@@ -1,5 +1,5 @@
 export const getAvatarDisplayText = (text: string) => {
-    const words = text.split(' ');
+    const words = text.split(/\s+/);
     const result =
         words.length > 1 ? [words[0][0], words[1][0]].filter(Boolean).join('') : text.slice(0, 2);
 

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _throttle from 'lodash/throttle';

diff --git a/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Link} from '../Link';

diff --git a/src/components/Breadcrumbs/BreadcrumbsMore.tsx b/src/components/Breadcrumbs/BreadcrumbsMore.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {DropdownMenu} from '../DropdownMenu';

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,12 +1,14 @@
+'use client';
+
 import React from 'react';
 
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {isIcon} from '../utils/common';
+import {isIcon, isSvg} from '../utils/common';
 import {eventBroker} from '../utils/event-broker';
 import {isOfType} from '../utils/isOfType';
 
-import {ButtonIcon} from './ButtonIcon';
+import {ButtonIcon, getIconSide} from './ButtonIcon';
 
 import './Button.scss';
 
@@ -193,16 +195,22 @@ ButtonWithHandlers.displayName = 'Button';
 export const Button = Object.assign(ButtonWithHandlers, {Icon: ButtonIcon});
 
 const isButtonIconComponent = isOfType(ButtonIcon);
+const isSpan = isOfType<{className?: string}>('span');
+const buttonIconClassRe = RegExp(`^${b('icon')}($|\\s+\\w)`);
 
+// eslint-disable-next-line complexity
 function prepareChildren(children: React.ReactNode) {
     const items = React.Children.toArray(children);
 
     if (items.length === 1) {
         const onlyItem = items[0];
+        const isButtonIconElement =
+            isButtonIconComponent(onlyItem) ||
+            (isSpan(onlyItem) && buttonIconClassRe.test(onlyItem.props.className || ''));
 
-        if (isButtonIconComponent(onlyItem)) {
+        if (isButtonIconElement) {
             return onlyItem;
-        } else if (isIcon(onlyItem)) {
+        } else if (isIcon(onlyItem) || isSvg(onlyItem)) {
             return <Button.Icon key="icon">{onlyItem}</Button.Icon>;
         } else {
             return (
@@ -216,10 +224,12 @@ function prepareChildren(children: React.ReactNode) {
         const content = [];
 
         for (const item of items) {
-            const isIconElement = isIcon(item);
+            const isIconElement = isIcon(item) || isSvg(item);
             const isButtonIconElement = isButtonIconComponent(item);
+            const isRenderedButtonIconElement =
+                isSpan(item) && buttonIconClassRe.test(item.props.className || '');
 
-            if (isIconElement || isButtonIconElement) {
+            if (isIconElement || isButtonIconElement || isRenderedButtonIconElement) {
                 if (!startIcon && content.length === 0) {
                     const key = 'icon-start';
                     const side = 'start';
@@ -229,10 +239,14 @@ function prepareChildren(children: React.ReactNode) {
                                 {item}
                             </Button.Icon>
                         );
-                    } else {
+                    } else if (isButtonIconElement) {
                         startIcon = React.cloneElement(item, {
                             side,
                         });
+                    } else {
+                        startIcon = React.cloneElement(item, {
+                            className: b('icon', {side: getIconSide(side)}, item.props.className),
+                        });
                     }
                 } else if (!endIcon && content.length !== 0) {
                     const key = 'icon-end';
@@ -243,10 +257,14 @@ function prepareChildren(children: React.ReactNode) {
                                 {item}
                             </Button.Icon>
                         );
-                    } else {
+                    } else if (isButtonIconElement) {
                         endIcon = React.cloneElement(item, {
                             side,
                         });
+                    } else {
+                        endIcon = React.cloneElement(item, {
+                            className: b('icon', {side: getIconSide(side)}, item.props.className),
+                        });
                     }
                 }
             } else {

diff --git a/src/components/Button/ButtonIcon.tsx b/src/components/Button/ButtonIcon.tsx
@@ -17,23 +17,12 @@ function warnAboutPhysicalValues() {
 }
 
 export const ButtonIcon = ({side, className, children}: Props) => {
-    let sideMod = side;
-
-    if (sideMod === 'left') {
-        warnAboutPhysicalValues();
-        sideMod = 'start';
-    }
-    if (sideMod === 'right') {
-        warnAboutPhysicalValues();
-        sideMod = 'end';
-    }
-
     return (
         <span
             className={b(
                 'icon',
                 {
-                    side: sideMod,
+                    side: getIconSide(side),
                 },
                 className,
             )}
@@ -44,3 +33,18 @@ export const ButtonIcon = ({side, className, children}: Props) => {
 };
 
 ButtonIcon.displayName = 'Button.Icon';
+
+export function getIconSide(side?: 'left' | 'right' | 'start' | 'end') {
+    let sideMod = side;
+
+    if (sideMod === 'left') {
+        warnAboutPhysicalValues();
+        sideMod = 'start';
+    }
+    if (sideMod === 'right') {
+        warnAboutPhysicalValues();
+        sideMod = 'end';
+    }
+
+    return sideMod;
+}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -1 +1,2 @@
 export * from './Button';
+export {ButtonIcon} from './ButtonIcon';
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useActionHandlers} from '../../hooks';

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useCheckbox} from '../../hooks/private';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './Button';
		export {ButtonIcon} from './ButtonIcon';