@antscorp/antsomi-ui 1.3.5-beta.287 → 1.3.5-beta.288

package/es/components/atoms/Scrollbars/styled.js

@@ -12,7 +12,7 @@ export const VerticalTrack = styled.div `
   width: 4px !important;
   transition: opacity 200ms ease 0s;
   opacity: 0;
-  right: 2px;
+  right: 0px;
   bottom: 2px;
   top: 2px;
   border-radius: 4px;
@@ -23,7 +23,7 @@ export const HorizontalTrack = styled.div `
   transition: opacity 200ms ease 0s;
   opacity: 0;
   right: 2px;
-  bottom: 2px;
+  bottom: 0px;
   left: 2px;
   border-radius: 4px;
 `;

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -18,7 +18,7 @@ import isEqual from 'react-fast-compare';
 // Styled
 import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './styled';
 // Components
-import { Checkbox, Spin } from '../../../../atoms';
+import { Checkbox, Scrollbars, Spin } from '../../../../atoms';
 import { Menu } from '../../../../organism';
 import { Empty } from '../Empty';
 // Utils
@@ -121,7 +121,7 @@ export const CategoryListing = memo(props => {
     }, [getItem, items]);
     return (show && !isEmpty(menuItems)) || header || loading ? (React.createElement(MenuWrapper, { "$width": width },
         header,
-        React.createElement("div", { className: "category__listing" },
+        React.createElement(Scrollbars, { className: "category__listing" },
             React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },
                 isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
                     React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps))),

package/es/components/template/TemplateListing/index.js

@@ -14,7 +14,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useMemo, useState } from 'react';
 // Components
 import { CategoryListing, BlankTemplate, Empty } from './components';
-import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Scrollbars, Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ThumbnailCard } from '@antscorp/antsomi-ui/es/components/molecules';
 import { PreviewTemplateModal } from '../../organism/PreviewTemplateModal';
 // Constants
@@ -71,7 +71,7 @@ export const TemplateListing = memo(props => {
         React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
             header,
             React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
-                React.createElement("div", { className: "template-listing" },
+                React.createElement(Scrollbars, { className: "template-listing" },
                     React.createElement("div", { ref: containerRef, style: {
                             display: 'grid',
                             gap: listingGap,

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -27,8 +27,8 @@ export const GlobalStyle = () => {
 
       /* width */
       ::-webkit-scrollbar {
-        width: ${scrollBarSize};
-        height: ${scrollBarSize};
+        width: ${scrollBarSize} !important;
+        height: ${scrollBarSize} !important;
       }
 
       /* Track */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.287",
+  "version": "1.3.5-beta.288",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",