w-design-system 0.0.57 → 0.0.59

package/dist/components/Select/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAOD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAe;;;aAGpC,KAAK,CAAC,MAAM,CAAC,EAAE;;sBAEN,KAAK,CAAC,MAAM,CAAC,KAAK;WAC7B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;IACtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC;;;;sBAIvD,KAAK,CAAC,MAAM,CAAC,OAAO;;;gBAG1B,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;;CAE3F,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;aAE5B,KAAK,CAAC,MAAM,CAAC,EAAE;CAC3B,CAAA;AAMD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;;;WAMjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;eAOrE,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;+BAQN,KAAK,CAAC,MAAM,CAAC,OAAO;;;;aAItC,KAAK,CAAC,MAAM,CAAC,MAAM;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKxC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAOD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAe;;;aAGpC,KAAK,CAAC,MAAM,CAAC,EAAE;;sBAEN,KAAK,CAAC,MAAM,CAAC,KAAK;WAC7B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;IACtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC;;;;sBAIvD,KAAK,CAAC,MAAM,CAAC,OAAO;;;gBAG1B,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;;CAE3F,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;aAE5B,KAAK,CAAC,MAAM,CAAC,EAAE;CAC3B,CAAA;AAMD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;;;WAMjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;eAOrE,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;+BAQN,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAGlD,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKxC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAA;AAUD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAuB;;;sBAG3C,KAAK,CAAC,MAAM,CAAC,OAAO;aAC7B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;WAC5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;YACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;SAC3B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI;UACjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK;;CAE7B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;WACxB,KAAK,CAAC,MAAM,CAAC,OAAO;eAChB,KAAK,CAAC,SAAS,CAAC,MAAM;;;;CAIpC,CAAA"}

package/dist/components/Sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,2BAA2B,CAAC,EAAE,CAAA;IAChG,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,OAAO,wGAUjB,YAAY,sBAkFd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,2BAA2B,CAAC,EAAE,CAAA;IAChG,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,OAAO,wGAUjB,YAAY,sBAmFd,CAAA"}

package/dist/components/Sidebar/index.js

@@ -18,14 +18,15 @@ export const Sidebar = ({ logoUrl, layout, currentItemId, currentGroupId, setLin
             React.createElement(SidebarScrollContainer, null, layout
                 .map((item, index) => (Object.assign({ id: index, disabled: undefined }, item)))
                 .map(item => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 if (item.type === 'spacer')
                     return React.createElement(SidebarSpacer, { key: item.id });
                 if (item.type === 'item')
                     return (React.createElement(SidebarItem, { key: item.id, title: (_a = items[item.id]) === null || _a === void 0 ? void 0 : _a.menuTitle, icon: (_b = items[item.id]) === null || _b === void 0 ? void 0 : _b.icon, disabled: (_c = items[item.id]) === null || _c === void 0 ? void 0 : _c.disabled, onClick: () => sidebarItemClickHandler(item.id), sidebarOpen: sidebarOpen, isCurrentItem: currentItemId === item.id }));
                 if (item.type === 'group') {
                     const group = groups[item.id];
-                    if (group.itemIds == null || group.itemIds.length === 0) {
+                    const itemShowInMenu = (_d = group.itemIds) === null || _d === void 0 ? void 0 : _d.some(id => { var _a; return ((_a = items[id]) === null || _a === void 0 ? void 0 : _a.showInMenu) !== false; });
+                    if (group.itemIds == null || group.itemIds.length === 0 || !itemShowInMenu) {
                         const itemRouter = items[item.id];
                         return React.createElement(SidebarItem, { key: item.id, onClick: () => sidebarItemClickHandler(item.id), sidebarOpen: sidebarOpen, isCurrentItem: currentGroupId === item.id, disabled: itemRouter.disabled, title: itemRouter.menuTitle, icon: itemRouter.icon });
                     }

package/dist/components/Sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Sidebar/stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CA8DC,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAkCxB,CAAA"}
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CA8DC,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAA"}

package/dist/components/Sidebar/stories.js

@@ -80,12 +80,13 @@ export const Playground = {
                     icon: dashboardSVG,
                     link: '/dashboard',
                     disabled: false,
+                    showInMenu: false
                 }
             }, currentItemId: args.currentItemId, currentGroupId: args.currentGroupId, setLink: action('setLink'), groups: {
                 DASHBOARD: {
                     name: 'Group 1',
                     icon: dashboardSVG,
-                    itemIds: [],
+                    itemIds: ['DASHBOARD'],
                 },
             }, logoUrl: '' })));
     },

package/dist/components/Sidebar/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,YAAY;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,aAAa;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,UAAU;SACxB;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,WAAW;aAChB;YACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;SAChC;QACD,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,IAAI;aACf;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;aACvB;SACF;QACD,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;KACd;CAC6B,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,oBACF,IAAI,IACR,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE;aACnC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,KAAK;iBAChB;aACF,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1B,MAAM,EAAE;gBACN,SAAS,EAAE;oBACT,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,EAAE;iBACZ;aACF,EACD,OAAO,EAAE,EAAE,IACX,CACH,CAAA;IACH,CAAC;CACF,CAAA"}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,YAAY;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,aAAa;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,UAAU;SACxB;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,WAAW;aAChB;YACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;SAChC;QACD,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,IAAI;aACf;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;aACvB;SACF;QACD,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;KACd;CAC6B,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,oBACF,IAAI,IACR,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE;aACnC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,KAAK;oBACf,UAAU,EAAE,KAAK;iBAClB;aACF,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1B,MAAM,EAAE;gBACN,SAAS,EAAE;oBACT,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;iBACvB;aACF,EACD,OAAO,EAAE,EAAE,IACX,CACH,CAAA;IACH,CAAC;CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/MultiSelect/index.tsx

@@ -2,20 +2,39 @@ import React, {
   HTMLAttributes,
   PropsWithChildren,
   ReactNode,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
+  PointerEvent,
 } from 'react'
 import { chevronDownSVG } from '../../assets/icon'
 import { IconWrapper } from '../IconWrapper'
 import { Input } from '../Input'
 import { theme } from '../Themes'
-import { Dropdown, DropdownWrapper, OptionButton, OptionText, MultiSelectWrapper } from './styles'
+import {
+  Dropdown,
+  DropdownWrapper,
+  OptionButton,
+  OptionText,
+  SelectWrapper,
+  OptionBackground,
+  OptionBackgroundProps,
+  OptionsWrapper,
+  OptionTextBadge,
+  NoResults,
+} from '../Select/styles'
+import { Paragraph } from '../Paragraph'
 
 export interface MultiSelectProps<
-  T extends { text: string; id: number; icon?: ReactNode } = { text: string; id: number; icon?: ReactNode },
+  T extends { text: string; id: number; icon?: ReactNode; badge?: string | number } = {
+    text: string
+    id: number
+    icon?: ReactNode
+    badge?: string | number
+  },
 > extends HTMLAttributes<HTMLDivElement> {
   disabled?: boolean
   label?: string
@@ -36,7 +55,7 @@ export interface SelectRef {
   setOpen(open: boolean): void
 }
 
-const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode }>(
+const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode; badge?: string | number }>(
   {
     children,
     label,
@@ -82,14 +101,17 @@ const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: React
     }
   }, [open])
 
-  const onOptionClick = (option: T) => {
-    const isActive = selectedOptions?.findIndex(item => item.id === option.id) !== -1
-    if (isActive) {
-      onOptionChange && onOptionChange(selectedOptions?.filter(item => item.id !== option.id) ?? [])
-    } else {
-      onOptionChange && onOptionChange([...(selectedOptions ?? []), option])
-    }
-  }
+  const onOptionClick = useCallback(
+    (option: T) => {
+      const isActive = selectedOptions?.findIndex(item => item.id === option.id) !== -1
+      if (isActive) {
+        onOptionChange && onOptionChange(selectedOptions?.filter(item => item.id !== option.id) ?? [])
+      } else {
+        onOptionChange && onOptionChange([...(selectedOptions ?? []), option])
+      }
+    },
+    [onOptionChange, selectedOptions],
+  )
 
   useEffect(() => {
     if (usingInput) return
@@ -99,7 +121,12 @@ const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: React
       if (selectedOptions?.length === options?.length) {
         setComputedValue('Todos')
       } else {
-        setComputedValue(selectedOptions.map(option => option.text).sort().join(', '))
+        setComputedValue(
+          selectedOptions
+            .map(option => option.text)
+            .sort()
+            .join(', '),
+        )
       }
     } else {
       setComputedValue('')
@@ -142,8 +169,166 @@ const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: React
     return items
   }, [options, usingInput, disableSearch, computedValue])
 
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const optionsWrapperRef = useRef<HTMLDivElement | null>(null)
+  const [backgroundStyle, setBackgroundStyle] = useState<OptionBackgroundProps>({
+    $opacity: 0,
+    $width: '100%',
+    $height: '0px',
+    $top: '0px',
+    $left: '0px',
+  })
+
+  const optionRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const lastItemIdRef = useRef<number | undefined>()
+  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null)
+
+  const updateBackground = useCallback((index: number) => {
+    if (index === lastItemIdRef.current) return
+    const target = optionRefs.current[index]
+    if (!target) return
+    if (!optionsWrapperRef.current) return
+
+    const { left, top, height } = target.getBoundingClientRect()
+    const { left: contentLeft, top: contentTop } = optionsWrapperRef.current.getBoundingClientRect()
+    const padding = 16
+    setBackgroundStyle({
+      $opacity: 1,
+      $width: `100%`,
+      $height: `${height}px`,
+      $top: `${padding + top - contentTop}px`,
+      $left: `${left - contentLeft}px`,
+    })
+
+    lastItemIdRef.current = index
+  }, [])
+
+  /**
+   * When the user has the mouse over the dropdown and presses an up or down arrow key, the dropdown should
+   * ignore the hover change, as the user is navigating with the keyboard
+   */
+  const [disableHoverChange, setDisableHoverChange] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const scrollIntoView = (index: number) => {
+    const option = optionRefs.current[index]
+    if (option && dropdownRef.current) {
+      option.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      const intersectionObserver = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) {
+          setDisableHoverChange(true)
+          timeoutRef.current = setTimeout(() => {
+            timeoutRef.current = null
+            setDisableHoverChange(false)
+          }, 200)
+        }
+        setTimeout(() => {
+          intersectionObserver.disconnect()
+        }, 100)
+      })
+      if (dropdownRef.current) intersectionObserver.observe(dropdownRef.current)
+    }
+  }
+
+  useEffect(() => {
+    if (!open) {
+      setHighlightedIndex(null)
+      setBackgroundStyle({ ...backgroundStyle, $opacity: 0 })
+      return
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!filteredOptions.length) return
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setHighlightedIndex(prevIndex => {
+          const nextIndex = prevIndex === null || prevIndex === filteredOptions.length - 1 ? 0 : prevIndex + 1
+          scrollIntoView(nextIndex)
+          updateBackground(nextIndex)
+          const element = optionRefs.current[nextIndex]
+          if (element) {
+            const checkbox = element.querySelector('input')
+            if (checkbox) {
+              checkbox.focus()
+            }
+          }
+          return nextIndex
+        })
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setHighlightedIndex(prevIndex => {
+          const nextIndex = prevIndex === null || prevIndex === 0 ? filteredOptions.length - 1 : prevIndex - 1
+          scrollIntoView(nextIndex)
+          updateBackground(nextIndex)
+          const element = optionRefs.current[nextIndex]
+          if (element) {
+            const checkbox = element.querySelector('input')
+            if (checkbox) {
+              checkbox.focus()
+            }
+          }
+          return nextIndex
+        })
+      }
+
+      if (event.key === 'Enter' && highlightedIndex !== null) {
+        event.preventDefault()
+        onOptionClick(filteredOptions[highlightedIndex])
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open, filteredOptions, highlightedIndex, updateBackground, backgroundStyle, onOptionClick])
+
+  useEffect(() => {
+    if (disableHoverChange && dropdownRef.current) {
+      const element = dropdownRef.current
+      const handler = () => {
+        setDisableHoverChange(false)
+      }
+      element.addEventListener('scrollend', handler)
+
+      return () => {
+        element.removeEventListener('scrollend', handler)
+      }
+    }
+  }, [disableHoverChange])
+  /**
+   * Used to handle the pointer enter event, it's used to highlight the option that the mouse is over
+   */
+  const onPointerEnter = useCallback(
+    (event: PointerEvent<Element>, index: number) => {
+      if (disableHoverChange) return
+      updateBackground(index)
+      setHighlightedIndex(index)
+    },
+    [disableHoverChange, updateBackground, setHighlightedIndex],
+  )
+
+  /**
+   * Used to handle the pointer leave event, it's used to remove the highlight from the option that the mouse is over
+   */
+  const onPointerLeave = useCallback(
+    (event: PointerEvent<Element>, index: number) => {
+      if (disableHoverChange) return
+      if (index === lastItemIdRef.current) {
+        setBackgroundStyle(currentStyle => ({ ...currentStyle, $opacity: 0 }))
+        lastItemIdRef.current = undefined
+      }
+    },
+    [disableHoverChange],
+  )
+
   return (
-    <MultiSelectWrapper {...props} ref={wrapperRef}>
+    <SelectWrapper {...props} ref={wrapperRef}>
       <Input
         disabled={disabled}
         leftIcon={leftIcon}
@@ -163,39 +348,70 @@ const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: React
         value={computedValue}
         readonly={!open}
         onChange={onInputChange}
-        onClick={() => !disabled && setOpen(!open)}
+        onClick={() => {
+          if (!disabled) {
+            setComputedValue('')
+            setUsingInput(true)
+            setOpen(true)
+          }
+        }}
       />
       {open && (
         <DropdownWrapper>
           <Dropdown
+            ref={dropdownRef}
             dropDownTop={props.dropDownTop}
             dropDownWidth={dropDownWidth}
             dropDownMaxHeight={props.dropDownMaxHeight}
           >
             {(options?.length ?? 0) > 0 && (
-              <div>
-                {filteredOptions.map(option => (
-                  <OptionButton
-                    selected={selectedOptions?.some(selectedOption => option.id === selectedOption.id) ?? false}
-                    key={option.id}
-                    onClick={() => onOptionClick(option)}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedOptions?.some(selectedOption => option.id === selectedOption.id) ?? false}
-                      onChange={() => onOptionClick(option)}
-                    />
-                    {option.icon}
-                    <OptionText>{option.text}</OptionText>
-                  </OptionButton>
-                ))}
-              </div>
+              <>
+                <OptionsWrapper ref={optionsWrapperRef}>
+                  {filteredOptions.map((option, index) => (
+                    <OptionButton
+                      selected={selectedOptions?.some(selectedOption => option.id === selectedOption.id) ?? false}
+                      key={option.id}
+                      onClick={() => onOptionClick(option)}
+                      ref={ref => (optionRefs.current[index] = ref)}
+                      onPointerEnter={event => onPointerEnter(event, index)}
+                      onPointerLeave={event => onPointerLeave(event, index)}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedOptions?.some(selectedOption => option.id === selectedOption.id) ?? false}
+                        onChange={() => onOptionClick(option)}
+                      />
+                      {option?.badge ? (
+                        <OptionTextBadge>
+                          <div>{option.text}</div>
+                          <Paragraph strongBod color={theme.colors.honey30}>
+                            {option.badge}
+                          </Paragraph>
+                        </OptionTextBadge>
+                      ) : (
+                        <>
+                          {option.icon}
+                          <OptionText>{option.text}</OptionText>
+                        </>
+                      )}
+                    </OptionButton>
+                  ))}
+                </OptionsWrapper>
+                <OptionBackground
+                  $opacity={backgroundStyle.$opacity}
+                  $width={backgroundStyle.$width}
+                  $height={backgroundStyle.$height}
+                  $top={backgroundStyle.$top}
+                  $left={backgroundStyle.$left}
+                />
+                {filteredOptions.length === 0 && options?.length && <NoResults>Sem resultados</NoResults>}
+              </>
             )}
             {children}
           </Dropdown>
         </DropdownWrapper>
       )}
-    </MultiSelectWrapper>
+    </SelectWrapper>
   )
 }
 

package/src/components/MultiSelect/stories.tsx

@@ -27,7 +27,7 @@ const ComponentWrapper = ({ options, ...args }: MultiSelectProps) => {
       selectedOption={selectedOption}
       onOptionChange={option => setSelectOption(option)}
       options={
-        options ?? (new Array(20)).fill(0).map((_, index) => ({
+        options ?? (new Array(5)).fill(0).map((_, index) => ({
           id: index,
           text: `Opção ${index + 1}`,
         }))