@ssa-ui-kit/widgets 0.0.25-alpha → 0.0.26-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.25-alpha",
+  "version": "0.0.26-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/CollapsibleNavBar/CollapsibleNavBar.tsx

@@ -2,7 +2,6 @@ import { useState, useId, useEffect } from 'react';
 import { Wrapper } from '@ssa-ui-kit/core';
 import { useWindowSize } from '@ssa-ui-kit/hooks';
 import * as S from './styles';
-
 import { SCREEN_SIZES } from '../../consts';
 import CollapsibleNavBarBase from './CollapsibleNavBarBase';
 import CollapsibleNavBarWrapper from './CollapsibleNavBarWrapper';
@@ -18,6 +17,7 @@ import { NavBarItemWithoutSubMenu } from './NavBarItemWithoutSubMenu';
 export const CollapsibleNavBar = ({
   items,
   renderLogo,
+  onChange,
 }: CollapsibleNavBarExtendedProps) => {
   const toggleId = useId();
   const { width } = useWindowSize();
@@ -28,6 +28,10 @@ export const CollapsibleNavBar = ({
     onToggle(false);
   }, [width]);
 
+  useEffect(() => {
+    onChange?.(isChecked);
+  }, [isChecked]);
+
   const handleCloseMobileMenu = () => {
     if (isMobile) {
       onToggle(!isChecked);

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -48,6 +48,9 @@ export default {
   args: {
     items: ITEMS,
     renderLogo: <Logo />,
+    onChange: (isChecked) => {
+      console.log('>>>onChange', isChecked);
+    },
   },
 } as Meta<typeof CollapsibleNavBar>;
 
@@ -69,5 +72,8 @@ export const WithCustomIcon = {
       },
     ],
     renderLogo: <Logo />,
+    onChange: (isChecked) => {
+      console.log('>>>onChange', isChecked);
+    },
   },
 } as Meta<typeof CollapsibleNavBar>;

package/src/components/CollapsibleNavBar/stories/StoryComponent.tsx

@@ -11,7 +11,13 @@ export const StoryComponent = ({
         path="/*"
         element={
           <div style={{ height: '100vh', position: 'relative' }}>
-            <CollapsibleNavBar items={items} renderLogo={<Logo />} />
+            <CollapsibleNavBar
+              items={items}
+              renderLogo={<Logo />}
+              onChange={(isChecked) => {
+                console.log('>>>checked ', isChecked);
+              }}
+            />
           </div>
         }
       />

package/src/components/CollapsibleNavBar/types.ts

@@ -14,4 +14,5 @@ export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
 export interface CollapsibleNavBarExtendedProps {
   items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
   renderLogo: React.ReactElement;
+  onChange?: (isChecked: boolean) => void;
 }

package/storybook-static/1283.9fc9db8d.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_ssa_ui_kit_widgets=self.webpackChunk_ssa_ui_kit_widgets||[]).push([[1283],{"../../node_modules/.pnpm/@storybook+components@7.3.2_@types+react-dom@18.2.4_@types+react@18.2.8_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/components/dist/WithTooltip-YBG737T3.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{WithToolTipState:function(){return _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__.WA},WithTooltip:function(){return _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__.WA},WithTooltipPure:function(){return _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__.DG}});var _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/@storybook+components@7.3.2_@types+react-dom@18.2.4_@types+react@18.2.8_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/components/dist/chunk-OCF3KO2R.mjs")}}]);

package/storybook-static/1326.d70e842e.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_ssa_ui_kit_widgets=self.webpackChunk_ssa_ui_kit_widgets||[]).push([[1326],{"../../node_modules/.pnpm/@storybook+icons@1.1.6_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/icons/dist/Editing-7QFB6ZMG.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Bold:function(){return Bold},Italic:function(){return Italic},ListOrdered:function(){return ListOrdered},ListUnordered:function(){return ListUnordered},Markdown:function(){return Markdown},Markup:function(){return Markup},PaperClip:function(){return PaperClip},Paragraph:function(){return Paragraph}});var _chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/@storybook+icons@1.1.6_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/icons/dist/chunk-MSDTXLE7.mjs"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),Markup=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M8.982 1.632a.5.5 0 00-.964-.263l-3 11a.5.5 0 10.964.263l3-11zM3.32 3.616a.5.5 0 01.064.704L1.151 7l2.233 2.68a.5.5 0 11-.768.64l-2.5-3a.5.5 0 010-.64l2.5-3a.5.5 0 01.704-.064zM10.68 3.616a.5.5 0 00-.064.704L12.849 7l-2.233 2.68a.5.5 0 00.768.64l2.5-3a.5.5 0 000-.64l-2.5-3a.5.5 0 00-.704-.064z",fill:"currentColor"})),...restProps})},Bold=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 2v1.5h1v7H3V12h5a3 3 0 001.791-5.407A2.75 2.75 0 008 2.011V2H3zm5 5.5H5.5v3H8a1.5 1.5 0 100-3zm-.25-4H5.5V6h2.25a1.25 1.25 0 100-2.5z",fill:"currentColor"})),...restProps})},Italic=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M5 2h6v1H8.5l-2 8H9v1H3v-1h2.5l2-8H5V2z",fill:"currentColor"})),...restProps})},PaperClip=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M10.553 2.268a1.5 1.5 0 00-2.12 0L2.774 7.925a2.5 2.5 0 003.536 3.535l3.535-3.535a.5.5 0 11.707.707l-3.535 3.536-.002.002a3.5 3.5 0 01-4.959-4.941l.011-.011L7.725 1.56l.007-.008a2.5 2.5 0 013.53 3.541l-.002.002-5.656 5.657-.003.003a1.5 1.5 0 01-2.119-2.124l3.536-3.536a.5.5 0 11.707.707L4.189 9.34a.5.5 0 00.707.707l5.657-5.657a1.5 1.5 0 000-2.121z",fill:"currentColor"})),...restProps})},ListOrdered=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M5 2.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zM5 7a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7A.5.5 0 015 7zM5.5 11a.5.5 0 000 1h7a.5.5 0 000-1h-7zM2.5 2H1v1h1v3h1V2.5a.5.5 0 00-.5-.5zM3 8.5v1a.5.5 0 01-1 0V9h-.5a.5.5 0 010-1h1a.5.5 0 01.5.5zM2 10.5a.5.5 0 00-1 0V12h2v-1H2v-.5z",fill:"currentColor"})),...restProps})},ListUnordered=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M2.75 2.5a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM5.5 2a.5.5 0 000 1h7a.5.5 0 000-1h-7zM5.5 11a.5.5 0 000 1h7a.5.5 0 000-1h-7zM2 12.25a.75.75 0 100-1.5.75.75 0 000 1.5zM5 7a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7A.5.5 0 015 7zM2 7.75a.75.75 0 100-1.5.75.75 0 000 1.5z",fill:"currentColor"})),...restProps})},Paragraph=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M6 7a3 3 0 110-6h5.5a.5.5 0 010 1H10v10.5a.5.5 0 01-1 0V2H7v10.5a.5.5 0 01-1 0V7z",fill:"currentColor"})),...restProps})},Markdown=allProps=>{const{svgProps:props,...restProps}=allProps;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_chunk_MSDTXLE7_mjs__WEBPACK_IMPORTED_MODULE_0__.a,{icon:react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props},react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{d:"M2 4.5h1.5L5 6.375 6.5 4.5H8v5H6.5V7L5 8.875 3.5 7v2.5H2v-5zM9.75 4.5h1.5V7h1.25l-2 2.5-2-2.5h1.25V4.5z",fill:"currentColor"}),react__WEBPACK_IMPORTED_MODULE_1__.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M.5 2a.5.5 0 00-.5.5v9a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5H.5zM1 3v8h12V3H1z",fill:"currentColor"})),...restProps})}},"../../node_modules/.pnpm/@storybook+icons@1.1.6_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/icons/dist/chunk-MSDTXLE7.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{a:function(){return IconWrapper}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),IconWrapper=({icon:icon,color:colorProp,size:sizeProp,...restProps})=>{const color=colorProp||"currentColor",size=sizeProp||"14px";return react__WEBPACK_IMPORTED_MODULE_0__.createElement("span",{role:"img","aria-hidden":"true",style:{color:color,width:size,height:size,display:"inline-flex",fontSize:"inherit"},...restProps},icon)}}}]);