@snack-uikit/accordion 0.7.1 → 0.7.2-preview-529bd544.0

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/components/CollapseBlockSecondary/styles.module.css

@@ -4,7 +4,7 @@
   padding-left:var(--space-accordion-collapse-block-secondary-horizontal-padding, 16px);
   padding-right:var(--space-accordion-collapse-block-secondary-horizontal-padding, 16px);
   gap:var(--space-accordion-collapse-block-secondary-gap, 16px);
-  border-bottom-width:var(--border-width-general-xs, 1px);
+  border-bottom-width:var(--border-width-accordion-collapse-block-secondary, 1px);
   box-sizing:border-box;
   max-width:100%;
   border-color:var(--sys-neutral-decor-default, #dfe2ec);

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

@@ -17,5 +17,5 @@ export function CollapseBlockHeaderContainer({ children, toggleExpanded, expande
     }, [functionLayoutRef]);
     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: () => toggleExpanded(!expanded), 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 })] })] }));
 }

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.1",
+  "version": "0.7.2-preview-529bd544.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,7 +39,11 @@
     "@snack-uikit/truncate-string": "0.4.14",
     "@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": "59bd2ac46a341357d543ada864a34e09745b3e42"
+  "devDependencies": {
+    "@types/lodash.debounce": "4.0.8"
+  },
+  "gitHead": "47ac11742202c7ebd27e9c001d2e9bf9783f1632"
 }

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

@@ -8,7 +8,7 @@ import styles from './styles.module.scss';
 
 export type CollapseBlockHeaderContainerProps = {
   children: ReactNode;
-  toggleExpanded(): void;
+  toggleExpanded(expanded: boolean): void;
   expanded: boolean;
   actions?: ReactNode;
 };
@@ -35,7 +35,7 @@ export function CollapseBlockHeaderContainer({
 
   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={() => toggleExpanded(!expanded)}>
       <div className={styles.text} style={{ '--width': width }}>
         {children}
       </div>

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 (
@@ -36,7 +38,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 };
+}