@eleventheye/asui 2.7.2 → 2.7.4

package/dist/asiconbutton/ASIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asiconbutton/ASIconButton.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const ASUI_types_1 = require("../apptypes/ASUI.types");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const styles_1 = require("./styles");
-const ASIconButton = ({ className = '', onClick = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 24 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 40, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], disabled = false, isLoading = false, icon: Icon, theme = astheme_1.default, strokeWidth = 1, strokeColor = astheme_1.default.button.buttonBg, fillColor = astheme_1.default.button.buttonColor, color = astheme_1.default.button.buttonColor, text, id, style, ...props }) => {
+const ASIconButton = ({ className = '', onIconButtonTap = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 22 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 40, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], disabled = false, isLoading = false, icon: Icon, theme = astheme_1.default, strokeWidth = 1, strokeColor = astheme_1.default.button.buttonBg, fillColor = astheme_1.default.button.buttonColor, color = astheme_1.default.button.buttonColor, text, id, style, ...props }) => {
     const tapDebounceRef = (0, react_1.useRef)('None');
     const [isSelected, setIsSelected] = (0, react_1.useState)(selected);
     (0, react_1.useEffect)(() => {
@@ -23,14 +23,14 @@ const ASIconButton = ({ className = '', onClick = () => undefined, selected = fa
             btnEl.ariaPressed = 'true';
             if (toggle)
                 setIsSelected(!isSelected);
-            onClick(e);
-            btnEl.releasePointerCapture(e.pointerId);
         }
     };
     const onTapRelease = (e) => {
         if (tapDebounceRef.current === 'Down') {
             tapDebounceRef.current = 'Up';
             const btnEl = e.currentTarget;
+            onIconButtonTap(e);
+            btnEl.releasePointerCapture(e.pointerId);
             console.log(`%c ${tapDebounceRef.current} %c`, clsY, '');
             setTimeout(() => {
                 btnEl.ariaPressed = 'false';

package/dist/asiconbutton/ASIconButton.types.d.ts

@@ -1,3 +1,4 @@
+import { PointerEvent } from 'react';
 import { ASComponentSize, ASPaddingSize, ASTheme } from '../apptypes/ASUI.types';
 import { ASIcon, IconProps } from '../icons';
 type ASIconButtonOwnProps = {
@@ -11,6 +12,7 @@ type ASIconButtonOwnProps = {
     paddingSize?: ASPaddingSize;
     isLoading?: boolean;
     icon: typeof ASIcon;
+    onIconButtonTap?: (e: PointerEvent) => void;
 } & IconProps & Omit<React.HTMLProps<HTMLDivElement>, 'size'>;
 export type ASIconButtonProps = React.PropsWithChildren<ASIconButtonOwnProps>;
 export {};

package/dist/asiconbutton/ASIconButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASIconButton.types.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,QAAQ,CAAC,EAAE,OAAO,CAAC;IASnB,MAAM,CAAC,EAAE,OAAO,CAAC;IASjB,IAAI,CAAC,EAAE,eAAe,CAAC;IAQvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,IAAI,EAAE,OAAO,MAAM,CAAC;CACrB,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"ASIconButton.types.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,QAAQ,CAAC,EAAE,OAAO,CAAC;IASnB,MAAM,CAAC,EAAE,OAAO,CAAC;IASjB,IAAI,CAAC,EAAE,eAAe,CAAC;IAQvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,IAAI,EAAE,OAAO,MAAM,CAAC;IAEpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YA8LnF,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YAgMnF,CAAC"}

package/dist/asiconbutton/styles.js

@@ -147,6 +147,8 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
 
     &:hover:is([aria-disabled='true']),
     &:hover:not(:active):not(.Selected):is([aria-disabled='true']) {
+      touch-events: none;
+      user-select: none;
       cursor: default;
       background: ${({ theme }) => theme.button.buttonBgDisabled};
       color: transparent;

package/dist/asnavbar/mobile/ASNavBarMW.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAM3F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAM3F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/mobile/ASNavBarMW.js

@@ -52,8 +52,6 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
         onItemSelected(selected);
     }, [selected]);
     const selectPrev = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
         if (scrollContainerRef.current) {
             const offset = scrollContainerRef.current.scrollLeft - 200;
             selectedScrolledIntoViewItem(offset);
@@ -61,8 +59,6 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
         return false;
     };
     const selectNext = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
         if (scrollContainerRef.current) {
             const offset = scrollContainerRef.current.scrollLeft + 200;
             selectedScrolledIntoViewItem(offset);
@@ -94,6 +90,7 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
         }
     };
     const onButtonsPressed = (e, direction) => {
+        console.log(`onButtonsPressed`, e);
         if (direction === ASUI_types_1.ArrowButtonDirection.Left) {
             selectPrev(e);
         }

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAMzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.js

@@ -8,16 +8,26 @@ const ASNavBar_1 = require("../../asnavbar/ASNavBar");
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const icons_1 = require("../../icons");
 const styles_1 = require("./styles");
+const clsY = 'background: goldenrod; color: #000000; border-radius: 10px;';
+const clsG = 'background: forestgreen; color: #000000; border-radius: 10px;';
 const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => undefined, selectedIndex = 0, totalItemCount = 0, size = apptypes_1.ComponentSize.Medium, styleOptions = ASNavBar_1.defaultNavBarStyleOptions, theme = astheme_1.default, }) => {
     return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarArrowButtonsStyled, { className: `${className} ${size}`, theme: theme, styleOptions: styleOptions, children: [(0, jsx_runtime_1.jsx)(ASLeftNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex <= 0 }), (0, jsx_runtime_1.jsx)(ASRightNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex >= totalItemCount - 1 })] }));
 };
 exports.ASNavBarArrowButtons = ASNavBarArrowButtons;
 exports.default = exports.ASNavBarArrowButtons;
 const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onPointerDown: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, toggle: false, selected: false, disabled: disabled, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
+    const tapHandler = (e, dir) => {
+        console.log(`e: %c ${e.currentTarget.role} %c, dir: %c ${dir} %c`, clsG, '', clsY, '');
+        onArrowButtonClicked(e, dir);
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { icon: icons_1.ArrowLeftIcon, onIconButtonTap: (e) => tapHandler(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, toggle: false, selected: false, disabled: disabled, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
 };
 exports.ASLeftNavBarArrowButton = ASLeftNavBarArrowButton;
 const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { role: "button", icon: icons_1.ArrowRightIcon, onPointerDown: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, toggle: false, selected: false, size: size, disabled: disabled, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
+    const tapHandler = (e, dir) => {
+        console.log(`e: %c ${e.currentTarget.role} %c, dir: %c ${dir} %c`, clsG, '', clsY, '');
+        onArrowButtonClicked(e, dir);
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { icon: icons_1.ArrowRightIcon, onIconButtonTap: (e) => tapHandler(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, toggle: false, selected: false, size: size, disabled: disabled, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
 };
 exports.ASRightNavBarArrowButton = ASRightNavBarArrowButton;

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

@@ -21,6 +21,7 @@ export declare const ASIconButtonRightStyled: import("styled-components/dist/typ
     paddingSize?: import("../../apptypes").ASPaddingSize;
     isLoading?: boolean;
     icon: import("react").FC<import("react").PropsWithChildren<import("../..").IconProps>>;
+    onIconButtonTap?: (e: import("react").PointerEvent) => void;
 } & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
     children?: import("react").ReactNode | undefined;
 }, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../../asiconbutton").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
@@ -35,6 +36,7 @@ export declare const ASIconButtonLeftStyled: import("styled-components/dist/type
     paddingSize?: import("../../apptypes").ASPaddingSize;
     isLoading?: boolean;
     icon: import("react").FC<import("react").PropsWithChildren<import("../..").IconProps>>;
+    onIconButtonTap?: (e: import("react").PointerEvent) => void;
 } & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
     children?: import("react").ReactNode | undefined;
 }, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../../asiconbutton").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA2BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;qKAKnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;qKAKlC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA2BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;qKAKnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;qKAKlC,CAAC"}

package/dist/asnavbar/navbaritem/ASNavBarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAQtD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asnavbar/navbaritem/ASNavBarItem.js

@@ -7,14 +7,16 @@ const apptypes_1 = require("../../apptypes");
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const styles_1 = require("../styles");
 const styles_2 = require("./styles");
+const clsR = 'background: crimson; color: #000000; border-radius: 10px;';
+const clsY = 'background: goldenrod; color: #000000; border-radius: 10px;';
+const clsG = 'background: forestgreen; color: #000000; border-radius: 10px;';
 const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, itemIndex = 0, size = apptypes_1.ComponentSize.Medium, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
+    const tapDebounceRef = (0, react_1.useRef)('None');
     const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
     const navItemWidthRef = (0, react_1.useRef)(0);
     const navBarItemRef = (0, react_1.useRef)(null);
     const isNavBarItemSelected = (0, react_1.useRef)(selected);
     const onItemClickHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
         onItemClick(e, itemId, itemIndex);
     };
     (0, react_1.useEffect)(() => {
@@ -44,6 +46,28 @@ const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText =
     (0, react_1.useEffect)(() => {
         isNavBarItemSelected.current = selected;
     }, [selected]);
-    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerDown: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
+    const onTap = (e) => {
+        if (tapDebounceRef.current === 'None') {
+            tapDebounceRef.current = 'Down';
+            console.log(`%c ${tapDebounceRef.current} %c`, clsR, '');
+            const btnEl = e.currentTarget;
+            btnEl.ariaPressed = 'true';
+        }
+    };
+    const onTapRelease = (e) => {
+        if (tapDebounceRef.current === 'Down') {
+            tapDebounceRef.current = 'Up';
+            const btnEl = e.currentTarget;
+            onItemClickHandler(e);
+            console.log(`%c ${tapDebounceRef.current} %c`, clsY, '');
+            btnEl.releasePointerCapture(e.pointerId);
+            setTimeout(() => {
+                btnEl.ariaPressed = 'false';
+                tapDebounceRef.current = 'None';
+                console.log(`%c ${tapDebounceRef.current} %c`, clsG, '');
+            }, 400);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerDown: onTap, onPointerUp: onTapRelease, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
 };
 exports.default = ASNavBarItem;

package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8FtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.js

@@ -62,6 +62,6 @@ const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, disp
             }, 400);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerUp: onTapRelease, onPointerDown: onTap, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, role: "button", ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerUp: onTapRelease, onPointerDown: onTap, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
 };
 exports.default = ASNavBarPickPanelItem;

package/package.json

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