chore: sync with master

Author: tewarig

.changeset/itchy-pans-hunt.md

@@ -1,5 +1,37 @@
 # @razorpay/blade
 
+## 12.12.0
+
+### Minor Changes
+
+- 7e155b6f: feat(blade): add engage and translate icons
+
+## 12.11.0
+
+### Minor Changes
+
+- d906838f: feat(blade): add Chat Message component
+
+## 12.10.0
+
+### Minor Changes
+
+- 142afcdf: feat(TextArea): expose `onKeydown` on TextArea and allow `numOfLines={1}`
+
+### Patch Changes
+
+- 6cf03ea3: feat: Improve OTPInput field value clear behaviour
+
+## 12.9.1
+
+### Patch Changes
+
+- 5531ef3f: feat: remove overflowY if L1 sidenav is collapsed
+- 5531ef3f: feat: SideNav improvements & fixes for X migration
+
+  1. Removed overflowY if L1 sidenav is collapsed
+  2. Fixed onVisibleLevelChange not getting called when clicking on a nested submenu
+
 ## 12.9.0
 
 ### Minor Changes

.changeset/proud-squids-clean.md

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.9.0",
+  "version": "12.12.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -264,7 +264,7 @@
     "react-native-svg": "15.1.0",
     "react-scripts": "5.0.1",
     "react-test-renderer": "18.2.0",
-    "rollup": "3.28.1",
+    "rollup": "3.29.5",
     "rollup-plugin-dts": "5.3.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "size-limit": "8.2.4",

packages/blade-coverage-extension/yarn.lock

@@ -1,8 +1,8 @@
 [
   {
-    "prompt": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z\" fill=\"#192839\"/>\n<path d=\"M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z\" fill=\"#192839\"/>\n<path d=\"M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H11C11.5523 19 12 18.5523 12 18C12 17.4477 11.5523 17 11 17H3Z\" fill=\"#192839\"/>\n</svg>\n"
+    "engage": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M14 6.5C13.4477 6.5 13 6.94772 13 7.5C13 7.88867 13.2217 8.22556 13.5456 8.39104L12.0314 9.61731L11.3269 8.78087C10.976 8.36418 10.3561 8.30508 9.93273 8.64795L7.37061 10.7229C6.94142 11.0705 6.87527 11.7002 7.22286 12.1294C7.57044 12.5586 8.20014 12.6247 8.62933 12.2771L10.4291 10.8195L11.1336 11.656C11.4846 12.0727 12.1045 12.1318 12.5278 11.7889L15.034 9.75932C15.1482 10.1859 15.5374 10.5 16 10.5C16.5523 10.5 17 10.0523 17 9.5V7.5C17 6.94772 16.5523 6.5 16 6.5H14Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 5.54348V15.0124C3.34237 15.0884 2.84021 15.5042 2.52971 15.9601C2.18251 16.4699 2 17.1184 2 17.7857V19.2143C2 19.8816 2.18251 20.5301 2.52971 21.0399C2.8734 21.5445 3.45194 22 4.21622 22H19.7838C20.5481 22 21.1266 21.5445 21.4703 21.0399C21.8175 20.5301 22 19.8816 22 19.2143V17.7857C22 17.1184 21.8175 16.4699 21.4703 15.9601C21.1598 15.5042 20.6576 15.0884 20 15.0124V5.54348C20 3.74019 18.7218 2 16.8276 2H7.17241C5.27824 2 4 3.74019 4 5.54348ZM7.17241 4C6.66701 4 6 4.53732 6 5.54348V15H18V5.54348C18 4.53732 17.333 4 16.8276 4H7.17241ZM4.18273 17.0859C4.21549 17.0378 4.24054 17.0125 4.25571 17H19.7443C19.7595 17.0125 19.7845 17.0378 19.8173 17.0859C19.9102 17.2225 20 17.4669 20 17.7857V19.2143C20 19.5331 19.9102 19.7775 19.8173 19.9141C19.7845 19.9622 19.7595 19.9875 19.7443 20H4.25571C4.24054 19.9875 4.21549 19.9622 4.18273 19.9141C4.08975 19.7775 4 19.5331 4 19.2143V17.7857C4 17.4669 4.08975 17.2225 4.18273 17.0859ZM19.7277 20.0107C19.7277 20.0107 19.73 20.0088 19.735 20.007C19.7303 20.0101 19.7277 20.0107 19.7277 20.0107ZM4.27231 20.0107C4.27231 20.0107 4.26974 20.0101 4.26502 20.007C4.27003 20.0088 4.27231 20.0107 4.27231 20.0107Z\" fill=\"#192839\"/>\n</svg>\n"
   },
   {
-    "sort": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.54893 1.29663C8.359 1.1067 8.1014 1 7.8328 1C7.5642 1 7.3066 1.1067 7.11667 1.29663L2.29662 6.11675C1.90112 6.51225 1.90113 7.1535 2.29663 7.549C2.69214 7.9445 3.33338 7.9445 3.72889 7.54899L6.88779 4.39005V12.9499C6.88779 13.5092 7.34121 13.9627 7.90054 13.9627C8.45987 13.9627 8.9133 13.5092 8.9133 12.9499V4.5255L11.9368 7.54899C12.3323 7.9445 12.9735 7.9445 13.369 7.54899C13.7645 7.15349 13.7645 6.51225 13.369 6.11674L8.54893 1.29663Z\" fill=\"#192839\"/>\n<path d=\"M15.2611 22.8159C14.9925 22.8159 14.7349 22.7092 14.545 22.5193L9.72486 17.6992C9.32935 17.3037 9.32935 16.6624 9.72486 16.2669C10.1204 15.8714 10.7616 15.8714 11.1571 16.2669L14.1806 19.2904L14.1806 10.866C14.1806 10.3067 14.634 9.85326 15.1934 9.85326C15.7527 9.85326 16.2061 10.3067 16.2061 10.866L16.2061 19.4259L19.365 16.2669C19.7605 15.8714 20.4018 15.8714 20.7973 16.2669C21.1928 16.6624 21.1928 17.3037 20.7973 17.6992L15.9772 22.5193C15.7873 22.7092 15.5297 22.8159 15.2611 22.8159Z\" fill=\"#192839\"/>\n</svg>\n"
+    "translate": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.19201 10.3022C7.87772 10.3022 8.93486 9.40506 8.93486 7.86709C8.93486 7.72469 8.92058 7.59653 8.9063 7.46838C9.07772 7.48262 9.26344 7.49684 9.43486 7.49684C9.66491 7.49684 9.91597 7.47589 10.1586 7.4389C10.3162 7.41487 10.4634 7.53349 10.4634 7.69289V10C10.4634 10.5523 10.9112 11 11.4634 11C12.0157 11 12.4634 10.5523 12.4634 10V4.14H12.7646C13.3163 4.14 13.7634 3.69282 13.7634 3.1412C13.7634 2.58958 13.3163 2.1424 12.7646 2.1424H10.5622C10.0106 2.1424 9.56344 2.58958 9.56344 3.1412V3.24C9.56344 3.73706 9.96638 4.14 10.4634 4.14V5.40579C10.4634 5.62465 10.3216 5.82093 10.1076 5.86666C9.75707 5.94154 9.39278 5.9731 9.02058 5.9731C8.63486 5.9731 8.29201 5.94462 7.97772 5.9019C8.46344 5.47468 8.72058 4.90506 8.72058 4.23576C8.72058 2.96835 7.96344 2 6.13486 2C5.44316 2 4.8186 2.119 4.2558 2.32474C3.89073 2.4582 3.73308 2.8712 3.86462 3.23696C4.02792 3.69106 4.56216 3.87653 5.02647 3.74505C5.31498 3.66335 5.60349 3.62342 5.89201 3.62342C6.44915 3.62342 6.79201 3.86551 6.79201 4.33544C6.79201 4.76147 6.53523 5.04627 5.708 5.2246C5.28043 5.31677 4.97426 5.71379 5.05385 6.14388C5.12413 6.52371 5.47196 6.7937 5.85437 6.73917C6.098 6.70444 6.32959 6.66006 6.54915 6.59968C6.86344 6.91298 7.04915 7.26899 7.04915 7.66772C7.04915 8.32278 6.63486 8.66456 5.94915 8.66456C5.0416 8.66456 4.36569 7.91939 3.65928 6.32093C3.45737 5.86405 2.92015 5.64934 2.47145 5.86884C2.07196 6.06426 1.88785 6.53685 2.07115 6.94205C3.21195 9.464 4.44972 10.3022 6.19201 10.3022Z\" fill=\"#192839\"/>\n<path d=\"M16.7634 4.25H17.7634C19.4203 4.25 20.7634 5.59315 20.7634 7.25V12.95C20.7634 13.5023 21.2112 13.95 21.7634 13.95C22.3157 13.95 22.7634 13.5023 22.7634 12.95V7.25C22.7634 4.48858 20.5249 2.25 17.7634 2.25H16.7634C16.2112 2.25 15.7634 2.69772 15.7634 3.25C15.7634 3.80228 16.2112 4.25 16.7634 4.25Z\" fill=\"#192839\"/>\n<path d=\"M7.76344 19.25C8.31572 19.25 8.76344 19.6977 8.76344 20.25C8.76344 20.8023 8.31572 21.25 7.76344 21.25C5.00201 21.25 2.76344 19.0114 2.76344 16.25V13.25C2.76344 12.6977 3.21115 12.25 3.76344 12.25C4.31572 12.25 4.76344 12.6977 4.76344 13.25V16.25C4.76344 17.9069 6.10658 19.25 7.76344 19.25Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.2634 10.25C16.6422 10.25 16.9884 10.464 17.1578 10.8028L21.6578 19.8028C21.9048 20.2968 21.7046 20.8974 21.2106 21.1444C20.7166 21.3914 20.116 21.1912 19.869 20.6972L18.6454 18.25H13.8814L12.6578 20.6972C12.4108 21.1912 11.8102 21.3914 11.3162 21.1444C10.8222 20.8974 10.622 20.2968 10.869 19.8028L15.369 10.8028C15.5384 10.464 15.8846 10.25 16.2634 10.25ZM16.2634 13.4861L17.6454 16.25H14.8814L16.2634 13.4861Z\" fill=\"#192839\"/>\n</svg>\n"
   }
-]
+]

packages/blade/CHANGELOG.md

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChatMessageProps } from './types';
+import { Text } from '~components/Typography';
+import { throwBladeError } from '~utils/logger';
+
+const ChatMessage = (_prop: ChatMessageProps): React.ReactElement => {
+  throwBladeError({
+    message: 'ChatMessage is not yet implemented for native',
+    moduleName: 'ChatMessage',
+  });
+
+  return <Text>ChatMessage is not available for Native mobile apps.</Text>;
+};
+
+export { ChatMessage };

packages/blade/package.json

@@ -0,0 +1,102 @@
+import React from 'react';
+import { SelfMessageBubble } from './SelfMessageBubble.web';
+import { DefaultMessageBubble } from './DefaultMessageBubble.web';
+import type { ChatMessageProps } from './types';
+import { Text } from '~components/Typography';
+import BaseBox from '~components/Box/BaseBox';
+import { getStringFromReactText } from '~utils/getStringChildren';
+import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+import type { BladeElementRef } from '~utils/types';
+import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
+import { getStyledProps } from '~components/Box/styledProps';
+
+const ButtonResetCss = {
+  background: 'none',
+  border: 'none',
+  padding: undefined,
+  cursor: 'pointer',
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'left' as const,
+  outline: 'inherit',
+  appearance: 'none',
+  backgroundColor: 'inherit',
+};
+
+const _ChatMessage: React.ForwardRefRenderFunction<BladeElementRef, ChatMessageProps> = (
+  {
+    messageType = 'default',
+    senderType = 'self',
+    isLoading = false,
+    validationState = 'none',
+    errorText,
+    onClick,
+    footerActions,
+    children,
+    leading,
+    loadingText,
+    wordBreak = 'break-word',
+    maxWidth,
+    ...props
+  }: ChatMessageProps,
+  ref: React.Ref<BladeElementRef>,
+): React.ReactElement => {
+  // since we can pass both string and Card component as children, we need to check if children is string or Card component
+  // if children is string or array of string, we need to wrap it in Text component otherwise we will pass children as it is
+  const shouldWrapInText =
+    typeof children === 'string' ||
+    (Array.isArray(children) && children.every((child) => typeof child === 'string')) ||
+    isLoading;
+
+  const finalChildren = shouldWrapInText ? (
+    <Text
+      color={isLoading ? 'surface.text.gray.muted' : 'surface.text.gray.normal'}
+      weight="regular"
+      variant="body"
+      size="medium"
+      wordBreak={wordBreak}
+    >
+      {isLoading ? loadingText : getStringFromReactText(children as string | string[])}
+    </Text>
+  ) : (
+    (children as React.ReactElement)
+  );
+
+  return (
+    <BaseBox
+      onClick={onClick}
+      {...(onClick ? { ...ButtonResetCss } : {})}
+      {...metaAttribute({ name: MetaConstants.ChatMessage, testID: props.testID })}
+      {...makeAnalyticsAttribute(props)}
+      {...getStyledProps(props)}
+      maxWidth={maxWidth}
+      ref={ref as never}
+      as={onClick ? 'button' : undefined}
+    >
+      {senderType === 'self' ? (
+        <SelfMessageBubble
+          validationState={validationState}
+          errorText={errorText}
+          children={finalChildren}
+          messageType={messageType}
+          isChildText={shouldWrapInText}
+        />
+      ) : (
+        <DefaultMessageBubble
+          children={finalChildren}
+          leading={leading}
+          isLoading={isLoading}
+          footerActions={footerActions}
+          isChildText={shouldWrapInText}
+        />
+      )}
+    </BaseBox>
+  );
+};
+
+const ChatMessage = assignWithoutSideEffects(React.forwardRef(_ChatMessage), {
+  displayName: 'ChatMessage',
+  componentId: MetaConstants.ChatMessage,
+});
+export { ChatMessage };

packages/blade/scripts/icons.json

@@ -0,0 +1,41 @@
+import React from 'react';
+import Rotate from './Rotate.web';
+import type { CommonChatMessageProps } from './types';
+import BaseBox from '~components/Box/BaseBox';
+
+const DefaultMessageBubble = ({
+  children,
+  leading,
+  isLoading,
+  footerActions,
+  isChildText,
+}: Pick<CommonChatMessageProps, 'children' | 'leading' | 'isLoading' | 'footerActions'> & {
+  isChildText: boolean;
+}): React.ReactElement => {
+  return (
+    <BaseBox>
+      <BaseBox
+        display="grid"
+        gridTemplateColumns="auto 1fr"
+        gridTemplateRows="auto auto"
+        columnGap="spacing.4"
+      >
+        <BaseBox padding="spacing.2">
+          <Rotate animate={isLoading}>{leading as React.ReactElement}</Rotate>
+        </BaseBox>
+
+        <BaseBox
+          display="flex"
+          alignItems="center"
+          paddingY={isChildText ? 'spacing.2' : 'spacing.0'}
+        >
+          {children}
+        </BaseBox>
+
+        <BaseBox gridColumn="2">{footerActions}</BaseBox>
+      </BaseBox>
+    </BaseBox>
+  );
+};
+
+export { DefaultMessageBubble };

packages/blade/src/components/ChatMessage/ChatMessage.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { m } from 'framer-motion';
+import { castWebType } from '~utils';
+import { useTheme } from '~components/BladeProvider';
+import { msToSeconds } from '~utils/msToSeconds';
+import { cssBezierToArray } from '~utils/cssBezierToArray';
+
+const Rotate = ({
+  children,
+  animate,
+}: {
+  children: React.ReactElement;
+  animate?: boolean;
+}): React.ReactElement => {
+  const { theme } = useTheme();
+
+  if (!animate) {
+    return children;
+  }
+
+  return (
+    <m.div
+      style={{
+        display: 'flex',
+      }}
+      animate={{ rotate: 90 }}
+      transition={{
+        duration: msToSeconds(theme.motion.duration.gentle),
+        repeat: Infinity,
+        ease: cssBezierToArray(castWebType(theme.motion.easing.emphasized)),
+        delay: msToSeconds(theme.motion.delay.gentle),
+      }}
+    >
+      {children}
+    </m.div>
+  );
+};
+
+export default Rotate;

packages/blade/src/components/ChatMessage/ChatMessage.web.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { CommonChatMessageProps } from './types';
+import { chatMessageToken } from './token';
+import BaseBox from '~components/Box/BaseBox';
+import { FormHint } from '~components/Form/FormHint';
+
+const SelfMessageBubble = ({
+  children,
+  validationState,
+  errorText = 'Message not sent. Tap to retry.',
+  messageType,
+  isChildText,
+}: Pick<CommonChatMessageProps, 'children' | 'validationState' | 'errorText' | 'messageType'> & {
+  // is child is text then only add padding otherwise no need to add padding
+  isChildText: boolean;
+}): React.ReactElement => {
+  const isError = validationState === 'error';
+  return (
+    <BaseBox display="flex" flexDirection="column">
+      <BaseBox
+        backgroundColor={
+          isError
+            ? chatMessageToken.self.backgroundColor.error
+            : chatMessageToken.self.backgroundColor.default
+        }
+        padding={isChildText ? 'spacing.4' : 'spacing.0'}
+        borderTopLeftRadius={chatMessageToken.self.borderTopLeftRadius}
+        borderTopRightRadius={chatMessageToken.self.borderTopRightRadius}
+        borderBottomLeftRadius={chatMessageToken.self.borderBottomLeftRadius}
+        borderBottomRightRadius={
+          messageType === 'last'
+            ? chatMessageToken.self.borderBottomRightRadiusForLastMessage
+            : chatMessageToken.self.borderBottomRightRadius
+        }
+        width="fit-content"
+        height="auto"
+        alignSelf="flex-end"
+      >
+        {children}
+      </BaseBox>
+      <BaseBox alignSelf="flex-end">
+        {isError && <FormHint type="error" errorText={errorText} size="small" />}
+      </BaseBox>
+    </BaseBox>
+  );
+};
+
+export { SelfMessageBubble };