@eleventheye/asui 2.7.9 → 2.8.1

package/dist/asnavbar/desktop/ASNavBarDW.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAc9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmJvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAc9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiJvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/desktop/ASNavBarDW.js

@@ -38,12 +38,11 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
         });
     };
     const onScrollEndHandler = () => {
-        if (!navBarHighlightBoxRef.current || !navBarScrollRef.current || !navBarRef.current || !selectedItemElRef.current)
+        if (!navBarHighlightBoxRef.current || !navBarScrollRef.current || !selectedItemElRef.current)
             return;
         const selectedItemEl = selectedItemElRef.current;
         const selectedElRect = selectedItemEl.getBoundingClientRect();
         const parentRect = navBarScrollRef.current.getBoundingClientRect();
-        const rootRect = navBarRef.current.getBoundingClientRect();
         const offsetToSelectedEl = selectedElRect.left - parentRect.left;
         const selectedBox = navBarHighlightBoxRef.current;
         const selectedBoxWidth = selectedElRect.width;
@@ -98,6 +97,6 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
     };
     const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
     const isSelected = (itemId) => selected === itemId;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsxs)(styles_1.ASNavBarScrollableItems, { ref: navBarScrollRef, children: [(0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { onScrollEnd: onScrollEndHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme })] }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions, isMobile: false })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsxs)(styles_1.ASNavBarScrollableItems, { ref: navBarScrollRef, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { onScrollEnd: onScrollEndHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme })] }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions, isMobile: false })] }));
 };
 exports.default = ASNavBarDW;

package/dist/asnavbar/desktop/styles.d.ts

@@ -7,6 +7,7 @@ interface ASNavBarStyledProps {
     $minWidth?: number;
     $borderRadius?: number;
     $padding?: string;
+    $hideNavArrowButtonsInDW?: boolean;
 }
 export declare const ASNavBarDWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
 interface ASNavBarSelectedBoxStyledProps {
@@ -25,7 +26,7 @@ interface ASNavBarItemStyledProps {
 }
 export declare const ASNavBarItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemStyledProps>> & string;
 export declare const ASNavButtonsDWContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ASNavBarScrollableItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ASNavBarScrollableItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
 export declare const ASScrollContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/desktop/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAqBpD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsBD,eAAO,MAAM,gBAAgB,wPAoB5B,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,qQAc/B,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAuC9B,CAAC;AA4BF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAYnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAWnC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAsBD,eAAO,MAAM,gBAAgB,wPAoB5B,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,qQAc/B,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAuC9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAYnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAiBnC,CAAC"}

package/dist/asnavbar/desktop/styles.js

@@ -4,22 +4,7 @@ exports.ASScrollContainerStyled = exports.ASNavBarScrollableItems = exports.ASNa
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importStar(require("styled-components"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
-const HideScrollBarConfig = (0, styled_components_1.css) `
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-`;
-const maxWidth = (0, styled_components_1.css) `
-  width: 100%;
-  @supports (width: -webkit-fill-available) {
-    width: -webkit-fill-available;
-  }
-`;
+const ASSharedStyles_1 = require("../../astheme/ASSharedStyles");
 const dimensionsForSizes = (0, styled_components_1.css) `
   &.ASSmall {
     height: 30px;
@@ -35,7 +20,7 @@ const dimensionsForSizes = (0, styled_components_1.css) `
 
   &.ASLarge {
     height: 50px;
-    font-size: 2.1rem;
+    font-size: 2rem;
     font-weight: 500;
   }
 `;
@@ -47,7 +32,7 @@ exports.ASNavBarDWStyled = styled_components_1.default.div `
   flex-direction: row;
   position: relative;
   gap: ${({ $gap = 30 }) => $gap}px;
-  width: -webkit-fill-available;
+  ${ASSharedStyles_1.MaxWidthStyle}
   contain: layout;
   grid-row: 1;
   min-width: ${({ $minWidth = 300 }) => $minWidth}px;
@@ -126,10 +111,10 @@ exports.ASNavBarScrollableItems = styled_components_1.default.div `
   flex-direction: row;
   position: relative;
   overflow: hidden;
-  // overflow-x: overlay;
   width: fit-content;
-  padding: 0 44px;
-  ${HideScrollBarConfig}
+  padding: ${({ $hideNavArrowButtonsInDW }) => ($hideNavArrowButtonsInDW ? '0' : '0 44px')};
+  height: 95%;
+  ${ASSharedStyles_1.HideScrollBarStyle}
 `;
 exports.ASScrollContainerStyled = styled_components_1.default.div `
   display: flex;
@@ -141,5 +126,11 @@ exports.ASScrollContainerStyled = styled_components_1.default.div `
   overflow-x: auto;
   width: 100%
   gap: 16px;
-  ${HideScrollBarConfig}
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  & > div {
+    scroll-snap-stop: always;
+    scroll-snap-align: center;
+  }
+  ${ASSharedStyles_1.HideScrollBarStyle}
 `;

package/dist/asnavbar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asnavbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGvE,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwCD,eAAO,MAAM,cAAc,wPAoC1B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,6PAgBtC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asnavbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAIvE,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,wPAgC1B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,6PAetC,CAAC"}

package/dist/asnavbar/styles.js

@@ -2,44 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ASNavBarLeadingIconPadding = exports.ASNavBarStyled = void 0;
 const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-const ShowScrollBarConfig = (0, styled_components_1.css) `
-  /* Chrome, Edge, and Safari */
-  &::-webkit-scrollbar {
-    width: 1px;
-    height: 1px; // Set scrollbar height (horizontal)
-    background: transparent;
-    scrollbar-color: #ffda3f transparent; // thumb color, track color
-    scrollbar-width: thinner;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    height: 1px; // Set scrollbar track height (horizontal)
-    width: 1px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: linear-gradient(to bottom, rgb(22, 19, 8) 0%, rgb(255, 204, 0) 75%, rgb(66, 55, 14) 100%);
-    border-radius: 3px;
-    height: 1px; // Set scrollbar track height (horizontal)
-    width: 1px;
-  }
-
-  /* Firefox */
-  scrollbar-color: #ffda3f transparent; // thumb color, track color
-  scrollbar-width: thinner;
-`;
-const HideScrollBarConfig = (0, styled_components_1.css) `
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-`;
+const ASSharedStyles_1 = require("../astheme/ASSharedStyles");
 exports.ASNavBarStyled = styled_components_1.default.div `
   anchor-name: --navbarAnchor;
   display: grid;
@@ -50,7 +15,6 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   grid-column: 3;
   grid-row: 1;
   grid-gap: 16px;
-  // display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
@@ -63,21 +27,17 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
   box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
 
-  width: 100%;
-  @supports (width: -webkit-fill-available) {
-    width: -webkit-fill-available;
-    max-width: ${({ $maxWidth = 100, $maxWidthUnit = '%' }) => `${$maxWidth}${$maxWidthUnit}`};
-  }
+  ${ASSharedStyles_1.MaxWidthStyle}
+  max-width: ${({ $maxWidth = 100, $maxWidthUnit = '%' }) => `${$maxWidth}${$maxWidthUnit}`};
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 425px) {
     max-width: 300px;
     width: 100%;
   }
 
-  ${({ $hideHorizontalScrollbarInDW = true }) => $hideHorizontalScrollbarInDW ? HideScrollBarConfig : ShowScrollBarConfig};
+  ${({ $hideHorizontalScrollbarInDW = true }) => $hideHorizontalScrollbarInDW ? ASSharedStyles_1.HideScrollBarStyle : ASSharedStyles_1.ShowScrollBarStyle};
 `;
 exports.ASNavBarLeadingIconPadding = styled_components_1.default.div `
-  // padding: 0 4px;
   pointer-events: none;
   user-select: none;
   ${({ $selected = false, theme = astheme_1.default }) => $selected

package/dist/astheme/ASSharedStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const ShowScrollBarStyle: import("styled-components").RuleSet<object>;
+export declare const HideScrollBarStyle: import("styled-components").RuleSet<object>;
+export declare const MaxWidthStyle: import("styled-components").RuleSet<object>;
+//# sourceMappingURL=ASSharedStyles.d.ts.map

package/dist/astheme/ASSharedStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASSharedStyles.d.ts","sourceRoot":"","sources":["../../src/astheme/ASSharedStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,6CAyB9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6CAS9B,CAAC;AAEF,eAAO,MAAM,aAAa,6CAKzB,CAAC"}

package/dist/astheme/ASSharedStyles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxWidthStyle = exports.HideScrollBarStyle = exports.ShowScrollBarStyle = void 0;
+const styled_components_1 = require("styled-components");
+exports.ShowScrollBarStyle = (0, styled_components_1.css) `
+  /* Chrome, Edge, and Safari */
+  &::-webkit-scrollbar {
+    width: 1px;
+    height: 1px; // Set scrollbar height (horizontal)
+    background: transparent;
+    scrollbar-color: #ffda3f transparent; // thumb color, track color
+    scrollbar-width: thinner;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    height: 1px; // Set scrollbar track height (horizontal)
+    width: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, rgb(22, 19, 8) 0%, rgb(255, 204, 0) 75%, rgb(66, 55, 14) 100%);
+    border-radius: 3px;
+    height: 1px; // Set scrollbar track height (horizontal)
+    width: 1px;
+  }
+
+  /* Firefox */
+  scrollbar-color: #ffda3f transparent; // thumb color, track color
+  scrollbar-width: thinner;
+`;
+exports.HideScrollBarStyle = (0, styled_components_1.css) `
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+exports.MaxWidthStyle = (0, styled_components_1.css) `
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.7.9",
+  "version": "2.8.1",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [