@digital-ai/dot-components 5.11.0 → 5.12.0

package/index.esm.js

@@ -30,6 +30,63 @@ function useStylesWithRootClass(name, className, ...args) {
   return [name, ...(className ? [className] : [])].concat(args).join(' ').trim();
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const checkIfOverflowPresentInElementTree = element => {
   if (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight) {
     return true;
@@ -1319,10 +1376,12 @@ const DotTooltip = ({
   open,
   placement = 'bottom',
   popperClassName,
+  popperOptions,
   slotProps,
   title,
   childrenDisplayStyle
 }) => {
+  var _a;
   const rootClasses = useStylesWithRootClass('dot-tooltip', className);
   const [hasTooltipOnHover, setHasTooltipOnHover] = useState(false);
   const childrenWrapperRef = useRef(undefined);
@@ -1347,6 +1406,16 @@ const DotTooltip = ({
   if (!title) {
     return children;
   }
+  // MUI v5 Tooltip reads popperOptions exclusively from PopperProps.popperOptions —
+  // it overrides any popperOptions in slotProps.popper at render time (see Tooltip.js:573).
+  // To ensure both the popperOptions prop and any consumer-provided slotProps.popper.popperOptions
+  // are forwarded to createPopper, we merge them here and pass via PopperProps.
+  const _b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.popper) !== null && _a !== void 0 ? _a : {},
+    {
+      popperOptions: slotPopperOptions
+    } = _b,
+    restPopperSlotProps = __rest(_b, ["popperOptions"]);
+  const resolvedPopperOptions = popperOptions || slotPopperOptions ? Object.assign(Object.assign({}, popperOptions), slotPopperOptions) : undefined;
   return jsx(Tooltip, {
     "aria-hidden": false,
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : isString$2(title) ? title.toString() : 'Information tooltip',
@@ -1362,10 +1431,14 @@ const DotTooltip = ({
     open: open,
     placement: placement,
     PopperProps: {
-      disablePortal,
-      className: popperClassName
+      popperOptions: resolvedPopperOptions
     },
-    slotProps: slotProps,
+    slotProps: Object.assign(Object.assign({}, slotProps), {
+      popper: Object.assign({
+        disablePortal,
+        className: popperClassName
+      }, restPopperSlotProps)
+    }),
     role: ariaRole,
     title: title,
     followCursor: followCursor,
@@ -2082,63 +2155,6 @@ const DotAnnotation = ({
   });
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const OpenAPI$1 = {
   BASE: '',
   TOKEN: undefined,
@@ -15860,6 +15876,20 @@ const StyledNavigationRail = styled.div`
           }
         }
 
+        &.ai-rail {
+          &.selected,
+          &:focus-visible,
+          &:hover {
+            background-color: ${theme.palette.figma.aiPink.light} !important;
+          }
+          &.selected {
+            border-image: ${theme.palette.figma.gradient.active} 1;
+          }
+          .dot-icon {
+            color: transparent !important;
+          }
+        }
+
         .rail-item-text {
           word-break: break-word;
           padding: ${theme.spacing(0, 0.5)};
@@ -15869,7 +15899,7 @@ const StyledNavigationRail = styled.div`
   `}
 `;
 
-const MAX_ALLOWED_ITEMS = 7;
+const MAX_ALLOWED_ITEMS = 8;
 const DotNavigationRail = ({
   ariaLabel,
   className,
@@ -15891,8 +15921,9 @@ const DotNavigationRail = ({
     onChange && onChange(index);
   };
   const checkIfSelected = index => selectedItemIndex === index;
-  const renderIcon = (iconId, railIconBadge) => {
+  const renderIcon = (ai, iconId, railIconBadge) => {
     const icon = jsx(DotIcon, {
+      ai: ai,
       className: "rail-item-button-icon",
       iconId: iconId
     });
@@ -15904,18 +15935,20 @@ const DotNavigationRail = ({
   };
   const renderRailItems = () => {
     return railItems === null || railItems === void 0 ? void 0 : railItems.slice(0, MAX_ALLOWED_ITEMS).map(({
+      ai,
       ariaLabel: itemAriaLabel,
       iconBadge,
       iconId,
       title
     }, index) => jsxs(DotButton, {
       ariaLabel: itemAriaLabel,
-      className: useStylesWithRootClass('rail-item-button', checkIfSelected(index) && 'selected'),
+      className: useStylesWithRootClass('rail-item-button', ai ? 'ai-rail' : '', checkIfSelected(index) && 'selected'),
       "data-testid": `rail-item-${index}`,
       disableRipple: true,
       onClick: onItemSelect(index),
       type: "text",
-      children: [iconId && renderIcon(iconId, iconBadge), jsx(DotTypography, {
+      children: [iconId && renderIcon(ai, iconId, iconBadge), jsx(DotTypography, {
+        ai: ai,
         className: "rail-item-text",
         variant: "body2",
         children: title

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/navigation-rail/NavigationRail.d.ts

@@ -3,6 +3,8 @@ import { BadgeProps } from '../badge';
 export type RailItemsPosition = 'flex-start' | 'center' | 'flex-end';
 export type RailIconBadge = Omit<BadgeProps, 'children'>;
 export interface RailItem {
+    /** If true, applies AI color scheme on the elements */
+    ai?: boolean;
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
     /** Optional badge which will be displayed over an icon **/

package/src/lib/components/tooltip/Tooltip.d.ts

@@ -33,8 +33,10 @@ export interface TooltipProps extends CommonProps {
     open?: boolean;
     placement?: TooltipPlacement;
     popperClassName?: string;
+    /** Options forwarded to the underlying Popper.js instance (e.g. strategy, modifiers). */
+    popperOptions?: PopperProps['popperOptions'];
     /** The extra props for the slot components, like popper. It allows to override the existing props or add new ones. */
     slotProps?: SlotProps;
     title?: ReactNode | string | number;
 }
-export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, disableInteractive, followCursor, enterDelay, enterNextDelay, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, slotProps, title, childrenDisplayStyle, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTooltip: ({ ariaLabel, ariaRole, arrow, children, className, "data-testid": dataTestId, disablePortal, disableInteractive, followCursor, enterDelay, enterNextDelay, hoverVisibility, leaveDelay, onClose, open, placement, popperClassName, popperOptions, slotProps, title, childrenDisplayStyle, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;