Merge branch 'main' into feature/1262

lerna.json

@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
-  "version": "1.30.0",
+  "version": "1.30.1",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/example-react/package.json

@@ -1,15 +1,15 @@
 {
   "name": "example-react",
   "private": true,
-  "version": "1.30.0",
+  "version": "1.30.1",
   "scripts": {
     "start": "vite --open",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@livechat/design-system-icons": "^1.30.0",
-    "@livechat/design-system-react-components": "^1.30.0",
+    "@livechat/design-system-icons": "^1.30.1",
+    "@livechat/design-system-react-components": "^1.30.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-icons",
-  "version": "1.30.0",
+  "version": "1.30.1",
   "description": "",
   "publishConfig": {
     "access": "public"

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "1.30.0",
+  "version": "1.30.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -72,7 +72,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@livechat/data-utils": "^0.2.16",
-    "@livechat/design-system-icons": "^1.30.0",
+    "@livechat/design-system-icons": "^1.30.1",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
     "lodash.debounce": "^4.0.8",

packages/react-components/src/components/DetailsCard/DetailsCard.module.scss

@@ -38,6 +38,10 @@ $min-card-height: 72px;
     overflow: hidden;
     color: var(--content-basic-primary);
 
+    &:hover {
+      cursor: pointer;
+    }
+
     &--hide {
       transition:
         opacity var(--transition-duration-fast-1) ease-out,

packages/react-components/src/components/DetailsCard/DetailsCard.spec.tsx

@@ -65,7 +65,7 @@ describe('<DetailsCard> component', () => {
     expect(label).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('should call onClick handler on label click', () => {
+  it('should call onClick handler on label button click', () => {
     const handler = vi.fn();
     const { getByRole } = renderComponent({
       ...defaultProps,
@@ -87,4 +87,21 @@ describe('<DetailsCard> component', () => {
     expect(getByText('Left node')).toBeInTheDocument();
     expect(getByText('Right node')).toBeInTheDocument();
   });
+
+  it('should not call onClick handler if external interactive element is clicked', () => {
+    const handler = vi.fn();
+    const { getByRole, getByText } = renderComponent({
+      ...defaultProps,
+      onClick: handler,
+      leftNode: <input />,
+      rightNode: <span>text</span>,
+    });
+    const input = getByRole('textbox');
+    const text = getByText('text');
+
+    userEvent.click(input);
+    expect(handler).toHaveBeenCalledTimes(0);
+    userEvent.click(text);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
 });

packages/react-components/src/components/DetailsCard/DetailsCard.tsx

@@ -45,10 +45,13 @@ export interface IDetailsCardProps {
   /**
    * Callback function called when the card label is clicked
    */
-  onClick?: () => void;
+  onClick?: (
+    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>
+  ) => void;
 }
 
 const baseClass = 'details-card';
+const NON_INTERACTIVE_TAGS = ['input', 'button', 'select', 'textarea', 'a'];
 
 export const DetailsCard: React.FC<IDetailsCardProps> = ({
   children,
@@ -78,7 +81,19 @@ export const DetailsCard: React.FC<IDetailsCardProps> = ({
   ) => {
     setIsOpen((prevValue) => !prevValue);
     e.currentTarget.blur();
-    onClick?.();
+    onClick?.(e);
+  };
+
+  const handleLabelClick = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    const target = e.target as HTMLElement;
+    const targetTagName = target.tagName.toLowerCase();
+
+    if (!NON_INTERACTIVE_TAGS.includes(targetTagName)) {
+      setIsOpen((prevValue) => !prevValue);
+      onClick?.(e);
+    }
   };
 
   React.useEffect(() => {
@@ -109,6 +124,7 @@ export const DetailsCard: React.FC<IDetailsCardProps> = ({
         aria-expanded={isOpen}
         aria-hidden={isLabelHidden}
         data-testid="details-card-label"
+        onClick={handleLabelClick}
       >
         <div
           className={cx(

packages/react-components/src/components/Icon/IconsShowcase/constans.ts

@@ -36,6 +36,7 @@ export const IconsData: Record<IconName, IconGroup> = {
   ArrowBarToLeft: IconGroup.Arrows,
   ArrowBarToRight: IconGroup.Arrows,
   ArrowsShuffle: IconGroup.Arrows,
+  ArrowsSort: IconGroup.Arrows,
 
   //FileType
   FiletypeExe: IconGroup.FileType,
@@ -480,6 +481,7 @@ export const IconsData: Record<IconName, IconGroup> = {
   OpenWidgetMono: IconGroup.Brands,
   OperaColored: IconGroup.Brands,
   OutlookColored: IconGroup.Brands,
+  PlatformColored: IconGroup.Brands,
   SafariColored: IconGroup.Brands,
   ShopifyColored: IconGroup.Brands,
   ShoppingCartFilled: IconGroup.Brands,

packages/react-components/src/components/Picker/components/PickerTrigger.tsx

@@ -67,6 +67,10 @@ export const PickerTrigger: React.FC<
     onClear();
   };
 
+  React.useEffect(() => {
+    if (!isOpen) setTriggerFocus(false);
+  }, [isOpen]);
+
   return (
     <button
       tabIndex={isDisabled ? -1 : 0}