diff --git a/package.json b/package.json index a3b43c16..a414e13c 100644 --- 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 index a8f5fed3..e6de0058 100644 --- 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, 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 ( {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 ( {child} diff --git a/src/ts/components/core/hovercard/HoverCardTarget.tsx b/src/ts/components/core/hovercard/HoverCardTarget.tsx index 7b03563d..b2d4fcb0 100644 --- 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 index 66dbce8c..e89ca3aa 100644 --- 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 ( {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 ( {child} diff --git a/src/ts/components/core/menu/MenuTarget.tsx b/src/ts/components/core/menu/MenuTarget.tsx index a1810162..b64ea405 100644 --- 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 index c6ec5b55..39e3366b 100644 --- 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 ( {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 ( {child} diff --git a/src/ts/components/core/popover/PopoverTarget.tsx b/src/ts/components/core/popover/PopoverTarget.tsx index 88934932..d02c85e1 100644 --- 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 index 4968fbeb..6ccbb8ec 100644 --- 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 ; + return ; }; CodeHighlightTabs.defaultProps = {}; diff --git a/src/ts/components/extensions/notifications/Notification.tsx b/src/ts/components/extensions/notifications/Notification.tsx index 5c102186..e4d6bccd 100644 --- 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 { * 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 index 7c516e64..4889f008 100644 --- 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 index 4b585570..751f9658 100644 --- 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 */