@snack-uikit/accordion 0.7.2-preview-d74371e8.0 → 0.7.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.7.2 (2024-05-23)
+
+
+### Bug Fixes
+
+* **FF-0000:** optimize render children non expanded collapse block ([2b67700](https://github.com/cloud-ru-tech/snack-uikit/commit/2b677004e3d04cce8ab972011962a7fa2b0cda52))
+* **FF-0000:** stopPropagation on actions click in CollapseBlock.Header ([157241c](https://github.com/cloud-ru-tech/snack-uikit/commit/157241c718646ae14763f733df914eb8ad4cf9f2))
+
+
+
+
+
 ## 0.7.1 (2024-05-08)
 
 ### Only dependencies have been changed

package/dist/components/CollapseBlockPrimary/CollapseBlockPrimary.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
+import { useExpanded } from '../../hooks';
 import styles from './styles.module.css';
 export function CollapseBlockPrimary(_a) {
     var { id, header, children, actions, className, outline, shape = 'round' } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline", "shape"]);
-    const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
-    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.containerBase, { [styles.container]: !outline, [styles.containerOutline]: outline }, className), shape: shape, header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleExpandedChange, actions: actions, children: header }), expanded: isExpanded }, extractSupportProps(rest), { children: children })));
+    const { isExpanded, isExpandedDebounced, handleToggleExpanded } = useExpanded(id);
+    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.containerBase, { [styles.container]: !outline, [styles.containerOutline]: outline }, className), shape: shape, header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleToggleExpanded, actions: actions, children: header }), expanded: isExpanded, expandedDebounced: isExpandedDebounced }, extractSupportProps(rest), { children: children })));
 }

package/dist/components/CollapseBlockSecondary/CollapseBlockSecondary.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
+import { useExpanded } from '../../hooks';
 import styles from './styles.module.css';
 export function CollapseBlockSecondary(_a) {
     var { header, children, id, actions, className } = _a, rest = __rest(_a, ["header", "children", "id", "actions", "className"]);
-    const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
-    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleExpandedChange, actions: actions, children: header }), expanded: isExpanded }, extractSupportProps(rest), { children: children })));
+    const { isExpanded, isExpandedDebounced, handleToggleExpanded } = useExpanded(id);
+    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleToggleExpanded, actions: actions, children: header }), expanded: isExpanded, expandedDebounced: isExpandedDebounced }, extractSupportProps(rest), { children: children })));
 }

package/dist/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export type CollapseBlockHeaderContainerProps = {
     children: ReactNode;
-    toggleExpanded(): void;
+    toggleExpanded(expanded: boolean): void;
     expanded: boolean;
     actions?: ReactNode;
 };

package/dist/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.js

@@ -4,6 +4,7 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronDownSVG } from '@snack-uikit/icons';
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
+import { stopPropagationClick } from './utils';
 export function CollapseBlockHeaderContainer({ children, toggleExpanded, expanded, actions, }) {
     const functionLayoutRef = useRef(null);
     const [width, setWidth] = useState('0px');
@@ -15,7 +16,8 @@ export function CollapseBlockHeaderContainer({ children, toggleExpanded, expande
             return '0px';
         });
     }, [functionLayoutRef]);
+    const handleToggleExpanded = () => toggleExpanded(!expanded);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.header, onClick: toggleExpanded, children: [_jsx("div", { className: styles.text, style: { '--width': width }, children: children }), _jsxs("div", { className: styles.functionLayout, ref: functionLayoutRef, children: [actions, _jsx(ButtonFunction, { className: styles.button, "data-expanded": expanded || undefined, icon: _jsx(ChevronDownSVG, {}), size: 'xs', "data-test-id": TEST_IDS.chevron })] })] }));
+    _jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.header, onClick: handleToggleExpanded, children: [_jsx("div", { className: styles.text, style: { '--width': width }, children: children }), _jsxs("div", { className: styles.functionLayout, ref: functionLayoutRef, onClick: stopPropagationClick, children: [actions, _jsx(ButtonFunction, { className: styles.button, "data-expanded": expanded || undefined, icon: _jsx(ChevronDownSVG, {}), onClick: handleToggleExpanded, size: 'xs', "data-test-id": TEST_IDS.chevron })] })] }));
 }

package/dist/helperComponents/CollapseBlockHeaderContainer/utils.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent } from 'react';
+export declare const stopPropagationClick: (e: MouseEvent<HTMLDivElement>) => void;

package/dist/helperComponents/CollapseBlockHeaderContainer/utils.js

@@ -0,0 +1,3 @@
+export const stopPropagationClick = (e) => {
+    e.stopPropagation();
+};

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts

@@ -4,7 +4,8 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
     children: ReactNode;
     header: ReactNode;
     expanded: boolean;
+    expandedDebounced: boolean;
     className?: string;
     shape?: 'round' | 'square';
 }>;
-export declare function CollapseBlockPrivate({ children, expanded, className, header, shape, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockPrivate({ children, expanded, className, header, shape, expandedDebounced, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js

@@ -15,8 +15,8 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
 export function CollapseBlockPrivate(_a) {
-    var { children, expanded, className, header, shape } = _a, rest = __rest(_a, ["children", "expanded", "className", "header", "shape"]);
+    var { children, expanded, className, header, shape, expandedDebounced } = _a, rest = __rest(_a, ["children", "expanded", "className", "header", "shape", "expandedDebounced"]);
     return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className), 
         // eslint-disable-next-line jsx-a11y/aria-role
-        role: 'accordion', "data-shape": shape, "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, "data-test-id": TEST_IDS.content, children: _jsx("div", { className: styles.content, "data-content": true, children: children }) })] })));
+        role: 'accordion', "data-shape": shape, "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, "data-test-id": TEST_IDS.content, children: _jsx("div", { className: styles.content, "data-content": true, children: (expanded || expandedDebounced) && children }) })] })));
 }

package/dist/hooks.d.ts

@@ -0,0 +1,5 @@
+export declare function useExpanded(id: string): {
+    isExpanded: boolean;
+    isExpandedDebounced: boolean;
+    handleToggleExpanded: (expanded: boolean) => void;
+};

package/dist/hooks.js

@@ -0,0 +1,13 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useMemo, useState } from 'react';
+import { useToggleGroup } from '@snack-uikit/toggles';
+export function useExpanded(id) {
+    const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
+    const [isExpandedDebounced, setIsExpandedDebounced] = useState(isExpanded);
+    const debouncedSetIsExpandedDebounced = useMemo(() => debounce(setIsExpandedDebounced, 300), []);
+    const handleToggleExpanded = useCallback((expanded) => {
+        handleExpandedChange();
+        debouncedSetIsExpandedDebounced(expanded);
+    }, [debouncedSetIsExpandedDebounced, handleExpandedChange]);
+    return { isExpanded, isExpandedDebounced, handleToggleExpanded };
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Accordion",
-  "version": "0.7.2-preview-d74371e8.0",
+  "version": "0.7.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,10 +36,14 @@
     "@snack-uikit/icons": "0.21.0",
     "@snack-uikit/toggles": "0.9.9",
     "@snack-uikit/tooltip": "0.13.3",
-    "@snack-uikit/truncate-string": "0.4.15-preview-d74371e8.0",
+    "@snack-uikit/truncate-string": "0.4.15",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
-    "classnames": "2.3.2"
+    "classnames": "2.3.2",
+    "lodash.debounce": "4.0.8"
   },
-  "gitHead": "126a04bf797d30c47577b4b47a6447aa43fddb4d"
+  "devDependencies": {
+    "@types/lodash.debounce": "4.0.8"
+  },
+  "gitHead": "4ed0075faec0375fee125764be942849a20100a4"
 }

package/src/components/CollapseBlockPrimary/CollapseBlockPrimary.tsx

@@ -1,9 +1,9 @@
 import cn from 'classnames';
 
-import { useToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
+import { useExpanded } from '../../hooks';
 import { CollapseBlockPrimaryProps } from '../../types';
 import styles from './styles.module.scss';
 
@@ -17,7 +17,7 @@ export function CollapseBlockPrimary({
   shape = 'round',
   ...rest
 }: CollapseBlockPrimaryProps) {
-  const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
+  const { isExpanded, isExpandedDebounced, handleToggleExpanded } = useExpanded(id);
 
   return (
     <CollapseBlockPrivate
@@ -28,11 +28,12 @@ export function CollapseBlockPrimary({
       )}
       shape={shape}
       header={
-        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleExpandedChange} actions={actions}>
+        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleToggleExpanded} actions={actions}>
           {header}
         </CollapseBlockHeaderContainer>
       }
       expanded={isExpanded}
+      expandedDebounced={isExpandedDebounced}
       {...extractSupportProps(rest)}
     >
       {children}

package/src/components/CollapseBlockSecondary/CollapseBlockSecondary.tsx

@@ -1,9 +1,9 @@
 import cn from 'classnames';
 
-import { useToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
+import { useExpanded } from '../../hooks';
 import { CollapseBlockSecondaryProps } from '../../types';
 import styles from './styles.module.scss';
 
@@ -15,17 +15,18 @@ export function CollapseBlockSecondary({
   className,
   ...rest
 }: CollapseBlockSecondaryProps) {
-  const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
+  const { isExpanded, isExpandedDebounced, handleToggleExpanded } = useExpanded(id);
 
   return (
     <CollapseBlockPrivate
       className={cn(styles.container, className)}
       header={
-        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleExpandedChange} actions={actions}>
+        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleToggleExpanded} actions={actions}>
           {header}
         </CollapseBlockHeaderContainer>
       }
       expanded={isExpanded}
+      expandedDebounced={isExpandedDebounced}
       {...extractSupportProps(rest)}
     >
       {children}

package/src/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.tsx

@@ -5,10 +5,11 @@ import { ChevronDownSVG } from '@snack-uikit/icons';
 
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.scss';
+import { stopPropagationClick } from './utils';
 
 export type CollapseBlockHeaderContainerProps = {
   children: ReactNode;
-  toggleExpanded(): void;
+  toggleExpanded(expanded: boolean): void;
   expanded: boolean;
   actions?: ReactNode;
 };
@@ -33,20 +34,23 @@ export function CollapseBlockHeaderContainer({
     });
   }, [functionLayoutRef]);
 
+  const handleToggleExpanded = () => toggleExpanded(!expanded);
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div className={styles.header} data-test-id={TEST_IDS.header} onClick={toggleExpanded}>
+    <div className={styles.header} data-test-id={TEST_IDS.header} onClick={handleToggleExpanded}>
       <div className={styles.text} style={{ '--width': width }}>
         {children}
       </div>
-
-      <div className={styles.functionLayout} ref={functionLayoutRef}>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div className={styles.functionLayout} ref={functionLayoutRef} onClick={stopPropagationClick}>
         {actions}
 
         <ButtonFunction
           className={styles.button}
           data-expanded={expanded || undefined}
           icon={<ChevronDownSVG />}
+          onClick={handleToggleExpanded}
           size='xs'
           data-test-id={TEST_IDS.chevron}
         />

package/src/helperComponents/CollapseBlockHeaderContainer/utils.ts

@@ -0,0 +1,5 @@
+import { MouseEvent } from 'react';
+
+export const stopPropagationClick = (e: MouseEvent<HTMLDivElement>) => {
+  e.stopPropagation();
+};

package/src/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.tsx

@@ -10,6 +10,7 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
   children: ReactNode;
   header: ReactNode;
   expanded: boolean;
+  expandedDebounced: boolean;
   className?: string;
   shape?: 'round' | 'square';
 }>;
@@ -20,6 +21,7 @@ export function CollapseBlockPrivate({
   className,
   header,
   shape,
+  expandedDebounced,
   ...rest
 }: CollapseBlockPrivateProps) {
   return (
@@ -28,7 +30,6 @@ export function CollapseBlockPrivate({
       // eslint-disable-next-line jsx-a11y/aria-role
       role='accordion'
       data-shape={shape}
-      // data-outline={outline || undefined}
       aria-expanded={expanded}
       {...extractSupportProps(rest)}
     >
@@ -36,7 +37,7 @@ export function CollapseBlockPrivate({
 
       <div className={styles.contentWrapper} aria-hidden={!expanded} data-test-id={TEST_IDS.content}>
         <div className={styles.content} data-content>
-          {children}
+          {(expanded || expandedDebounced) && children}
         </div>
       </div>
     </div>

package/src/hooks.ts

@@ -0,0 +1,21 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useMemo, useState } from 'react';
+
+import { useToggleGroup } from '@snack-uikit/toggles';
+
+export function useExpanded(id: string) {
+  const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
+  const [isExpandedDebounced, setIsExpandedDebounced] = useState<boolean>(isExpanded);
+
+  const debouncedSetIsExpandedDebounced = useMemo(() => debounce(setIsExpandedDebounced, 300), []);
+
+  const handleToggleExpanded = useCallback(
+    (expanded: boolean) => {
+      handleExpandedChange();
+      debouncedSetIsExpandedDebounced(expanded);
+    },
+    [debouncedSetIsExpandedDebounced, handleExpandedChange],
+  );
+
+  return { isExpanded, isExpandedDebounced, handleToggleExpanded };
+}