Correct prop structure of components

snehilvj · Apr 17, 2024 · 3a4e5ef · 3a4e5ef
1 parent a7aedb9
commit 3a4e5ef
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "dash_mantine_components",
-    "version": "0.14.0",
+    "version": "0.14.1",
     "description": "Plotly Dash Components based on Mantine",
     "main": "index.ts",
     "repository": {

diff --git a/src/ts/components/core/hovercard/HoverCard.tsx b/src/ts/components/core/hovercard/HoverCard.tsx
@@ -1,5 +1,4 @@
 import { Box, HoverCard as MantineHoverCard } from "@mantine/core";
-import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { PopoverProps } from "props/popover";
 import React from "react";
@@ -9,20 +8,19 @@ interface Props extends Omit<PopoverProps, "opened">, DashBaseProps {
     openDelay?: number;
     /** Close delay in ms */
     closeDelay?: number;
-    /** Target box wrapper props */
-    boxWrapperProps?: BoxProps;
 }
 
 /** HoverCard */
 const HoverCard = (props: Props) => {
-    const { children, setProps, boxWrapperProps, ...others } = props;
-    const boxProps = { w: "fit-content", ...boxWrapperProps };
+    const { children, setProps, ...others } = props;
 
     return (
         <MantineHoverCard {...others}>
             {React.Children.map(children, (child: any, index) => {
                 const childType = child.props._dashprivate_layout.type;
                 if (childType === "HoverCardTarget") {
+                    const { boxWrapperProps } = child.props;
+                    const boxProps = { w: "fit-content", ...boxWrapperProps };
                     return (
                         <MantineHoverCard.Target key={index}>
                             <Box {...boxProps}>{child}</Box>

diff --git a/src/ts/components/core/hovercard/HoverCardTarget.tsx b/src/ts/components/core/hovercard/HoverCardTarget.tsx
@@ -1,11 +1,11 @@
 import { BoxProps } from "props/box";
-import { DashBaseProps } from "props/dash";
-import { StylesApiProps } from "props/styles";
 import React from "react";
 
-interface Props extends BoxProps, DashBaseProps, StylesApiProps {
+interface Props {
     /** Content */
     children: React.ReactNode;
+    /** Target box wrapper props */
+    boxWrapperProps?: BoxProps;
 }
 
 /** HoverCardTarget */

diff --git a/src/ts/components/core/menu/Menu.tsx b/src/ts/components/core/menu/Menu.tsx
@@ -1,5 +1,4 @@
 import { Box, Menu as MantineMenu } from "@mantine/core";
-import { BoxProps } from "props/box";
 import { __PopoverProps } from "props/popover";
 import { StylesApiProps } from "props/styles";
 import React from "react";
@@ -32,8 +31,6 @@ interface Props extends __PopoverProps, StylesApiProps {
     clickOutsideEvents?: string[];
     /** Set the `tabindex` on all menu items. Defaults to -1 */
     menuItemTabIndex?: -1 | 0;
-    /** Target box wrapper props */
-    boxWrapperProps?: BoxProps;
     /** Unique ID to identify this component in Dash callbacks. */
     id?: string;
     /** Update props to trigger callbacks. */
@@ -42,14 +39,15 @@ interface Props extends __PopoverProps, StylesApiProps {
 
 /** Menu */
 const Menu = (props: Props) => {
-    const { children, setProps, boxWrapperProps, ...others } = props;
-    const boxProps = { w: "fit-content", ...boxWrapperProps };
+    const { children, setProps, ...others } = props;
 
     return (
         <MantineMenu {...others}>
             {React.Children.map(children, (child: any, index) => {
                 const childType = child.props._dashprivate_layout.type;
                 if (childType === "MenuTarget") {
+                    const { boxWrapperProps } = child.props;
+                    const boxProps = { w: "fit-content", ...boxWrapperProps };
                     return (
                         <MantineMenu.Target key={index}>
                             <Box {...boxProps}>{child}</Box>

diff --git a/src/ts/components/core/menu/MenuTarget.tsx b/src/ts/components/core/menu/MenuTarget.tsx
@@ -1,11 +1,11 @@
 import { BoxProps } from "props/box";
-import { DashBaseProps } from "props/dash";
-import { StylesApiProps } from "props/styles";
 import React from "react";
 
-interface Props extends BoxProps, DashBaseProps, StylesApiProps {
+interface Props {
     /** Content */
     children: React.ReactNode;
+    /** Target box wrapper props */
+    boxWrapperProps?: BoxProps;
 }
 
 /** MenuTarget */

diff --git a/src/ts/components/core/popover/Popover.tsx b/src/ts/components/core/popover/Popover.tsx
@@ -1,24 +1,21 @@
 import { Box, Popover as MantinePopover } from "@mantine/core";
-import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { PopoverProps } from "props/popover";
 import React from "react";
 
-interface Props extends PopoverProps, DashBaseProps {
-    /** Target box wrapper props */
-    boxWrapperProps?: BoxProps;
-}
+interface Props extends PopoverProps, DashBaseProps {}
 
 /** Popover */
 const Popover = (props: Props) => {
-    const { children, setProps, boxWrapperProps, ...others } = props;
-    const boxProps = { w: "fit-content", ...boxWrapperProps };
+    const { children, setProps, ...others } = props;
 
     return (
         <MantinePopover {...others}>
             {React.Children.map(children, (child: any, index) => {
                 const childType = child.props._dashprivate_layout.type;
                 if (childType === "PopoverTarget") {
+                    const { boxWrapperProps } = child.props;
+                    const boxProps = { w: "fit-content", ...boxWrapperProps };
                     return (
                         <MantinePopover.Target key={index}>
                             <Box {...boxProps}>{child}</Box>

diff --git a/src/ts/components/core/popover/PopoverTarget.tsx b/src/ts/components/core/popover/PopoverTarget.tsx
@@ -1,11 +1,11 @@
 import { BoxProps } from "props/box";
-import { DashBaseProps } from "props/dash";
-import { StylesApiProps } from "props/styles";
 import React from "react";
 
-interface Props extends BoxProps, DashBaseProps, StylesApiProps {
+interface Props {
     /** Content */
     children: React.ReactNode;
+    /** Target box wrapper props */
+    boxWrapperProps?: BoxProps;
 }
 
 /** PopoverTarget */

diff --git a/src/ts/components/extensions/codehighlight/CodeHighlightTabs.tsx b/src/ts/components/extensions/codehighlight/CodeHighlightTabs.tsx
@@ -3,6 +3,7 @@ import {
     CodeHighlightTabs as MantineCodeHighlightTabs,
 } from "@mantine/code-highlight";
 import "@mantine/code-highlight/styles.css";
+import { renderDashComponents } from "dash-extensions-js";
 import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
@@ -35,9 +36,17 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
 
 /** CodeHighlightTabs */
 const CodeHighlightTabs = (props: Props) => {
-    const { setProps, ...others } = props;
+    const { setProps, code, ...others } = props;
+    const renderedCode = [];
+    if (Array.isArray(code)) {
+        code.forEach((item, index) => {
+            renderedCode.push(renderDashComponents(item, ["icon"]));
+        });
+    } else {
+        renderedCode.push(renderDashComponents(code, ["icon"]));
+    }
 
-    return <MantineCodeHighlightTabs {...others} />;
+    return <MantineCodeHighlightTabs code={renderedCode} {...others} />;
 };
 
 CodeHighlightTabs.defaultProps = {};

diff --git a/src/ts/components/extensions/notifications/Notification.tsx b/src/ts/components/extensions/notifications/Notification.tsx
@@ -30,16 +30,16 @@ interface Props extends BoxProps, StylesApiProps, Omit<DashBaseProps, "id"> {
      *  number is auto close timeout in ms, overrides `autoClose` from `Notifications`
      * */
     autoClose?: boolean | number;
-    /** intent */
-    intent: "show" | "update" | "hide" | "clean" | "cleanQueue";
+    /** action */
+    action: "show" | "update" | "hide" | "clean" | "cleanQueue";
 }
 
 /** Notification */
 const Notification = (props: Props) => {
-    const { intent, setProps, ...others } = props;
+    const { action, setProps, ...others } = props;
 
     useEffect(() => {
-        switch (intent) {
+        switch (action) {
             case "show":
                 notifications.show(others);
                 break;

diff --git a/src/ts/components/extensions/nprogress/NavigationProgress.tsx b/src/ts/components/extensions/nprogress/NavigationProgress.tsx
@@ -2,8 +2,8 @@ import { nprogress } from "@mantine/nprogress";
 import { useEffect } from "react";
 
 interface Props {
-    /** intent */
-    intent:
+    /** action */
+    action:
         | "start"
         | "stop"
         | "increment"
@@ -17,18 +17,18 @@ interface Props {
 
 /** NavigationProgress */
 const NavigationProgress = (props: Props) => {
-    const { intent, value } = props;
+    const { action, value } = props;
 
     window["np"] = nprogress;
 
     useEffect(() => {
-        switch (intent) {
+        switch (action) {
             case "set":
                 nprogress.set(value);
                 break;
 
             default:
-                nprogress[intent]();
+                nprogress[action]();
                 break;
         }
     }, [props]);

diff --git a/src/ts/props/combobox.ts b/src/ts/props/combobox.ts
@@ -20,8 +20,6 @@ export interface ComboboxLikeProps {
     data?: ComboboxData;
     /** Controlled dropdown opened state */
     dropdownOpened?: boolean;
-    /** Uncontrolled dropdown initial opened state */
-    defaultDropdownOpened?: boolean;
     /** Determines whether the first option should be selected when value changes, `false` by default */
     selectFirstOptionOnChange?: boolean;
     /** Props passed down to `Combobox` component */