@snack-uikit/accordion 0.10.15 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.11.0 (2025-03-25)
+
+
+### Features
+
+* **PDS-1983:** add accordion CollapseBlock onClick ([fff6b98](https://github.com/cloud-ru-tech/snack-uikit/commit/fff6b9859b07ad4deb8dcb07fd99b7ab7c1bd37e))
+
+
+
+
+
 ## 0.10.15 (2025-03-19)
 
 ### Only dependencies have been changed

package/dist/cjs/components/CollapseBlockPrimary/CollapseBlockPrimary.d.ts

@@ -1,2 +1,2 @@
 import { CollapseBlockPrimaryProps } from '../../types';
-export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, shape, removeContentFromDOM, ...rest }: CollapseBlockPrimaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, shape, removeContentFromDOM, onClick, ...rest }: CollapseBlockPrimaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CollapseBlockPrimary/CollapseBlockPrimary.js

@@ -32,9 +32,10 @@ function CollapseBlockPrimary(_a) {
       className,
       outline,
       shape = 'round',
-      removeContentFromDOM
+      removeContentFromDOM,
+      onClick
     } = _a,
-    rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline", "shape", "removeContentFromDOM"]);
+    rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline", "shape", "removeContentFromDOM", "onClick"]);
   const {
     isExpanded,
     isExpandedDebounced,
@@ -47,6 +48,8 @@ function CollapseBlockPrimary(_a) {
     }, className),
     shape: shape,
     header: (0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockHeaderContainer, {
+      id: id,
+      onClick: onClick,
       expanded: isExpanded,
       toggleExpanded: handleToggleExpanded,
       actions: actions,

package/dist/cjs/components/CollapseBlockSecondary/CollapseBlockSecondary.d.ts

@@ -1,2 +1,2 @@
 import { CollapseBlockSecondaryProps } from '../../types';
-export declare function CollapseBlockSecondary({ header, children, id, actions, className, removeContentFromDOM, ...rest }: CollapseBlockSecondaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockSecondary({ header, children, id, actions, className, removeContentFromDOM, onClick, ...rest }: CollapseBlockSecondaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CollapseBlockSecondary/CollapseBlockSecondary.js

@@ -30,9 +30,10 @@ function CollapseBlockSecondary(_a) {
       id,
       actions,
       className,
-      removeContentFromDOM
+      removeContentFromDOM,
+      onClick
     } = _a,
-    rest = __rest(_a, ["header", "children", "id", "actions", "className", "removeContentFromDOM"]);
+    rest = __rest(_a, ["header", "children", "id", "actions", "className", "removeContentFromDOM", "onClick"]);
   const {
     isExpanded,
     isExpandedDebounced,
@@ -41,6 +42,8 @@ function CollapseBlockSecondary(_a) {
   return (0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockPrivate, Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.container, className),
     header: (0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockHeaderContainer, {
+      id: id,
+      onClick: onClick,
       expanded: isExpanded,
       toggleExpanded: handleToggleExpanded,
       actions: actions,

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

@@ -4,5 +4,7 @@ export type CollapseBlockHeaderContainerProps = {
     toggleExpanded(expanded: boolean): void;
     expanded: boolean;
     actions?: ReactNode;
+    id: string;
+    onClick?(id: string, expanded: boolean): void;
 };
-export declare function CollapseBlockHeaderContainer({ children, toggleExpanded, expanded, actions, }: CollapseBlockHeaderContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockHeaderContainer({ id, children, toggleExpanded, expanded, actions, onClick, }: CollapseBlockHeaderContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.js

@@ -18,10 +18,12 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 function CollapseBlockHeaderContainer(_ref) {
   let {
+    id,
     children,
     toggleExpanded,
     expanded,
-    actions
+    actions,
+    onClick
   } = _ref;
   const functionLayoutRef = (0, react_1.useRef)(null);
   const [width, setWidth] = (0, react_1.useState)('0px');
@@ -33,7 +35,11 @@ function CollapseBlockHeaderContainer(_ref) {
       return '0px';
     });
   }, [functionLayoutRef]);
-  const handleToggleExpanded = () => toggleExpanded(!expanded);
+  const handleToggleExpanded = () => {
+    const newState = !expanded;
+    toggleExpanded(newState);
+    onClick === null || onClick === void 0 ? void 0 : onClick(id, newState);
+  };
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, jsx_runtime_1.jsxs)("div", {

package/dist/cjs/types.d.ts

@@ -14,6 +14,8 @@ export type CollapseBlockSecondaryProps = WithSupportProps<{
     className?: string;
     /** Проп отвечающий будет ли контент удаляться из DOM дерева */
     removeContentFromDOM?: boolean;
+    /** Обработчик клика по хедеру CollapseBlock */
+    onClick?(id: string, expanded: boolean): void;
 }>;
 export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {
     /** Внешний бордер  */

package/dist/esm/components/CollapseBlockPrimary/CollapseBlockPrimary.d.ts

@@ -1,2 +1,2 @@
 import { CollapseBlockPrimaryProps } from '../../types';
-export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, shape, removeContentFromDOM, ...rest }: CollapseBlockPrimaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, shape, removeContentFromDOM, onClick, ...rest }: CollapseBlockPrimaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CollapseBlockPrimary/CollapseBlockPrimary.js

@@ -16,7 +16,7 @@ import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helper
 import { useExpanded } from '../../hooks';
 import styles from './styles.module.css';
 export function CollapseBlockPrimary(_a) {
-    var { id, header, children, actions, className, outline, shape = 'round', removeContentFromDOM } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline", "shape", "removeContentFromDOM"]);
+    var { id, header, children, actions, className, outline, shape = 'round', removeContentFromDOM, onClick } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline", "shape", "removeContentFromDOM", "onClick"]);
     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, removeContentFromDOM: removeContentFromDOM }, extractSupportProps(rest), { children: children })));
+    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.containerBase, { [styles.container]: !outline, [styles.containerOutline]: outline }, className), shape: shape, header: _jsx(CollapseBlockHeaderContainer, { id: id, onClick: onClick, expanded: isExpanded, toggleExpanded: handleToggleExpanded, actions: actions, children: header }), expanded: isExpanded, expandedDebounced: isExpandedDebounced, removeContentFromDOM: removeContentFromDOM }, extractSupportProps(rest), { children: children })));
 }

package/dist/esm/components/CollapseBlockSecondary/CollapseBlockSecondary.d.ts

@@ -1,2 +1,2 @@
 import { CollapseBlockSecondaryProps } from '../../types';
-export declare function CollapseBlockSecondary({ header, children, id, actions, className, removeContentFromDOM, ...rest }: CollapseBlockSecondaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockSecondary({ header, children, id, actions, className, removeContentFromDOM, onClick, ...rest }: CollapseBlockSecondaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CollapseBlockSecondary/CollapseBlockSecondary.js

@@ -16,7 +16,7 @@ import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helper
 import { useExpanded } from '../../hooks';
 import styles from './styles.module.css';
 export function CollapseBlockSecondary(_a) {
-    var { header, children, id, actions, className, removeContentFromDOM } = _a, rest = __rest(_a, ["header", "children", "id", "actions", "className", "removeContentFromDOM"]);
+    var { header, children, id, actions, className, removeContentFromDOM, onClick } = _a, rest = __rest(_a, ["header", "children", "id", "actions", "className", "removeContentFromDOM", "onClick"]);
     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, removeContentFromDOM: removeContentFromDOM }, extractSupportProps(rest), { children: children })));
+    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer, { id: id, onClick: onClick, expanded: isExpanded, toggleExpanded: handleToggleExpanded, actions: actions, children: header }), expanded: isExpanded, expandedDebounced: isExpandedDebounced, removeContentFromDOM: removeContentFromDOM }, extractSupportProps(rest), { children: children })));
 }

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

@@ -4,5 +4,7 @@ export type CollapseBlockHeaderContainerProps = {
     toggleExpanded(expanded: boolean): void;
     expanded: boolean;
     actions?: ReactNode;
+    id: string;
+    onClick?(id: string, expanded: boolean): void;
 };
-export declare function CollapseBlockHeaderContainer({ children, toggleExpanded, expanded, actions, }: CollapseBlockHeaderContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockHeaderContainer({ id, children, toggleExpanded, expanded, actions, onClick, }: CollapseBlockHeaderContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.js

@@ -5,7 +5,7 @@ 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, }) {
+export function CollapseBlockHeaderContainer({ id, children, toggleExpanded, expanded, actions, onClick, }) {
     const functionLayoutRef = useRef(null);
     const [width, setWidth] = useState('0px');
     useEffect(() => {
@@ -16,7 +16,11 @@ export function CollapseBlockHeaderContainer({ children, toggleExpanded, expande
             return '0px';
         });
     }, [functionLayoutRef]);
-    const handleToggleExpanded = () => toggleExpanded(!expanded);
+    const handleToggleExpanded = () => {
+        const newState = !expanded;
+        toggleExpanded(newState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(id, newState);
+    };
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _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/esm/types.d.ts

@@ -14,6 +14,8 @@ export type CollapseBlockSecondaryProps = WithSupportProps<{
     className?: string;
     /** Проп отвечающий будет ли контент удаляться из DOM дерева */
     removeContentFromDOM?: boolean;
+    /** Обработчик клика по хедеру CollapseBlock */
+    onClick?(id: string, expanded: boolean): void;
 }>;
 export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {
     /** Внешний бордер  */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Accordion",
-  "version": "0.10.15",
+  "version": "0.11.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -49,5 +49,5 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.8"
   },
-  "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
+  "gitHead": "fd5d0d2178960964555fed3d643c99eaa6686e04"
 }

package/src/components/CollapseBlockPrimary/CollapseBlockPrimary.tsx

@@ -16,6 +16,7 @@ export function CollapseBlockPrimary({
   outline,
   shape = 'round',
   removeContentFromDOM,
+  onClick,
   ...rest
 }: CollapseBlockPrimaryProps) {
   const { isExpanded, isExpandedDebounced, handleToggleExpanded } = useExpanded(id);
@@ -29,7 +30,13 @@ export function CollapseBlockPrimary({
       )}
       shape={shape}
       header={
-        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleToggleExpanded} actions={actions}>
+        <CollapseBlockHeaderContainer
+          id={id}
+          onClick={onClick}
+          expanded={isExpanded}
+          toggleExpanded={handleToggleExpanded}
+          actions={actions}
+        >
           {header}
         </CollapseBlockHeaderContainer>
       }

package/src/components/CollapseBlockSecondary/CollapseBlockSecondary.tsx

@@ -14,6 +14,7 @@ export function CollapseBlockSecondary({
   actions,
   className,
   removeContentFromDOM,
+  onClick,
   ...rest
 }: CollapseBlockSecondaryProps) {
   const { isExpanded, isExpandedDebounced, handleToggleExpanded } = useExpanded(id);
@@ -22,7 +23,13 @@ export function CollapseBlockSecondary({
     <CollapseBlockPrivate
       className={cn(styles.container, className)}
       header={
-        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleToggleExpanded} actions={actions}>
+        <CollapseBlockHeaderContainer
+          id={id}
+          onClick={onClick}
+          expanded={isExpanded}
+          toggleExpanded={handleToggleExpanded}
+          actions={actions}
+        >
           {header}
         </CollapseBlockHeaderContainer>
       }

package/src/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.tsx

@@ -12,13 +12,17 @@ export type CollapseBlockHeaderContainerProps = {
   toggleExpanded(expanded: boolean): void;
   expanded: boolean;
   actions?: ReactNode;
+  id: string;
+  onClick?(id: string, expanded: boolean): void;
 };
 
 export function CollapseBlockHeaderContainer({
+  id,
   children,
   toggleExpanded,
   expanded,
   actions,
+  onClick,
 }: CollapseBlockHeaderContainerProps) {
   const functionLayoutRef = useRef<HTMLDivElement>(null);
 
@@ -34,7 +38,11 @@ export function CollapseBlockHeaderContainer({
     });
   }, [functionLayoutRef]);
 
-  const handleToggleExpanded = () => toggleExpanded(!expanded);
+  const handleToggleExpanded = () => {
+    const newState = !expanded;
+    toggleExpanded(newState);
+    onClick?.(id, newState);
+  };
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions

package/src/types.ts

@@ -17,6 +17,8 @@ export type CollapseBlockSecondaryProps = WithSupportProps<{
   className?: string;
   /** Проп отвечающий будет ли контент удаляться из DOM дерева */
   removeContentFromDOM?: boolean;
+  /** Обработчик клика по хедеру CollapseBlock */
+  onClick?(id: string, expanded: boolean): void;
 }>;
 
 export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {