addon-ui 0.7.1 → 0.8.0

package/dist-types/components/Highlight/Highlight.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { HighlighterProps } from "react-highlight-words";
 import { HighlightColor } from "./types";
-export interface HighlightProps extends HighlighterProps {
+export interface HighlightProps extends Omit<HighlighterProps, "searchWords"> {
     color?: HighlightColor;
+    searchWords?: string | RegExp | (string | RegExp)[];
 }
 declare const _default: React.NamedExoticComponent<HighlightProps>;
 export default _default;

package/dist-types/components/Truncate/Truncate.d.ts

@@ -1,8 +1,10 @@
 import React, { ComponentProps } from "react";
+import { HighlightProps } from "../Highlight";
 export interface TruncateProps extends ComponentProps<"span"> {
     text?: string;
     middle?: boolean;
     separator?: string;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
 }
 declare const _default: React.NamedExoticComponent<Omit<TruncateProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/dist-types/components/types.d.ts

@@ -7,7 +7,7 @@ export interface ComponentsProps {
     drawer?: DrawerProps;
     footer?: FooterProps;
     header?: Pick<HeaderProps, "alignCenter" | "before" | "after">;
-    highlight?: HighlightProps;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
     icon?: Omit<IconProps, "name">;
     iconButton?: Pick<IconButtonProps, "variant" | "size" | "radius">;
     list?: ListProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",
@@ -22,7 +22,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/addon-stack/addon-ui"
+    "url": "git+https://github.com/addon-stack/addon-ui.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "bugs": {
     "url": "https://github.com/addon-stack/addon-ui/issues"
@@ -80,6 +84,7 @@
     "@types/react-highlight-words": "^0.20.0",
     "autosize": "^6.0.1",
     "classnames": "^2.5.1",
+    "debounce": "^2.2.0",
     "odometer": "^0.4.8",
     "radix-ui": "^1.1.3",
     "react-highlight-words": "^0.21.0",
@@ -91,7 +96,7 @@
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/js": "^9.21.0",
-    "@release-it/conventional-changelog": "^10.0.1",
+    "@release-it/conventional-changelog": "^10.0.4",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@storybook/react": "^9.1.3",
     "@types/chrome": "^0.1.12",
@@ -100,7 +105,7 @@
     "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "adnbn": "^0.4.2",
+    "adnbn": "^0.5.4",
     "depcheck": "^1.4.7",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -111,7 +116,7 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "release-it": "^19.0.5",
+    "release-it": "^19.2.3",
     "rspack-plugin-virtual-module": "^1.0.0",
     "storybook": "^9.1.3",
     "storybook-react-rsbuild": "^2.1.0",

package/src/components/Accordion/accordion.module.scss

@@ -28,6 +28,7 @@ $root: accordion;
     background-color: var(--accordion-content-bg-color);
     will-change: background-color;
     transition: background-color var(--accordion-speed-bg, var(--speed-color));
+    overflow: hidden;
 
     &[data-state="open"] {
       animation: slideDown var(--accordion-speed-animation, var(--speed-sm)) ease-in-out;

package/src/components/Checkbox/checkbox.module.scss

@@ -5,7 +5,7 @@ $root: checkbox;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  padding: 2px;
+  padding: var(--checkbox-padding, 2px);
   width: var(--checkbox-size, 18px);
   height: var(--checkbox-size, 18px);
   border-radius: var(--checkbox-border-radius, 4px);

package/src/components/Highlight/Highlight.tsx

@@ -1,4 +1,4 @@
-import React, {FC, memo} from "react";
+import React, {FC, memo, useMemo} from "react";
 import classnames from "classnames";
 import Highlighter, {HighlighterProps} from "react-highlight-words";
 
@@ -8,26 +8,42 @@ import {HighlightColor} from "./types";
 
 import styles from "./highlight.module.scss";
 
-export interface HighlightProps extends HighlighterProps {
+export interface HighlightProps extends Omit<HighlighterProps, "searchWords"> {
     color?: HighlightColor;
+    searchWords?: string | RegExp | (string | RegExp)[];
 }
 
 const Highlight: FC<HighlightProps> = props => {
-    const {color, activeClassName, highlightClassName, ...other} = {
+    const {color, className, activeClassName, highlightClassName, searchWords, textToHighlight, ...other} = {
         ...useComponentProps("highlight"),
         ...props,
     };
 
+    const search = useMemo(() => {
+        if (!searchWords) {
+            return [];
+        }
+
+        if (Array.isArray(searchWords)) {
+            return searchWords;
+        }
+
+        return [searchWords];
+    }, [searchWords]);
+
     return (
         <Highlighter
-            highlightClassName={classnames(
+            className={classnames(
                 styles["highlight"],
                 {
                     [styles[`highlight--${color}-color`]]: color,
                 },
-                highlightClassName
+                className
             )}
-            activeClassName={classnames(styles["highlight--active"], activeClassName)}
+            highlightClassName={classnames(styles["highlight-mark"], highlightClassName)}
+            activeClassName={classnames(styles["highlight-mark--active"], activeClassName)}
+            searchWords={search}
+            textToHighlight={textToHighlight}
             {...other}
         />
     );

package/src/components/Highlight/highlight.module.scss

@@ -1,51 +1,55 @@
 $root: highlight;
 
 .#{$root} {
-  font-size: var(--highlight-font-size, inherit);
-  font-weight: var(--highlight-font-weight, inherit);
-  font-family: var(--highlight-font-family, inherit), sans-serif;
-  line-height: var(--highlight-line-height, var(--line-height, 1rem));
-  color: var(--highlight-color, #fff);
-  background-color: var(--highlight-bg-color, #ffd60a);
-  padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);
-  margin: 0 calc(-1 * var(--highlight-x-padding, 3px));
-  border-radius: var(--highlight-border-radius, 2px);
-  transition:
-    color var(--highlight-speed-color, var(--speed-color)),
-    background-color var(--highlight-speed-bg, var(--speed-color));
-
-  &--primary-color {
-    color: var(--highlight-primary-color, #fff);
-    background-color: var(--primary-color);
-  }
+  display: inline;
+
+  &-mark {
+    font-size: var(--highlight-font-size, inherit);
+    font-weight: var(--highlight-font-weight, inherit);
+    font-family: var(--highlight-font-family, inherit), sans-serif;
+    line-height: var(--highlight-line-height, var(--line-height, 1rem));
+    color: var(--highlight-color, #fff);
+    background-color: var(--highlight-bg-color, #ffd60a);
+    padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);
+    margin: 0 calc(-1 * var(--highlight-x-padding, 3px));
+    border-radius: var(--highlight-border-radius, 2px);
+    transition:
+      color var(--highlight-speed-color, var(--speed-color)),
+      background-color var(--highlight-speed-bg, var(--speed-color));
+
+    .#{$root}--primary-color & {
+      color: var(--highlight-primary-color, #fff);
+      background-color: var(--primary-color);
+    }
 
-  &--secondary-color {
-    color: var(--highlight-secondary-color, #fff);
-    background-color: var(--secondary-color);
-  }
+    .#{$root}--secondary-color & {
+      color: var(--highlight-secondary-color, #fff);
+      background-color: var(--secondary-color);
+    }
 
-  &--accent-color {
-    color: var(--highlight-accent-color, #fff);
-    background-color: var(--accent-color);
-  }
+    .#{$root}--accent-color & {
+      color: var(--highlight-accent-color, #fff);
+      background-color: var(--accent-color);
+    }
 
-  &--active {
-    color: var(--highlight-active-color, var(--highlight-color, #fff));
-    background-color: var(--highlight-active-bg-color, #ff801f);
+    &--active {
+      color: var(--highlight-active-color, var(--highlight-color, #fff));
+      background-color: var(--highlight-active-bg-color, #ff801f);
 
-    &.#{$root}--primary-color {
-      color: var(--highlight-active-primary-color, var(--highlight-primary-color, #fff));
-      background-color: color-mix(in srgb, black 40%, var(--primary-color));
-    }
+      .#{$root}--primary-color & {
+        color: var(--highlight-active-primary-color, var(--highlight-primary-color, #fff));
+        background-color: color-mix(in srgb, black 40%, var(--primary-color));
+      }
 
-    &.#{$root}--secondary-color {
-      color: var(--highlight-active-secondary-color, var(--highlight-secondary-color, #fff));
-      background-color: color-mix(in srgb, black 40%, var(--secondary-color));
-    }
+      .#{$root}--secondary-color & {
+        color: var(--highlight-active-secondary-color, var(--highlight-secondary-color, #fff));
+        background-color: color-mix(in srgb, black 40%, var(--secondary-color));
+      }
 
-    &.#{$root}--accent-color {
-      color: var(--highlight-active-accent-color, var(--highlight-accent-color, #fff));
-      background-color: color-mix(in srgb, black 40%, var(--accent-color));
+      .#{$root}--accent-color & {
+        color: var(--highlight-active-accent-color, var(--highlight-accent-color, #fff));
+        background-color: color-mix(in srgb, black 40%, var(--accent-color));
+      }
     }
   }
 }

package/src/components/Modal/modal.module.scss

@@ -77,6 +77,7 @@ $root: modal;
   &-children {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
   }
 
   &-close {

package/src/components/Tabs/tabs.module.scss

@@ -19,7 +19,10 @@ $border-width: 1px;
     position: relative;
     display: flex;
     justify-content: space-between;
-    transition: border-bottom-color var(--tabs-speed-border-color, var(--speed-color));
+    background-color: var(--tabs-list-bg-color);
+    transition:
+      border-bottom-color var(--tabs-speed-border-color, var(--speed-color)),
+      background-color var(--tabs-speed-bg-list-color, var(--speed-color));
 
     @include theme.rtl() {
       & {

package/src/components/Truncate/Truncate.tsx

@@ -5,19 +5,24 @@ import React, {
     memo,
     useImperativeHandle,
     useLayoutEffect,
+    useMemo,
     useRef,
     useState,
 } from "react";
+import debounce from "debounce";
 import classnames from "classnames";
 
 import {useComponentProps} from "../../providers";
 
+import {Highlight, HighlightProps} from "../Highlight";
+
 import styles from "./truncate.module.scss";
 
 export interface TruncateProps extends ComponentProps<"span"> {
     text?: string;
     middle?: boolean;
     separator?: string;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
 }
 
 const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
@@ -50,52 +55,48 @@ const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
 };
 
 const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (props, ref) => {
-    const {text = "", middle, separator = "...", className, ...other} = {...useComponentProps("truncate"), ...props};
+    const {
+        text = "",
+        middle,
+        separator = "...",
+        className,
+        highlight,
+        ...other
+    } = {...useComponentProps("truncate"), ...props};
 
     const innerRef = useRef<HTMLSpanElement | null>(null);
     const [displayedText, setDisplayedText] = useState(text);
 
+    const finalText = useMemo(() => {
+        return middle ? displayedText : text;
+    }, [displayedText, text, middle]);
+
     useImperativeHandle(ref, () => innerRef.current!, []);
 
     useLayoutEffect(() => {
         const el = innerRef.current;
         if (!el || !middle) return;
 
-        let animationFrameId: number;
         let observer: ResizeObserver | null = null;
 
-        const measureAndTrim = () => {
-            animationFrameId = requestAnimationFrame(() => {
-                const newText = trimMiddle(el, text, separator);
-                if (newText !== displayedText) {
-                    setDisplayedText(newText);
-                }
-            });
-        };
+        const measureAndTrim = debounce(() => {
+            setDisplayedText(trimMiddle(el, text, separator));
+        }, 150);
 
         measureAndTrim();
 
-        if ("ResizeObserver" in window) {
-            observer = new ResizeObserver(() => {
-                cancelAnimationFrame(animationFrameId);
-                measureAndTrim();
-            });
-            observer.observe(el);
-        }
+        observer = new ResizeObserver(() => measureAndTrim());
 
-        window.addEventListener("resize", measureAndTrim);
+        observer.observe(el);
 
         return () => {
-            window.removeEventListener("resize", measureAndTrim);
+            measureAndTrim.clear();
             observer?.disconnect();
-            cancelAnimationFrame(animationFrameId);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [text, separator, middle]);
 
     return (
         <span
-            ref={innerRef}
             className={classnames(
                 styles["truncate"],
                 {
@@ -105,7 +106,9 @@ const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (prop
             )}
             {...other}
         >
-            {middle ? displayedText : text}
+            <span ref={innerRef} className={styles["truncate__hidden"]} />
+
+            {highlight ? <Highlight {...highlight} textToHighlight={finalText} /> : finalText}
         </span>
     );
 };

package/src/components/Truncate/truncate.module.scss

@@ -1,6 +1,7 @@
 @use "../../styles/mixins" as theme;
 
 .truncate {
+  position: relative;
   display: block;
   width: 100%;
   white-space: nowrap;
@@ -8,6 +9,15 @@
   text-overflow: ellipsis;
   transition: color var(--truncate-speed-color, var(--speed-color));
 
+  &__hidden {
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &--middle {
     text-overflow: clip;
 

package/src/components/types.ts

@@ -39,7 +39,7 @@ export interface ComponentsProps {
     drawer?: DrawerProps;
     footer?: FooterProps;
     header?: Pick<HeaderProps, "alignCenter" | "before" | "after">;
-    highlight?: HighlightProps;
+    highlight?: Omit<HighlightProps, "textToHighlight">;
     icon?: Omit<IconProps, "name">;
     iconButton?: Pick<IconButtonProps, "variant" | "size" | "radius">;
     list?: ListProps;