@hitachivantara/uikit-react-pentaho 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{pentaho/src/Canvas → Canvas}/Toolbar/Toolbar.cjs +2 -2
- package/dist/esm/Canvas/BottomPanel/BottomPanel.js.map +1 -0
- package/dist/esm/Canvas/BottomPanel/BottomPanel.styles.js.map +1 -0
- package/dist/esm/Canvas/CanvasContext.js.map +1 -0
- package/dist/esm/Canvas/PanelTab/PanelTab.js.map +1 -0
- package/dist/esm/Canvas/PanelTab/PanelTab.styles.js.map +1 -0
- package/dist/esm/Canvas/PanelTabs/PanelTabs.js.map +1 -0
- package/dist/esm/Canvas/PanelTabs/PanelTabs.styles.js.map +1 -0
- package/dist/esm/Canvas/SidePanel/SidePanel.js.map +1 -0
- package/dist/esm/Canvas/SidePanel/SidePanel.styles.js.map +1 -0
- package/dist/esm/Canvas/SidePanel/useResizable.js.map +1 -0
- package/dist/esm/{pentaho/src/Canvas → Canvas}/Toolbar/Toolbar.js +1 -1
- package/dist/esm/Canvas/Toolbar/Toolbar.js.map +1 -0
- package/dist/esm/Canvas/Toolbar/Toolbar.styles.js.map +1 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabEditor.js.map +1 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.js.map +1 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js.map +1 -0
- package/package.json +3 -3
- package/dist/cjs/utils/src/utils/styles.cjs +0 -15
- package/dist/esm/pentaho/src/Canvas/BottomPanel/BottomPanel.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/BottomPanel/BottomPanel.styles.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/CanvasContext.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/PanelTab/PanelTab.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/PanelTab/PanelTab.styles.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/PanelTabs/PanelTabs.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/PanelTabs/PanelTabs.styles.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/SidePanel/SidePanel.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/SidePanel/SidePanel.styles.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/SidePanel/useResizable.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/Toolbar/Toolbar.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/Toolbar/Toolbar.styles.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/ToolbarTabs/ToolbarTabEditor.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/ToolbarTabs/ToolbarTabs.js.map +0 -1
- package/dist/esm/pentaho/src/Canvas/ToolbarTabs/ToolbarTabs.styles.js.map +0 -1
- package/dist/esm/utils/src/utils/styles.js +0 -15
- package/dist/esm/utils/src/utils/styles.js.map +0 -1
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/BottomPanel/BottomPanel.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/BottomPanel/BottomPanel.styles.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/CanvasContext.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/PanelTab/PanelTab.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/PanelTab/PanelTab.styles.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/PanelTabs/PanelTabs.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/PanelTabs/PanelTabs.styles.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/SidePanel/SidePanel.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/SidePanel/SidePanel.styles.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/SidePanel/useResizable.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/Toolbar/Toolbar.styles.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/ToolbarTabs/ToolbarTabEditor.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/ToolbarTabs/ToolbarTabs.cjs +0 -0
- /package/dist/cjs/{pentaho/src/Canvas → Canvas}/ToolbarTabs/ToolbarTabs.styles.cjs +0 -0
- /package/dist/cjs/{pentaho/src/index.cjs → index.cjs} +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/BottomPanel/BottomPanel.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/BottomPanel/BottomPanel.styles.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/CanvasContext.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/PanelTab/PanelTab.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/PanelTab/PanelTab.styles.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/PanelTabs/PanelTabs.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/PanelTabs/PanelTabs.styles.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/SidePanel/SidePanel.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/SidePanel/SidePanel.styles.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/SidePanel/useResizable.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/Toolbar/Toolbar.styles.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/ToolbarTabs/ToolbarTabEditor.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/ToolbarTabs/ToolbarTabs.js +0 -0
- /package/dist/esm/{pentaho/src/Canvas → Canvas}/ToolbarTabs/ToolbarTabs.styles.js +0 -0
- /package/dist/esm/{pentaho/src/index.js → index.js} +0 -0
- /package/dist/esm/{pentaho/src/index.js.map → index.js.map} +0 -0
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const styles = require("../../../../utils/src/utils/styles.cjs");
|
|
6
5
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
7
6
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
8
8
|
const CanvasContext = require("../CanvasContext.cjs");
|
|
9
9
|
const Toolbar_styles = require("./Toolbar.styles.cjs");
|
|
10
10
|
const DEFAULT_LABELS = {
|
|
@@ -33,7 +33,7 @@ const HvCanvasToolbar = react.forwardRef(
|
|
|
33
33
|
{
|
|
34
34
|
ref,
|
|
35
35
|
className: cx(classes.root, className),
|
|
36
|
-
style:
|
|
36
|
+
style: uikitReactUtils.mergeStyles(style, {
|
|
37
37
|
"--sidepanel-width": `${sidePanelWidth}px`
|
|
38
38
|
}),
|
|
39
39
|
...others,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomPanel.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n ExtractNames,\n HvActionGeneric,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvBaseProps,\n HvPanel,\n theme,\n useControlled,\n useDefaultProps,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./BottomPanel.styles\";\n\nexport { staticClasses as canvasBottomPanelClasses };\n\nexport type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasBottomPanelProps extends HvBaseProps {\n /** Open state of the bottom panel. */\n open?: boolean;\n /** Minimize state of the bottom panel tabs'. */\n minimize?: boolean;\n /** List of tabs visible on the panel. */\n tabs: {\n id: string | number;\n title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);\n }[];\n /** Id of the selected tab if it needs to be controlled. */\n selectedTabId?: string | number;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | number | null,\n ) => void;\n /**\n * Actions to be rendered in the left side of a tab.\n * If more than one action is provided, a dropdown menu will be used.\n * These actions are not shown when the tab content is overflowing.\n */\n leftActions?: HvActionsGenericProps[\"actions\"];\n /**\n * Actions to be rendered in the right side of a tab.\n * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.\n * These actions are not shown when the tab content is overflowing.\n */\n rightActions?: HvActionsGenericProps[\"actions\"];\n /**\n * Actions to be rendered in the right side of a tab when the tab content is overflowing.\n * These actions will replace both `leftActions` and `rightActions`.\n */\n overflowActions?: HvActionsGenericProps[\"actions\"];\n /** Callback triggered when an action is clicked. */\n onAction?: (\n event: React.SyntheticEvent,\n action: HvActionGeneric,\n tabId: string | number,\n ) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasBottomPanelClasses;\n}\n\n/**\n * A bottom panel component to use in a canvas context.\n */\nexport const HvCanvasBottomPanel = forwardRef<\n HTMLDivElement,\n HvCanvasBottomPanelProps\n>((props, ref) => {\n const {\n id: idProp,\n className,\n children,\n open,\n tabs,\n minimize,\n leftActions,\n rightActions,\n overflowActions,\n selectedTabId: selectedTabIdProp,\n classes: classesProp,\n onTabChange,\n onAction,\n ...others\n } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const canvasContext = useCanvasContext();\n const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n const id = useUniqueId(idProp);\n\n // Tab resize detector: to position tab actions and set the panel top right border radius\n const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n handleHeight: false,\n });\n // Tab panel resize detector: to set the panel top right border radius\n const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({\n handleHeight: false,\n });\n\n // Left actions resize detector: to position tab title according with actions\n const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(\n {\n handleHeight: false,\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n },\n );\n // Right actions resize detector: to position tab title according with actions\n const { width: rightActionWidth = 32, ref: rightActionRef } =\n useResizeDetector({\n handleHeight: false,\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n });\n\n const overflowing = useMemo(() => {\n const availableWidth =\n tabWidth -\n (leftActions ? leftActionWidth : 0) -\n (rightActions ? rightActionWidth : 0);\n\n return availableWidth < 60;\n }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);\n\n const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n selectedTabIdProp,\n tabs[0].id,\n );\n\n const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n tabId,\n ) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <div\n id={id}\n ref={ref}\n className={cx(\n classes.root,\n {\n [classes.closed]: !open,\n [classes.minimized]: minimize,\n [classes.multipleTabs]: tabs.length > 1,\n [classes.overflowing]: overflowing,\n },\n className,\n )}\n style={{\n width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,\n right: theme.space.sm,\n }}\n {...others}\n >\n <div className={classes.tabsRoot}>\n <HvCanvasPanelTabs\n style={{\n // @ts-ignore\n \"--left-actions-width\":\n overflowing || !leftActions\n ? theme.space.sm\n : `calc(${leftActionWidth}px + ${theme.space.xs})`,\n \"--right-actions-width\":\n !rightActions || (overflowing && !overflowActions)\n ? theme.space.sm\n : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`,\n }}\n onChange={handleTabChange}\n value={selectedTab}\n >\n {tabs.map((tab, index) => (\n <HvCanvasPanelTab\n ref={index === 0 ? tabRef : undefined}\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n className={classes.tab}\n >\n <div className={classes.tabTitle}>\n {typeof tab.title === \"function\"\n ? tab.title(overflowing)\n : tab.title}\n </div>\n </HvCanvasPanelTab>\n ))}\n </HvCanvasPanelTabs>\n {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n {leftActions || rightActions || overflowActions\n ? tabs.map((tab, index) => {\n const btnsDisabled = selectedTab !== tab.id && !minimize;\n return (\n <div\n key={tab.id}\n style={{\n // @ts-ignore\n \"--tab-width\": `${tabWidth}px`,\n \"--right\": `calc((${index} + 1) * var(--tab-width))`,\n \"--left\": `calc(${index} * var(--tab-width))`,\n }}\n >\n {leftActions && !overflowing && (\n <div\n ref={leftActionRef}\n className={cx(classes.leftActions, {\n [classes.actionsDisabled]: btnsDisabled,\n })}\n >\n <HvActionsGeneric\n maxVisibleActions={1}\n actions={leftActions}\n disabled={btnsDisabled}\n onAction={(event, action) =>\n onAction?.(event, action, tab.id)\n }\n variant=\"secondaryGhost\"\n iconOnly\n />\n </div>\n )}\n {rightActions && !overflowing && (\n <div\n ref={rightActionRef}\n className={cx(classes.rightActions, {\n [classes.actionsDisabled]: btnsDisabled,\n })}\n >\n <HvActionsGeneric\n maxVisibleActions={2}\n actions={rightActions}\n disabled={btnsDisabled}\n onAction={(event, action) =>\n onAction?.(event, action, tab.id)\n }\n variant=\"secondaryGhost\"\n iconOnly\n />\n </div>\n )}\n {overflowActions && overflowing && (\n <div\n className={cx(classes.rightActions, {\n [classes.actionsDisabled]: btnsDisabled,\n })}\n >\n <HvActionsGeneric\n maxVisibleActions={0}\n actions={overflowActions}\n disabled={btnsDisabled}\n onAction={(event, action) =>\n onAction?.(event, action, tab.id)\n }\n variant=\"secondaryGhost\"\n iconOnly\n />\n </div>\n )}\n </div>\n );\n })\n : null}\n </div>\n <HvPanel\n ref={panelRef}\n role=\"tabpanel\"\n aria-labelledby={`${id}-${selectedTab}`}\n className={classes.content}\n style={{\n // @ts-ignore\n \"--right-border-radius\":\n tabWidth * tabs.length >= panelWidth ? \"0px\" : \"16px\",\n }}\n >\n {children}\n </HvPanel>\n </div>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomPanel.styles.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.styles.tsx"],"sourcesContent":["import {\n buttonClasses,\n createClasses,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasBottomPanel\",\n {\n root: {\n position: \"absolute\",\n display: \"flex\",\n flexDirection: \"column\",\n right: 0,\n bottom: 0,\n width: \"100%\",\n maxHeight: \"500px\",\n visibility: \"visible\",\n transition: \"visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease\",\n },\n closed: {\n maxHeight: 0,\n visibility: \"hidden\",\n },\n minimized: {\n \"& $content\": {\n display: \"none\",\n },\n \"& $tab\": {\n backgroundColor: theme.colors.atmo1,\n ...theme.typography.label,\n },\n },\n multipleTabs: {\n \"& $tab\": { maxWidth: \"288px\" },\n \"& $rightActions\": {\n right: `calc(100% - var(--right) + ${theme.space.xs})`,\n },\n },\n overflowing: {},\n tab: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n width: \"100%\",\n },\n tabTitle: {\n display: \"flex\",\n width: \"100%\",\n padding: theme.space.sm,\n paddingLeft: \"var(--left-actions-width)\",\n paddingRight: \"var(--right-actions-width)\",\n },\n tabsRoot: {\n position: \"relative\",\n },\n leftActions: {\n position: \"absolute\",\n left: `calc(var(--left) + ${theme.space.xs})`,\n top: 8,\n },\n rightActions: {\n position: \"absolute\",\n right: theme.space.xs,\n top: 8,\n },\n actionsDisabled: {\n pointerEvents: \"none\",\n [`&& .${buttonClasses.disabled}`]: {\n pointerEvents: \"none\",\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \":hover\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n },\n content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IAEvD;AAAA,IACA,aAAa,CAAC;AAAA,IACd,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,iBAAiB;AAAA,MACf,eAAe;AAAA,MACf,CAAC,OAAO,cAAc,QAAQ,EAAE,GAAG;AAAA,QACjC,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,QAAA;AAAA,MACf;AAAA,IAEJ;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAAA;AAElE;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CanvasContext.js","sources":["../../../src/Canvas/CanvasContext.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\ntype HvCanvasContextValue = {\n sidePanelOpen: boolean;\n handleSidePanelOpen: (open: boolean) => void;\n sidePanelWidth: number;\n handleSidePanelWidth: (width: number) => void;\n};\n\nexport const HvCanvasContext = createContext<HvCanvasContextValue | null>(null);\n\nexport const HvCanvasProvider = ({\n children,\n}: {\n children: React.ReactNode;\n onSidePanelResize?: (width: number) => void;\n}) => {\n const [sidePanelOpen, setSidePanelOpen] = useState(false);\n const [width, setWidth] = useState(0);\n\n const handleSidePanelWidth = useCallback((newWidth: number) => {\n setWidth(newWidth);\n }, []);\n\n const handleSidePanelOpen = useCallback((open: boolean) => {\n setSidePanelOpen(open);\n }, []);\n\n const value = useMemo(\n () => ({\n sidePanelOpen,\n handleSidePanelOpen,\n sidePanelWidth: sidePanelOpen ? width : 0,\n handleSidePanelWidth,\n }),\n [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth],\n );\n\n return (\n <HvCanvasContext.Provider value={value}>\n {children}\n </HvCanvasContext.Provider>\n );\n};\n\nexport const useCanvasContext = () => {\n return useContext(HvCanvasContext);\n};\n"],"names":[],"mappings":";;AAea,MAAA,kBAAkB,cAA2C,IAAI;AAEvE,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AACF,MAGM;AACJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAE9B,QAAA,uBAAuB,YAAY,CAAC,aAAqB;AAC7D,aAAS,QAAQ;AAAA,EACnB,GAAG,EAAE;AAEC,QAAA,sBAAsB,YAAY,CAAC,SAAkB;AACzD,qBAAiB,IAAI;AAAA,EACvB,GAAG,EAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB,gBAAgB,QAAQ;AAAA,MACxC;AAAA,IAAA;AAAA,IAEF,CAAC,eAAe,qBAAqB,OAAO,oBAAoB;AAAA,EAClE;AAEA,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACvB,SACH,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,SAAO,WAAW,eAAe;AACnC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelTab.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tab, TabProps } from \"@mui/base/Tab\";\nimport {\n ExtractNames,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTab.styles\";\n\nexport { staticClasses as canvasPanelTabClasses };\n\nexport type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabProps extends TabProps {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasPanelTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasPanelTabs`.\n */\nexport const HvCanvasPanelTab = forwardRef<\n HTMLButtonElement,\n HvCanvasPanelTabProps\n>((props, ref) => {\n const {\n classes: classesProp,\n className,\n ...others\n } = useDefaultProps(\"HvCanvasPanelTab\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return <Tab ref={ref} className={cx(classes.root, className)} {...others} />;\n});\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAEvC,SAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAC5E,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelTab.styles.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n createClasses,\n outlineStyles,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanelTab\", {\n root: {\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flex: 1,\n borderRadius: \"16px 16px 0 0\",\n backgroundColor: theme.colors.atmo2,\n color: theme.colors.secondary_60,\n overflow: \"hidden\",\n width: \"100%\",\n boxShadow: \"0px -2px 8px 0px #4141410F\",\n paddingInlineEnd: 0,\n paddingInlineStart: 0,\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n \"&:hover\": {\n cursor: \"pointer\",\n },\n \"&:focus\": {\n backgroundColor: theme.colors.atmo1,\n },\n [`&.${tabClasses.selected}`]: {\n backgroundColor: theme.colors.atmo1,\n ...theme.typography.label,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":[],"mappings":";;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelTabs.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n ExtractNames,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTabs.styles\";\n\nexport { staticClasses as canvasPanelTabsClasses };\n\nexport type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabsProps extends TabsProps {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasPanelTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasPanelTabs = forwardRef<\n HTMLDivElement,\n HvCanvasPanelTabsProps\n>((props, ref) => {\n const {\n selectionFollowsFocus = true,\n children,\n className,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasPanelTabs\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <Tabs\n ref={ref}\n className={cx(classes.root, className)}\n selectionFollowsFocus={selectionFollowsFocus}\n {...others}\n >\n <TabsList className={classes.list}>{children}</TabsList>\n </Tabs>\n );\n});\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,SAAS,CAAA;AAAA,IAAA;AAAA,EAC/C;AAEJ,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelTabs.styles.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasPanelTabs\",\n {\n root: {},\n list: {\n display: \"flex\",\n width: \"100%\",\n height: 48,\n },\n },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvPanel,\n useControlled,\n useDefaultProps,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n open: \"Open\",\n close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\" | \"onResize\"> {\n /** When controlled, defines id the panel is open or not. */\n open?: boolean;\n /** When uncontrolled, defines the initial state of the panel. */\n defaultOpen?: boolean;\n /** List of tabs visible on the panel. */\n tabs?: {\n id: string | number;\n content: React.ReactNode;\n }[];\n /** Id of the selected tab if it needs to be controlled. */\n tab?: string | number;\n /** Callback triggered whenever the panel toggles. */\n onToggle?: (\n event: React.MouseEvent | React.KeyboardEvent,\n open: boolean,\n ) => void;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | number | null,\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** The minimum width of the side panel. */\n minWidth?: number;\n /** The maximum width of the side panel. */\n maxWidth?: number;\n /** The initial width of the side panel. */\n initialWidth?: number;\n /** Callback triggered when the panel width changes. */\n onResize?: (width: number) => void;\n /** The content that will be rendered within the canvas panel. */\n children?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n HTMLDivElement,\n HvCanvasSidePanelProps\n>((props, ref) => {\n const {\n id: idProp,\n tab: tabProp,\n open: openProp,\n defaultOpen = false,\n tabs,\n onToggle,\n onTabChange,\n labels: labelsProp,\n minWidth = 100,\n maxWidth = 500,\n initialWidth = 320,\n onResize,\n className,\n children,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n const id = useUniqueId(idProp);\n\n const canvasContext = useCanvasContext();\n const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;\n const sidePanelOpen = canvasContext?.sidePanelOpen;\n const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n tabProp,\n tabs?.[0]?.id ?? \"none\",\n );\n\n useEffect(() => {\n handleSidePanelWidth?.(initialWidth);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialWidth]);\n\n const updateWidth = (width: number) => {\n handleSidePanelWidth?.(width);\n onResize?.(width);\n };\n\n const { width, isDragging, getContainerProps, getSeparatorProps } =\n useResizable({\n ref,\n initialWidth,\n minWidth,\n maxWidth,\n onResize: updateWidth,\n });\n\n const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\n handleSidePanelOpen?.(!sidePanelOpen);\n onToggle?.(event, !open);\n };\n\n const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n tabId,\n ) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <>\n <div\n id={id}\n className={cx(classes.root, className, {\n [classes.open]: open,\n [classes.close]: !open,\n })}\n {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\n {...others}\n >\n {tabs && (\n <HvCanvasPanelTabs\n className={classes.tabs}\n value={selectedTab}\n onChange={handleTabChange}\n >\n {tabs.map((tab) => (\n <HvCanvasPanelTab\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n >\n {tab.content}\n </HvCanvasPanelTab>\n ))}\n </HvCanvasPanelTabs>\n )}\n <HvPanel\n role={tabs ? \"tabpanel\" : undefined}\n aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n className={classes.content}\n >\n {children}\n </HvPanel>\n </div>\n <div {...getSeparatorProps()} />\n <HvIconButton\n variant=\"primaryGhost\"\n title={open ? labels.close : labels.open}\n onClick={handleTogglePanel}\n className={cx(classes.handle, {\n [classes.handleOpen]: open,\n [classes.handleClose]: !open,\n })}\n style={{\n left: open ? width : 0,\n transition: isDragging ? \"none\" : undefined,\n }}\n >\n <End rotate={open} />\n </HvIconButton>\n </>\n );\n});\n"],"names":["width"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasSidePanel\",\n {\n root: {\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n boxShadow,\n backgroundColor: \"transparent\",\n transition: \"visibility 0.3s ease, width 0.3s ease\",\n overflow: \"hidden\",\n \"&$open\": {\n width: 320,\n visibility: \"visible\",\n },\n \"&$close\": {\n width: 0,\n visibility: \"hidden\",\n },\n },\n tabs: {},\n content: {\n height: \"100%\",\n },\n handle: {\n height: 44,\n width: 44,\n display: \"flex\",\n justifyContent: \"center\",\n boxShadow,\n backgroundColor: theme.colors.atmo1,\n borderRadius: \"0px 16px 16px 0px\",\n position: \"absolute\",\n transition: \"left 0.3s ease\",\n top: \"calc(50% - 44px)\", // subtract handle's full height\n \"&$handleOpen\": {\n left: 320,\n },\n \"&$handleClose\": {\n left: 0,\n },\n },\n open: {},\n close: {},\n handleOpen: {},\n handleClose: {},\n },\n);\n"],"names":[],"mappings":";AAEA,MAAM,YAAY,oBAAoB,MAAM,MAAM,aAAa,KAAK,CAAC;AAExD,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAA;AAAA,EAAC;AAElB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResizable.js","sources":["../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\ninterface ContainerProps {\n ref: any;\n style: React.CSSProperties;\n}\n\ninterface SeparatorProps {\n style: React.CSSProperties;\n onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n onMouseLeave?: () => void;\n onMouseDown?: () => void;\n role: string;\n}\n\ninterface ResizableProps {\n ref: any;\n initialWidth: number;\n minWidth: number;\n maxWidth: number;\n onResize?: (width: number) => void;\n}\n\nexport const useResizable = (\n resizableOptions: ResizableProps,\n): {\n width: number;\n isDragging: boolean;\n getContainerProps: (overrides: any) => ContainerProps;\n getSeparatorProps: () => SeparatorProps;\n} => {\n const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;\n\n const [width, setWidth] = useState(initialWidth);\n const [isHover, setIsHover] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n\n const panelRef = useRef<HTMLDivElement>(null);\n\n const forkedRef = useForkRef(ref, panelRef);\n\n const mouseMove = (event: MouseEvent) => {\n if (panelRef.current) {\n const rect = panelRef.current.getBoundingClientRect();\n const newWidth = event.clientX - rect.left;\n if (newWidth >= minWidth && newWidth <= maxWidth) {\n setWidth(newWidth);\n onResize?.(newWidth);\n }\n }\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (panelRef.current) {\n const rect = panelRef.current.getBoundingClientRect();\n const isHoverBorder =\n event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;\n setIsHover(isHoverBorder);\n }\n };\n\n const handleMouseUp = () => {\n if (!panelRef.current) return;\n\n panelRef.current.style.userSelect = \"\";\n panelRef.current?.parentElement?.removeEventListener(\n \"mousemove\",\n mouseMove,\n );\n panelRef.current?.parentElement?.removeEventListener(\n \"mouseup\",\n handleMouseUp,\n );\n setIsDragging(false);\n };\n\n const startResizing = () => {\n if (!panelRef.current) return;\n\n panelRef.current.style.userSelect = \"none\";\n panelRef.current.parentElement?.addEventListener(\"mousemove\", mouseMove);\n panelRef.current.parentElement?.addEventListener(\"mouseup\", handleMouseUp);\n setIsDragging(true);\n };\n\n const getContainerProps = (\n overrides: Partial<ContainerProps> = {},\n ): ContainerProps => ({\n ref: forkedRef,\n style: {\n width,\n transition: isDragging ? \"none\" : undefined,\n ...overrides.style,\n },\n });\n\n const getSeparatorProps = (\n overrides: Partial<SeparatorProps> = {},\n ): SeparatorProps => ({\n style: {\n left: width,\n position: \"absolute\",\n top: 0,\n bottom: 0,\n width: 5,\n cursor: \"col-resize\",\n ...overrides.style,\n },\n onMouseMove: handleMouseMove,\n onMouseLeave: () => setIsHover(false),\n onMouseDown: () => {\n if (isHover) startResizing();\n },\n role: \"separator\",\n });\n\n return { width, isDragging, getContainerProps, getSeparatorProps };\n};\n"],"names":[],"mappings":";;AAwBa,MAAA,eAAe,CAC1B,qBAMG;AACH,QAAM,EAAE,KAAK,cAAc,UAAU,UAAU,aAAa;AAE5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAE5C,QAAA,WAAW,OAAuB,IAAI;AAEtC,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,YAAY,CAAC,UAAsB;AACvC,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,WAAW,MAAM,UAAU,KAAK;AAClC,UAAA,YAAY,YAAY,YAAY,UAAU;AAChD,iBAAS,QAAQ;AACjB,mBAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAEJ;AAEM,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,gBACJ,MAAM,WAAW,KAAK,QAAQ,KAAK,MAAM,WAAW,KAAK,QAAQ;AACnE,iBAAW,aAAa;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,QAAQ,eAAe,iBAAiB,aAAa,SAAS;AACvE,aAAS,QAAQ,eAAe,iBAAiB,WAAW,aAAa;AACzE,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,YAAY,aAAa,SAAS;AAAA,MAClC,GAAG,UAAU;AAAA,IAAA;AAAA,EACf;AAGF,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,UAAU;AAAA,IACf;AAAA,IACA,aAAa;AAAA,IACb,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,aAAa,MAAM;AACjB,UAAI,QAAuB,eAAA;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAY,mBAAmB,kBAAkB;AACnE;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import { mergeStyles } from "../../../../utils/src/utils/styles.js";
|
|
4
3
|
import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
|
|
5
4
|
import { Previous } from "@hitachivantara/uikit-react-icons";
|
|
5
|
+
import { mergeStyles } from "@hitachivantara/uikit-react-utils";
|
|
6
6
|
import { useCanvasContext } from "../CanvasContext.js";
|
|
7
7
|
import { useClasses } from "./Toolbar.styles.js";
|
|
8
8
|
import { staticClasses } from "./Toolbar.styles.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvIconButtonProps,\n HvTypography,\n useDefaultProps,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { staticClasses, useClasses } from \"./Toolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n extends HvBaseProps<HTMLDivElement, \"title\"> {\n /** Text to display in the component. */\n title: React.ReactNode;\n /** Fully customized button or false for when the back button should not be rendered. */\n backButton?: React.ReactNode;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /* The content that will be rendered within the toolbar. */\n children?: React.ReactNode;\n /** Props for the default back button. */\n backButtonProps?: Partial<HvIconButtonProps>;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = forwardRef<HTMLDivElement, HvCanvasToolbarProps>(\n (props, ref) => {\n const {\n title: titleProp,\n backButton,\n labels: labelsProp,\n className,\n style,\n children,\n backButtonProps,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const canvasContext = useCanvasContext();\n const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n const title =\n typeof titleProp === \"string\" ? (\n <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n ) : (\n titleProp\n );\n\n return (\n <div\n ref={ref}\n className={cx(classes.root, className)}\n style={mergeStyles(style, {\n \"--sidepanel-width\": `${sidePanelWidth}px`,\n })}\n {...others}\n >\n <div className={classes.back}>\n {backButton ?? (\n <HvIconButton\n title={labels.back}\n variant=\"primaryGhost\"\n {...backButtonProps}\n >\n <Previous />\n </HvIconButton>\n )}\n </div>\n <div className={classes.title}>{title}</div>\n {children && <div className={classes.actions}>{children}</div>}\n </div>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,gBAAgB,iBAAiB;AACjC,UAAA,iBAAiB,eAAe,kBAAkB;AAElD,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,OAAO,YAAY,OAAO;AAAA,UACxB,qBAAqB,GAAG,cAAc;AAAA,QAAA,CACvC;AAAA,QACA,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACd,SAAQ;AAAA,cACP,GAAG;AAAA,cAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,GAGhB;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toolbar.styles.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n root: {\n width: `calc(100% - var(--sidepanel-width) - 2 * ${theme.space.sm})`,\n height: 54,\n display: \"flex\",\n alignItems: \"center\",\n borderRadius: theme.radii.full,\n backgroundColor: theme.colors.atmo1,\n position: \"absolute\",\n right: theme.space.sm,\n top: 0,\n transition: \"width 0.3s ease\",\n },\n back: {\n borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n minWidth: 68,\n backgroundColor: theme.colors.containerBackgroundHover,\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n title: {\n display: \"flex\",\n alignItems: \"center\",\n padding: theme.spacing(0, \"md\"),\n height: \"100%\",\n flexGrow: 1,\n },\n actions: {\n display: \"flex\",\n flexWrap: \"nowrap\",\n overflow: \"auto\",\n paddingRight: theme.space.md,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO,4CAA4C,MAAM,MAAM,EAAE;AAAA,IACjE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO,MAAM,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAAA;AAE9B,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarTabEditor.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n createClasses,\n ExtractNames,\n HvTypography,\n HvTypographyProps,\n isKey,\n theme,\n useControlled,\n useEnhancedEffect,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\n// TODO - Extract component in the future: when we have more specs and/or is used in other components\n\nconst { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs-editor\",\n {\n root: {\n position: \"relative\",\n display: \"flex\",\n width: \"100%\",\n overflow: \"hidden\",\n \"&:has($label:hover:not($edit))\": {\n color: theme.colors.secondary_80,\n \"& $editIcon\": { visibility: \"visible\" },\n },\n },\n edit: {\n color: theme.colors.secondary_80,\n borderColor: \"currentColor\",\n backgroundColor: theme.colors.atmo1,\n cursor: \"text\",\n },\n label: {\n width: \"100%\",\n boxSizing: \"border-box\",\n border: \"1px solid transparent\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\", 0, \"xs\"),\n textAlign: \"start\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n outline: \"none\",\n \"&:not($edit)\": {\n textOverflow: \"ellipsis\",\n },\n \"&:hover:not($edit)\": {\n color: theme.colors.secondary_80,\n borderColor: theme.colors.containerBackgroundHover,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n editIcon: {\n position: \"absolute\",\n right: theme.spacing(0.5),\n top: 4,\n width: 16,\n height: 16,\n visibility: \"hidden\",\n pointerEvents: \"none\",\n },\n },\n);\n\nexport { staticClasses as toolbarTabEditorClasses };\n\ntype ToolbarTabEditorClasses = ExtractNames<typeof useClasses>;\n\ninterface ToolbarTabEditorProps\n extends Omit<HvTypographyProps, \"classes\" | \"onBlur\" | \"onChange\"> {\n /** The value of the component. When used, the component has to be controlled. */\n value?: string;\n /** The default value of the component. */\n defaultValue?: string;\n /** Whether the editor is in edit mode. When used, the prop has to be controlled. */\n edit?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: ToolbarTabEditorClasses;\n /** Called the field is blurred. */\n onBlur?: (\n event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /** Called the value changes. */\n onChange?: (\n event: React.FormEvent<Element> | React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /** Called the `edit` prop changes. */\n onEditChange?: (value: boolean) => void;\n}\n\nconst sanitize = (value: string) =>\n value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n\nexport const ToolbarTabEditor = ({\n id,\n className,\n edit: editProp,\n value: valueProp,\n defaultValue: defaultValueProp = \"\",\n classes: classesProp,\n onInput: onInputProp,\n onClick: onClickProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n onChange: onChangeProp,\n onEditChange: onEditChangeProp,\n ...others\n}: ToolbarTabEditorProps) => {\n const { cx, classes } = useClasses(classesProp);\n\n const contentEditableRef = useRef<HTMLSpanElement>(null);\n\n // Sanitize content\n const [value, setValue] = useControlled(\n valueProp ? sanitize(valueProp) : valueProp,\n defaultValueProp ? sanitize(defaultValueProp) : defaultValueProp,\n );\n const [cachedValue, setCachedValue] = useState(value);\n const [isEditing, setIsEditing] = useControlled(editProp, false);\n\n const moveCursorToEnd = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n const range = document.createRange();\n const selection = window.getSelection();\n range.selectNodeContents(element);\n range.collapse(false);\n selection?.removeAllRanges();\n selection?.addRange(range);\n element.scrollLeft = element.scrollWidth;\n };\n\n const scrollContentToStart = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n element.scrollLeft = 0;\n };\n\n const changeEdit = (edit: boolean) => {\n setIsEditing(edit);\n onEditChangeProp?.(edit);\n };\n\n // Update cursor when value updates: otherwise it goes to the start\n useEnhancedEffect(() => {\n if (isEditing) moveCursorToEnd();\n }, [isEditing, value]);\n\n const handleInput: HvTypographyProps[\"onInput\"] = (event) => {\n // Sanitize content\n const newValue = sanitize((event.target as any).textContent) || \"\";\n setValue(newValue);\n onInputProp?.(event);\n onChangeProp?.(event, newValue);\n };\n\n const handleClick: HvTypographyProps[\"onClick\"] = (event) => {\n setCachedValue(value);\n changeEdit(true);\n onClickProp?.(event);\n };\n\n const handleBlur = (\n event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n ) => {\n changeEdit(false);\n scrollContentToStart();\n\n // Never leave the field empty\n const newValue = value.trim() || cachedValue;\n setValue(newValue);\n\n onBlurProp?.(event, newValue);\n };\n\n const handleKeyDown: HvTypographyProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Enter\")) {\n // Blur field\n handleBlur(event);\n } else if (isKey(event, \"Esc\")) {\n changeEdit(false);\n\n // Cancel editing\n setValue(cachedValue);\n onChangeProp?.(event, cachedValue);\n }\n onKeyDownProp?.(event);\n };\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvTypography\n ref={contentEditableRef}\n contentEditable={isEditing}\n className={cx(classes.label, { [classes.edit]: isEditing })}\n variant=\"label\"\n component=\"span\"\n onInput={handleInput}\n onClick={handleClick}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // Using children is unstable in React for contentEditable so the value is rendered through dangerouslySetInnerHTML\n dangerouslySetInnerHTML={{\n __html: value,\n }}\n {...others}\n />\n <Edit className={classes.editIcon} iconSize=\"XS\" />\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvButtonProps,\n HvDropDownMenu,\n HvOverflowTooltip,\n isKey,\n uniqueId,\n useControlled,\n useDefaultProps,\n useForkRef,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n AddAlt,\n CloseXS,\n MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { clamp } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { ToolbarTabEditor } from \"./ToolbarTabEditor\";\nimport {\n DROPDOWN_MENU_WIDTH,\n MAX_TAB_WIDTH,\n MIN_TAB_WIDTH,\n staticClasses,\n useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n create: \"Create new\",\n undefined: \"Undefined\",\n dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n id: string;\n label: string;\n icon?: React.ReactNode;\n /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */\n fixed?: boolean;\n}\n\nexport interface HvCanvasToolbarTabsProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /** When controlled, defines the tabs. */\n tabs?: ToolbarTabsTab[];\n /** When uncontrolled, defines the initial tabs. */\n defaultTabs?: ToolbarTabsTab[];\n /** Id of the selected tab if it needs to be controlled. */\n selectedTabId?: string;\n /** Defines the icon to be placed before the label when a new tab is created through the \"Create new\" button. If not defined, no icon is used. */\n icon?: React.ReactNode;\n /** Whether the tabs are editable or not. Default to `false`. */\n disableTabEdit?: boolean;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | null,\n ) => void;\n /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n onChange?: (\n event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n tabs: ToolbarTabsTab[],\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasToolbarTabsClasses;\n /** Whether the \"Create new\" button, which enables to create new tabs, is hidden. Defaults to `false`. */\n hideCreateNew?: boolean;\n}\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n HTMLDivElement,\n HvCanvasToolbarTabsProps\n>((props, ref) => {\n const {\n children,\n className,\n selectedTabId: selectedTabIdProp,\n icon: iconProp,\n disableTabEdit = false,\n hideCreateNew = false,\n tabs: tabsProp,\n defaultTabs: defaultTabsProp = [],\n labels: labelsProp,\n classes: classesProp,\n onTabChange: onTabChangeProp,\n onChange: onChangeProp,\n ...others\n } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n // Actions resize detector: to know when to use the dropdown menu\n const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n handleHeight: false,\n });\n\n // Root resize detector: to know when to use the dropdown menu\n const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n handleHeight: false,\n });\n\n const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n const [selectedTab, setSelectedTab] = useControlled<string | null>(\n selectedTabIdProp,\n tabs?.[0]?.id ?? \"none\",\n );\n const [isEditing, setIsEditing] = useState(false);\n\n const rootForkedRef = useForkRef(ref, rootRef);\n\n const handleChangeTabs = (\n event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n newTabs: ToolbarTabsTab[],\n ) => {\n setTabs(newTabs);\n onChangeProp?.(event, newTabs);\n };\n\n const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n value,\n ) => {\n setSelectedTab(String(value));\n onTabChangeProp?.(event, String(value));\n };\n\n const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n const newTabs: ToolbarTabsTab[] = [...tabs];\n const newTab: ToolbarTabsTab = {\n id: uniqueId(),\n label: `${labels.undefined} ${newTabs.length + 1}`,\n icon: iconProp,\n };\n newTabs.push(newTab);\n handleChangeSelectedTab(event, newTab.id);\n handleChangeTabs?.(event, newTabs);\n };\n\n const handleEdit = (\n event: React.FormEvent<Element>,\n value: string,\n tabId: string,\n ) =>\n handleChangeTabs(\n event,\n tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n );\n\n const handleDeleteTab = (event: any, tabId: string) => {\n const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n if (tabId === selectedTab) {\n const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n }\n\n handleChangeTabs(event, newTabs);\n };\n\n const handleKeyDownTab = (\n event: React.KeyboardEvent,\n tabId: string,\n removable: boolean,\n ) => {\n if (removable && (isKey(event, \"Delete\") || isKey(event, \"Backspace\"))) {\n handleDeleteTab(event, tabId);\n\n // We don't want the click to also select the tab\n event.stopPropagation();\n } else if (isKey(event, \"Enter\")) {\n // Activate edit label mode\n setIsEditing(true);\n }\n };\n\n const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {\n let availableWidth = rootWidth - actionsWidth;\n let calculatedTabWidth = availableWidth / tabs.length;\n let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n // Overflowing\n if (calculatedTabWidth < MIN_TAB_WIDTH) {\n availableWidth -= DROPDOWN_MENU_WIDTH;\n const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);\n calculatedTabWidth = availableWidth / visibleCount;\n clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n const temporaryHiddenTabs = tabs.slice(visibleCount);\n const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n (tab) => tab.id === selectedTab,\n );\n const excludedTabIndex = visibleCount - 1;\n const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n if (shouldShuffle) {\n return {\n tabWidth: clamped,\n visibleTabs: [\n ...tabs.slice(0, excludedTabIndex),\n temporaryHiddenTabs[selectedTabHiddenIndex],\n ].filter((tab) => tab),\n hiddenTabs: [\n tabs[excludedTabIndex],\n ...temporaryHiddenTabs.filter(\n (tab, i) => i !== selectedTabHiddenIndex,\n ),\n ].filter((tab) => tab),\n };\n }\n\n return {\n tabWidth: clamped,\n visibleTabs: tabs.slice(0, visibleCount),\n hiddenTabs: temporaryHiddenTabs,\n };\n }\n\n return {\n tabWidth: clamped,\n visibleTabs: tabs,\n hiddenTabs: [],\n };\n }, [actionsWidth, rootWidth, selectedTab, tabs]);\n\n return (\n <div\n ref={rootForkedRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <div className={classes.tabsContainer}>\n {visibleTabs.length > 0 && (\n <HvCanvasPanelTabs\n classes={{ list: classes.tabsList }}\n value={selectedTab}\n onChange={handleChangeSelectedTab}\n >\n {visibleTabs.map((tab, index) => {\n const btnSelected = selectedTab === tab.id;\n const removable = !tab.fixed;\n return (\n <HvCanvasPanelTab\n style={{\n width: tabWidth,\n }}\n key={tab.id}\n id={String(tab.id)}\n className={classes.tab}\n value={tab.id}\n onKeyDown={(event) =>\n handleKeyDownTab(event, tab.id, removable)\n }\n >\n <div className={classes.tabContent}>\n {tab.icon && (\n <div className={classes.tabIconContainer}>{tab.icon}</div>\n )}\n {!btnSelected || disableTabEdit ? (\n <HvOverflowTooltip\n classes={{\n tooltipAnchor: classes.tabLabel,\n }}\n data={tab.label}\n />\n ) : (\n <ToolbarTabEditor\n classes={{\n label: cx(classes.tabLabel, classes.tabLabelEditor),\n }}\n value={tab.label}\n edit={isEditing}\n onEditChange={setIsEditing}\n onChange={(event, value) =>\n handleEdit(event, value, tab.id)\n }\n onBlur={(event, value) =>\n handleEdit(event, value, tab.id)\n }\n // We don't want the arrow keys to trigger the tab navigation\n onKeyDown={(e) => e.stopPropagation()}\n />\n )}\n {removable && (\n <div className={classes.closeIconContainer}>\n <CloseXS\n aria-hidden\n size=\"xs\"\n onClick={(event) => {\n handleDeleteTab(event, tab.id);\n\n // We don't want the click to also select the tab\n event.stopPropagation();\n }}\n />\n </div>\n )}\n {selectedTab !== tab.id &&\n visibleTabs[index + 1]?.id !== selectedTab && (\n <div className={classes.tabDivider} />\n )}\n </div>\n </HvCanvasPanelTab>\n );\n })}\n </HvCanvasPanelTabs>\n )}\n {hiddenTabs.length > 0 && (\n <HvDropDownMenu\n classes={{\n container: classes.dropdownMenuContainer,\n menuListRoot: classes.dropdownMenuListRoot,\n }}\n dataList={hiddenTabs}\n icon={<MoreOptionsHorizontal />}\n labels={{ dropdownMenu: labels.dropdownMenu }}\n onClick={(event, value) =>\n handleChangeSelectedTab(event, value.id ?? \"none\")\n }\n />\n )}\n </div>\n <div ref={actionsRef} className={classes.actionsContainer}>\n {children}\n {!hideCreateNew && (\n <HvButton\n variant=\"primaryGhost\"\n startIcon={<AddAlt />}\n onClick={handleCreateNew}\n >\n {labels.create}\n </HvButton>\n )}\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = `color-mix(in srgb, ${theme.colors.pp.primaryDimmed} 50%, ${theme.colors.pp.dimmer})`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs\",\n {\n root: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n transition: \"width 0.3s ease\",\n height: TAB_HEIGHT,\n },\n tabsContainer: {\n display: \"flex\",\n },\n tabsList: {\n height: TAB_HEIGHT,\n background: theme.colors.atmo1,\n borderEndStartRadius: theme.radii.base,\n },\n tab: {\n boxSizing: \"border-box\",\n border: `1px solid ${theme.colors.atmo1}`,\n borderBottom: \"none\",\n borderRadius: \"10px 10px 0 0\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo1,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n [`&.${tabClasses.selected}`]: {\n color: theme.colors.primary,\n backgroundColor: TAB_COLOR,\n borderColor: theme.colors.atmo4,\n },\n [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n {\n borderRadius: 0,\n backgroundColor: TAB_COLOR,\n borderColor: TAB_COLOR,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n },\n\n // Hide icon when editor is hovered and focused\n [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n {\n display: \"none\",\n },\n // Hide close when editor is focused\n [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n display: \"none\",\n },\n },\n tabLabel: {\n \"&:not($tabLabelEditor)\": {\n margin: theme.spacing(0, \"xs\"),\n },\n },\n tabLabelEditor: {\n color: theme.colors.primary,\n },\n tabContent: {\n position: \"relative\",\n height: TAB_HEIGHT,\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n width: \"100%\",\n padding: TAB_PADDING,\n },\n tabIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: TAB_ICON_SIZE,\n },\n closeIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n marginLeft: \"auto\",\n marginRight: theme.spacing(-1),\n width: CLOSE_ICON_SIZE,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.circle,\n },\n },\n tabDivider: {\n position: \"absolute\",\n height: 18,\n width: 1,\n backgroundColor: theme.colors.atmo3,\n right: 0,\n },\n actionsContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: theme.space.sm,\n },\n dropdownMenuContainer: {\n width: DROPDOWN_MENU_WIDTH,\n display: \"flex\",\n justifyContent: \"center\",\n },\n dropdownMenuListRoot: {\n maxHeight: 220,\n },\n },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-pentaho",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "UI Kit Pentaho+ React components.",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@emotion/css": "^11.11.0",
|
|
33
|
-
"@hitachivantara/uikit-react-core": "^5.82.
|
|
33
|
+
"@hitachivantara/uikit-react-core": "^5.82.3",
|
|
34
34
|
"@hitachivantara/uikit-react-icons": "^5.13.0",
|
|
35
35
|
"@hitachivantara/uikit-react-utils": "^0.2.17",
|
|
36
36
|
"@mui/base": "^5.0.0-beta.40",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"access": "public",
|
|
44
44
|
"directory": "package"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "8c8ff8da3d880c63a34299c6d4593b1865dc60f0",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"types": "./dist/types/index.d.ts",
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
function stripNullish(obj) {
|
|
4
|
-
return Object.entries(obj).reduce(
|
|
5
|
-
(acc, [key, value]) => {
|
|
6
|
-
if (value != null && value !== "") {
|
|
7
|
-
acc[key] = value;
|
|
8
|
-
}
|
|
9
|
-
return acc;
|
|
10
|
-
},
|
|
11
|
-
{}
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
const mergeStyles = (styleProp, styles) => ({ ...stripNullish(styles), ...styleProp });
|
|
15
|
-
exports.mergeStyles = mergeStyles;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BottomPanel.js","sources":["../../../../../../src/Canvas/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n ExtractNames,\n HvActionGeneric,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvBaseProps,\n HvPanel,\n theme,\n useControlled,\n useDefaultProps,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./BottomPanel.styles\";\n\nexport { staticClasses as canvasBottomPanelClasses };\n\nexport type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasBottomPanelProps extends HvBaseProps {\n /** Open state of the bottom panel. */\n open?: boolean;\n /** Minimize state of the bottom panel tabs'. */\n minimize?: boolean;\n /** List of tabs visible on the panel. */\n tabs: {\n id: string | number;\n title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);\n }[];\n /** Id of the selected tab if it needs to be controlled. */\n selectedTabId?: string | number;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | number | null,\n ) => void;\n /**\n * Actions to be rendered in the left side of a tab.\n * If more than one action is provided, a dropdown menu will be used.\n * These actions are not shown when the tab content is overflowing.\n */\n leftActions?: HvActionsGenericProps[\"actions\"];\n /**\n * Actions to be rendered in the right side of a tab.\n * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.\n * These actions are not shown when the tab content is overflowing.\n */\n rightActions?: HvActionsGenericProps[\"actions\"];\n /**\n * Actions to be rendered in the right side of a tab when the tab content is overflowing.\n * These actions will replace both `leftActions` and `rightActions`.\n */\n overflowActions?: HvActionsGenericProps[\"actions\"];\n /** Callback triggered when an action is clicked. */\n onAction?: (\n event: React.SyntheticEvent,\n action: HvActionGeneric,\n tabId: string | number,\n ) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasBottomPanelClasses;\n}\n\n/**\n * A bottom panel component to use in a canvas context.\n */\nexport const HvCanvasBottomPanel = forwardRef<\n HTMLDivElement,\n HvCanvasBottomPanelProps\n>((props, ref) => {\n const {\n id: idProp,\n className,\n children,\n open,\n tabs,\n minimize,\n leftActions,\n rightActions,\n overflowActions,\n selectedTabId: selectedTabIdProp,\n classes: classesProp,\n onTabChange,\n onAction,\n ...others\n } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const canvasContext = useCanvasContext();\n const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n const id = useUniqueId(idProp);\n\n // Tab resize detector: to position tab actions and set the panel top right border radius\n const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n handleHeight: false,\n });\n // Tab panel resize detector: to set the panel top right border radius\n const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({\n handleHeight: false,\n });\n\n // Left actions resize detector: to position tab title according with actions\n const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(\n {\n handleHeight: false,\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n },\n );\n // Right actions resize detector: to position tab title according with actions\n const { width: rightActionWidth = 32, ref: rightActionRef } =\n useResizeDetector({\n handleHeight: false,\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n });\n\n const overflowing = useMemo(() => {\n const availableWidth =\n tabWidth -\n (leftActions ? leftActionWidth : 0) -\n (rightActions ? rightActionWidth : 0);\n\n return availableWidth < 60;\n }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);\n\n const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n selectedTabIdProp,\n tabs[0].id,\n );\n\n const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n tabId,\n ) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <div\n id={id}\n ref={ref}\n className={cx(\n classes.root,\n {\n [classes.closed]: !open,\n [classes.minimized]: minimize,\n [classes.multipleTabs]: tabs.length > 1,\n [classes.overflowing]: overflowing,\n },\n className,\n )}\n style={{\n width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,\n right: theme.space.sm,\n }}\n {...others}\n >\n <div className={classes.tabsRoot}>\n <HvCanvasPanelTabs\n style={{\n // @ts-ignore\n \"--left-actions-width\":\n overflowing || !leftActions\n ? theme.space.sm\n : `calc(${leftActionWidth}px + ${theme.space.xs})`,\n \"--right-actions-width\":\n !rightActions || (overflowing && !overflowActions)\n ? theme.space.sm\n : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`,\n }}\n onChange={handleTabChange}\n value={selectedTab}\n >\n {tabs.map((tab, index) => (\n <HvCanvasPanelTab\n ref={index === 0 ? tabRef : undefined}\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n className={classes.tab}\n >\n <div className={classes.tabTitle}>\n {typeof tab.title === \"function\"\n ? tab.title(overflowing)\n : tab.title}\n </div>\n </HvCanvasPanelTab>\n ))}\n </HvCanvasPanelTabs>\n {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n {leftActions || rightActions || overflowActions\n ? tabs.map((tab, index) => {\n const btnsDisabled = selectedTab !== tab.id && !minimize;\n return (\n <div\n key={tab.id}\n style={{\n // @ts-ignore\n \"--tab-width\": `${tabWidth}px`,\n \"--right\": `calc((${index} + 1) * var(--tab-width))`,\n \"--left\": `calc(${index} * var(--tab-width))`,\n }}\n >\n {leftActions && !overflowing && (\n <div\n ref={leftActionRef}\n className={cx(classes.leftActions, {\n [classes.actionsDisabled]: btnsDisabled,\n })}\n >\n <HvActionsGeneric\n maxVisibleActions={1}\n actions={leftActions}\n disabled={btnsDisabled}\n onAction={(event, action) =>\n onAction?.(event, action, tab.id)\n }\n variant=\"secondaryGhost\"\n iconOnly\n />\n </div>\n )}\n {rightActions && !overflowing && (\n <div\n ref={rightActionRef}\n className={cx(classes.rightActions, {\n [classes.actionsDisabled]: btnsDisabled,\n })}\n >\n <HvActionsGeneric\n maxVisibleActions={2}\n actions={rightActions}\n disabled={btnsDisabled}\n onAction={(event, action) =>\n onAction?.(event, action, tab.id)\n }\n variant=\"secondaryGhost\"\n iconOnly\n />\n </div>\n )}\n {overflowActions && overflowing && (\n <div\n className={cx(classes.rightActions, {\n [classes.actionsDisabled]: btnsDisabled,\n })}\n >\n <HvActionsGeneric\n maxVisibleActions={0}\n actions={overflowActions}\n disabled={btnsDisabled}\n onAction={(event, action) =>\n onAction?.(event, action, tab.id)\n }\n variant=\"secondaryGhost\"\n iconOnly\n />\n </div>\n )}\n </div>\n );\n })\n : null}\n </div>\n <HvPanel\n ref={panelRef}\n role=\"tabpanel\"\n aria-labelledby={`${id}-${selectedTab}`}\n className={classes.content}\n style={{\n // @ts-ignore\n \"--right-border-radius\":\n tabWidth * tabs.length >= panelWidth ? \"0px\" : \"16px\",\n }}\n >\n {children}\n </HvPanel>\n </div>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BottomPanel.styles.js","sources":["../../../../../../src/Canvas/BottomPanel/BottomPanel.styles.tsx"],"sourcesContent":["import {\n buttonClasses,\n createClasses,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasBottomPanel\",\n {\n root: {\n position: \"absolute\",\n display: \"flex\",\n flexDirection: \"column\",\n right: 0,\n bottom: 0,\n width: \"100%\",\n maxHeight: \"500px\",\n visibility: \"visible\",\n transition: \"visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease\",\n },\n closed: {\n maxHeight: 0,\n visibility: \"hidden\",\n },\n minimized: {\n \"& $content\": {\n display: \"none\",\n },\n \"& $tab\": {\n backgroundColor: theme.colors.atmo1,\n ...theme.typography.label,\n },\n },\n multipleTabs: {\n \"& $tab\": { maxWidth: \"288px\" },\n \"& $rightActions\": {\n right: `calc(100% - var(--right) + ${theme.space.xs})`,\n },\n },\n overflowing: {},\n tab: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n width: \"100%\",\n },\n tabTitle: {\n display: \"flex\",\n width: \"100%\",\n padding: theme.space.sm,\n paddingLeft: \"var(--left-actions-width)\",\n paddingRight: \"var(--right-actions-width)\",\n },\n tabsRoot: {\n position: \"relative\",\n },\n leftActions: {\n position: \"absolute\",\n left: `calc(var(--left) + ${theme.space.xs})`,\n top: 8,\n },\n rightActions: {\n position: \"absolute\",\n right: theme.space.xs,\n top: 8,\n },\n actionsDisabled: {\n pointerEvents: \"none\",\n [`&& .${buttonClasses.disabled}`]: {\n pointerEvents: \"none\",\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \":hover\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n },\n content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IAEvD;AAAA,IACA,aAAa,CAAC;AAAA,IACd,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,iBAAiB;AAAA,MACf,eAAe;AAAA,MACf,CAAC,OAAO,cAAc,QAAQ,EAAE,GAAG;AAAA,QACjC,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,QAAA;AAAA,MACf;AAAA,IAEJ;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAAA;AAElE;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasContext.js","sources":["../../../../../src/Canvas/CanvasContext.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\ntype HvCanvasContextValue = {\n sidePanelOpen: boolean;\n handleSidePanelOpen: (open: boolean) => void;\n sidePanelWidth: number;\n handleSidePanelWidth: (width: number) => void;\n};\n\nexport const HvCanvasContext = createContext<HvCanvasContextValue | null>(null);\n\nexport const HvCanvasProvider = ({\n children,\n}: {\n children: React.ReactNode;\n onSidePanelResize?: (width: number) => void;\n}) => {\n const [sidePanelOpen, setSidePanelOpen] = useState(false);\n const [width, setWidth] = useState(0);\n\n const handleSidePanelWidth = useCallback((newWidth: number) => {\n setWidth(newWidth);\n }, []);\n\n const handleSidePanelOpen = useCallback((open: boolean) => {\n setSidePanelOpen(open);\n }, []);\n\n const value = useMemo(\n () => ({\n sidePanelOpen,\n handleSidePanelOpen,\n sidePanelWidth: sidePanelOpen ? width : 0,\n handleSidePanelWidth,\n }),\n [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth],\n );\n\n return (\n <HvCanvasContext.Provider value={value}>\n {children}\n </HvCanvasContext.Provider>\n );\n};\n\nexport const useCanvasContext = () => {\n return useContext(HvCanvasContext);\n};\n"],"names":[],"mappings":";;AAea,MAAA,kBAAkB,cAA2C,IAAI;AAEvE,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AACF,MAGM;AACJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAE9B,QAAA,uBAAuB,YAAY,CAAC,aAAqB;AAC7D,aAAS,QAAQ;AAAA,EACnB,GAAG,EAAE;AAEC,QAAA,sBAAsB,YAAY,CAAC,SAAkB;AACzD,qBAAiB,IAAI;AAAA,EACvB,GAAG,EAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB,gBAAgB,QAAQ;AAAA,MACxC;AAAA,IAAA;AAAA,IAEF,CAAC,eAAe,qBAAqB,OAAO,oBAAoB;AAAA,EAClE;AAEA,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACvB,SACH,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,SAAO,WAAW,eAAe;AACnC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelTab.js","sources":["../../../../../../src/Canvas/PanelTab/PanelTab.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tab, TabProps } from \"@mui/base/Tab\";\nimport {\n ExtractNames,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTab.styles\";\n\nexport { staticClasses as canvasPanelTabClasses };\n\nexport type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabProps extends TabProps {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasPanelTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasPanelTabs`.\n */\nexport const HvCanvasPanelTab = forwardRef<\n HTMLButtonElement,\n HvCanvasPanelTabProps\n>((props, ref) => {\n const {\n classes: classesProp,\n className,\n ...others\n } = useDefaultProps(\"HvCanvasPanelTab\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return <Tab ref={ref} className={cx(classes.root, className)} {...others} />;\n});\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAEvC,SAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAC5E,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelTab.styles.js","sources":["../../../../../../src/Canvas/PanelTab/PanelTab.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n createClasses,\n outlineStyles,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanelTab\", {\n root: {\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flex: 1,\n borderRadius: \"16px 16px 0 0\",\n backgroundColor: theme.colors.atmo2,\n color: theme.colors.secondary_60,\n overflow: \"hidden\",\n width: \"100%\",\n boxShadow: \"0px -2px 8px 0px #4141410F\",\n paddingInlineEnd: 0,\n paddingInlineStart: 0,\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n \"&:hover\": {\n cursor: \"pointer\",\n },\n \"&:focus\": {\n backgroundColor: theme.colors.atmo1,\n },\n [`&.${tabClasses.selected}`]: {\n backgroundColor: theme.colors.atmo1,\n ...theme.typography.label,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":[],"mappings":";;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelTabs.js","sources":["../../../../../../src/Canvas/PanelTabs/PanelTabs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n ExtractNames,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTabs.styles\";\n\nexport { staticClasses as canvasPanelTabsClasses };\n\nexport type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabsProps extends TabsProps {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasPanelTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasPanelTabs = forwardRef<\n HTMLDivElement,\n HvCanvasPanelTabsProps\n>((props, ref) => {\n const {\n selectionFollowsFocus = true,\n children,\n className,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasPanelTabs\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <Tabs\n ref={ref}\n className={cx(classes.root, className)}\n selectionFollowsFocus={selectionFollowsFocus}\n {...others}\n >\n <TabsList className={classes.list}>{children}</TabsList>\n </Tabs>\n );\n});\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,SAAS,CAAA;AAAA,IAAA;AAAA,EAC/C;AAEJ,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelTabs.styles.js","sources":["../../../../../../src/Canvas/PanelTabs/PanelTabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasPanelTabs\",\n {\n root: {},\n list: {\n display: \"flex\",\n width: \"100%\",\n height: 48,\n },\n },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.js","sources":["../../../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvPanel,\n useControlled,\n useDefaultProps,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n open: \"Open\",\n close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\" | \"onResize\"> {\n /** When controlled, defines id the panel is open or not. */\n open?: boolean;\n /** When uncontrolled, defines the initial state of the panel. */\n defaultOpen?: boolean;\n /** List of tabs visible on the panel. */\n tabs?: {\n id: string | number;\n content: React.ReactNode;\n }[];\n /** Id of the selected tab if it needs to be controlled. */\n tab?: string | number;\n /** Callback triggered whenever the panel toggles. */\n onToggle?: (\n event: React.MouseEvent | React.KeyboardEvent,\n open: boolean,\n ) => void;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | number | null,\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** The minimum width of the side panel. */\n minWidth?: number;\n /** The maximum width of the side panel. */\n maxWidth?: number;\n /** The initial width of the side panel. */\n initialWidth?: number;\n /** Callback triggered when the panel width changes. */\n onResize?: (width: number) => void;\n /** The content that will be rendered within the canvas panel. */\n children?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n HTMLDivElement,\n HvCanvasSidePanelProps\n>((props, ref) => {\n const {\n id: idProp,\n tab: tabProp,\n open: openProp,\n defaultOpen = false,\n tabs,\n onToggle,\n onTabChange,\n labels: labelsProp,\n minWidth = 100,\n maxWidth = 500,\n initialWidth = 320,\n onResize,\n className,\n children,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n const id = useUniqueId(idProp);\n\n const canvasContext = useCanvasContext();\n const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;\n const sidePanelOpen = canvasContext?.sidePanelOpen;\n const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n tabProp,\n tabs?.[0]?.id ?? \"none\",\n );\n\n useEffect(() => {\n handleSidePanelWidth?.(initialWidth);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialWidth]);\n\n const updateWidth = (width: number) => {\n handleSidePanelWidth?.(width);\n onResize?.(width);\n };\n\n const { width, isDragging, getContainerProps, getSeparatorProps } =\n useResizable({\n ref,\n initialWidth,\n minWidth,\n maxWidth,\n onResize: updateWidth,\n });\n\n const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\n handleSidePanelOpen?.(!sidePanelOpen);\n onToggle?.(event, !open);\n };\n\n const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n tabId,\n ) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <>\n <div\n id={id}\n className={cx(classes.root, className, {\n [classes.open]: open,\n [classes.close]: !open,\n })}\n {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\n {...others}\n >\n {tabs && (\n <HvCanvasPanelTabs\n className={classes.tabs}\n value={selectedTab}\n onChange={handleTabChange}\n >\n {tabs.map((tab) => (\n <HvCanvasPanelTab\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n >\n {tab.content}\n </HvCanvasPanelTab>\n ))}\n </HvCanvasPanelTabs>\n )}\n <HvPanel\n role={tabs ? \"tabpanel\" : undefined}\n aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n className={classes.content}\n >\n {children}\n </HvPanel>\n </div>\n <div {...getSeparatorProps()} />\n <HvIconButton\n variant=\"primaryGhost\"\n title={open ? labels.close : labels.open}\n onClick={handleTogglePanel}\n className={cx(classes.handle, {\n [classes.handleOpen]: open,\n [classes.handleClose]: !open,\n })}\n style={{\n left: open ? width : 0,\n transition: isDragging ? \"none\" : undefined,\n }}\n >\n <End rotate={open} />\n </HvIconButton>\n </>\n );\n});\n"],"names":["width"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.styles.js","sources":["../../../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasSidePanel\",\n {\n root: {\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n boxShadow,\n backgroundColor: \"transparent\",\n transition: \"visibility 0.3s ease, width 0.3s ease\",\n overflow: \"hidden\",\n \"&$open\": {\n width: 320,\n visibility: \"visible\",\n },\n \"&$close\": {\n width: 0,\n visibility: \"hidden\",\n },\n },\n tabs: {},\n content: {\n height: \"100%\",\n },\n handle: {\n height: 44,\n width: 44,\n display: \"flex\",\n justifyContent: \"center\",\n boxShadow,\n backgroundColor: theme.colors.atmo1,\n borderRadius: \"0px 16px 16px 0px\",\n position: \"absolute\",\n transition: \"left 0.3s ease\",\n top: \"calc(50% - 44px)\", // subtract handle's full height\n \"&$handleOpen\": {\n left: 320,\n },\n \"&$handleClose\": {\n left: 0,\n },\n },\n open: {},\n close: {},\n handleOpen: {},\n handleClose: {},\n },\n);\n"],"names":[],"mappings":";AAEA,MAAM,YAAY,oBAAoB,MAAM,MAAM,aAAa,KAAK,CAAC;AAExD,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAA;AAAA,EAAC;AAElB;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useResizable.js","sources":["../../../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\ninterface ContainerProps {\n ref: any;\n style: React.CSSProperties;\n}\n\ninterface SeparatorProps {\n style: React.CSSProperties;\n onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n onMouseLeave?: () => void;\n onMouseDown?: () => void;\n role: string;\n}\n\ninterface ResizableProps {\n ref: any;\n initialWidth: number;\n minWidth: number;\n maxWidth: number;\n onResize?: (width: number) => void;\n}\n\nexport const useResizable = (\n resizableOptions: ResizableProps,\n): {\n width: number;\n isDragging: boolean;\n getContainerProps: (overrides: any) => ContainerProps;\n getSeparatorProps: () => SeparatorProps;\n} => {\n const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;\n\n const [width, setWidth] = useState(initialWidth);\n const [isHover, setIsHover] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n\n const panelRef = useRef<HTMLDivElement>(null);\n\n const forkedRef = useForkRef(ref, panelRef);\n\n const mouseMove = (event: MouseEvent) => {\n if (panelRef.current) {\n const rect = panelRef.current.getBoundingClientRect();\n const newWidth = event.clientX - rect.left;\n if (newWidth >= minWidth && newWidth <= maxWidth) {\n setWidth(newWidth);\n onResize?.(newWidth);\n }\n }\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (panelRef.current) {\n const rect = panelRef.current.getBoundingClientRect();\n const isHoverBorder =\n event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;\n setIsHover(isHoverBorder);\n }\n };\n\n const handleMouseUp = () => {\n if (!panelRef.current) return;\n\n panelRef.current.style.userSelect = \"\";\n panelRef.current?.parentElement?.removeEventListener(\n \"mousemove\",\n mouseMove,\n );\n panelRef.current?.parentElement?.removeEventListener(\n \"mouseup\",\n handleMouseUp,\n );\n setIsDragging(false);\n };\n\n const startResizing = () => {\n if (!panelRef.current) return;\n\n panelRef.current.style.userSelect = \"none\";\n panelRef.current.parentElement?.addEventListener(\"mousemove\", mouseMove);\n panelRef.current.parentElement?.addEventListener(\"mouseup\", handleMouseUp);\n setIsDragging(true);\n };\n\n const getContainerProps = (\n overrides: Partial<ContainerProps> = {},\n ): ContainerProps => ({\n ref: forkedRef,\n style: {\n width,\n transition: isDragging ? \"none\" : undefined,\n ...overrides.style,\n },\n });\n\n const getSeparatorProps = (\n overrides: Partial<SeparatorProps> = {},\n ): SeparatorProps => ({\n style: {\n left: width,\n position: \"absolute\",\n top: 0,\n bottom: 0,\n width: 5,\n cursor: \"col-resize\",\n ...overrides.style,\n },\n onMouseMove: handleMouseMove,\n onMouseLeave: () => setIsHover(false),\n onMouseDown: () => {\n if (isHover) startResizing();\n },\n role: \"separator\",\n });\n\n return { width, isDragging, getContainerProps, getSeparatorProps };\n};\n"],"names":[],"mappings":";;AAwBa,MAAA,eAAe,CAC1B,qBAMG;AACH,QAAM,EAAE,KAAK,cAAc,UAAU,UAAU,aAAa;AAE5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAE5C,QAAA,WAAW,OAAuB,IAAI;AAEtC,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,YAAY,CAAC,UAAsB;AACvC,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,WAAW,MAAM,UAAU,KAAK;AAClC,UAAA,YAAY,YAAY,YAAY,UAAU;AAChD,iBAAS,QAAQ;AACjB,mBAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAEJ;AAEM,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,gBACJ,MAAM,WAAW,KAAK,QAAQ,KAAK,MAAM,WAAW,KAAK,QAAQ;AACnE,iBAAW,aAAa;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,QAAQ,eAAe,iBAAiB,aAAa,SAAS;AACvE,aAAS,QAAQ,eAAe,iBAAiB,WAAW,aAAa;AACzE,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,YAAY,aAAa,SAAS;AAAA,MAClC,GAAG,UAAU;AAAA,IAAA;AAAA,EACf;AAGF,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,UAAU;AAAA,IACf;AAAA,IACA,aAAa;AAAA,IACb,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,aAAa,MAAM;AACjB,UAAI,QAAuB,eAAA;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAY,mBAAmB,kBAAkB;AACnE;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sources":["../../../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { mergeStyles } from \"packages/utils/src\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvIconButtonProps,\n HvTypography,\n useDefaultProps,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { staticClasses, useClasses } from \"./Toolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n extends HvBaseProps<HTMLDivElement, \"title\"> {\n /** Text to display in the component. */\n title: React.ReactNode;\n /** Fully customized button or false for when the back button should not be rendered. */\n backButton?: React.ReactNode;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /* The content that will be rendered within the toolbar. */\n children?: React.ReactNode;\n /** Props for the default back button. */\n backButtonProps?: Partial<HvIconButtonProps>;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = forwardRef<HTMLDivElement, HvCanvasToolbarProps>(\n (props, ref) => {\n const {\n title: titleProp,\n backButton,\n labels: labelsProp,\n className,\n style,\n children,\n backButtonProps,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const canvasContext = useCanvasContext();\n const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n const title =\n typeof titleProp === \"string\" ? (\n <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n ) : (\n titleProp\n );\n\n return (\n <div\n ref={ref}\n className={cx(classes.root, className)}\n style={mergeStyles(style, {\n \"--sidepanel-width\": `${sidePanelWidth}px`,\n })}\n {...others}\n >\n <div className={classes.back}>\n {backButton ?? (\n <HvIconButton\n title={labels.back}\n variant=\"primaryGhost\"\n {...backButtonProps}\n >\n <Previous />\n </HvIconButton>\n )}\n </div>\n <div className={classes.title}>{title}</div>\n {children && <div className={classes.actions}>{children}</div>}\n </div>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,gBAAgB,iBAAiB;AACjC,UAAA,iBAAiB,eAAe,kBAAkB;AAElD,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,OAAO,YAAY,OAAO;AAAA,UACxB,qBAAqB,GAAG,cAAc;AAAA,QAAA,CACvC;AAAA,QACA,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACd,SAAQ;AAAA,cACP,GAAG;AAAA,cAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,GAGhB;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.styles.js","sources":["../../../../../../src/Canvas/Toolbar/Toolbar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n root: {\n width: `calc(100% - var(--sidepanel-width) - 2 * ${theme.space.sm})`,\n height: 54,\n display: \"flex\",\n alignItems: \"center\",\n borderRadius: theme.radii.full,\n backgroundColor: theme.colors.atmo1,\n position: \"absolute\",\n right: theme.space.sm,\n top: 0,\n transition: \"width 0.3s ease\",\n },\n back: {\n borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n minWidth: 68,\n backgroundColor: theme.colors.containerBackgroundHover,\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n title: {\n display: \"flex\",\n alignItems: \"center\",\n padding: theme.spacing(0, \"md\"),\n height: \"100%\",\n flexGrow: 1,\n },\n actions: {\n display: \"flex\",\n flexWrap: \"nowrap\",\n overflow: \"auto\",\n paddingRight: theme.space.md,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO,4CAA4C,MAAM,MAAM,EAAE;AAAA,IACjE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO,MAAM,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAAA;AAE9B,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarTabEditor.js","sources":["../../../../../../src/Canvas/ToolbarTabs/ToolbarTabEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n createClasses,\n ExtractNames,\n HvTypography,\n HvTypographyProps,\n isKey,\n theme,\n useControlled,\n useEnhancedEffect,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\n// TODO - Extract component in the future: when we have more specs and/or is used in other components\n\nconst { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs-editor\",\n {\n root: {\n position: \"relative\",\n display: \"flex\",\n width: \"100%\",\n overflow: \"hidden\",\n \"&:has($label:hover:not($edit))\": {\n color: theme.colors.secondary_80,\n \"& $editIcon\": { visibility: \"visible\" },\n },\n },\n edit: {\n color: theme.colors.secondary_80,\n borderColor: \"currentColor\",\n backgroundColor: theme.colors.atmo1,\n cursor: \"text\",\n },\n label: {\n width: \"100%\",\n boxSizing: \"border-box\",\n border: \"1px solid transparent\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\", 0, \"xs\"),\n textAlign: \"start\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n outline: \"none\",\n \"&:not($edit)\": {\n textOverflow: \"ellipsis\",\n },\n \"&:hover:not($edit)\": {\n color: theme.colors.secondary_80,\n borderColor: theme.colors.containerBackgroundHover,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n editIcon: {\n position: \"absolute\",\n right: theme.spacing(0.5),\n top: 4,\n width: 16,\n height: 16,\n visibility: \"hidden\",\n pointerEvents: \"none\",\n },\n },\n);\n\nexport { staticClasses as toolbarTabEditorClasses };\n\ntype ToolbarTabEditorClasses = ExtractNames<typeof useClasses>;\n\ninterface ToolbarTabEditorProps\n extends Omit<HvTypographyProps, \"classes\" | \"onBlur\" | \"onChange\"> {\n /** The value of the component. When used, the component has to be controlled. */\n value?: string;\n /** The default value of the component. */\n defaultValue?: string;\n /** Whether the editor is in edit mode. When used, the prop has to be controlled. */\n edit?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: ToolbarTabEditorClasses;\n /** Called the field is blurred. */\n onBlur?: (\n event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /** Called the value changes. */\n onChange?: (\n event: React.FormEvent<Element> | React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /** Called the `edit` prop changes. */\n onEditChange?: (value: boolean) => void;\n}\n\nconst sanitize = (value: string) =>\n value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n\nexport const ToolbarTabEditor = ({\n id,\n className,\n edit: editProp,\n value: valueProp,\n defaultValue: defaultValueProp = \"\",\n classes: classesProp,\n onInput: onInputProp,\n onClick: onClickProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n onChange: onChangeProp,\n onEditChange: onEditChangeProp,\n ...others\n}: ToolbarTabEditorProps) => {\n const { cx, classes } = useClasses(classesProp);\n\n const contentEditableRef = useRef<HTMLSpanElement>(null);\n\n // Sanitize content\n const [value, setValue] = useControlled(\n valueProp ? sanitize(valueProp) : valueProp,\n defaultValueProp ? sanitize(defaultValueProp) : defaultValueProp,\n );\n const [cachedValue, setCachedValue] = useState(value);\n const [isEditing, setIsEditing] = useControlled(editProp, false);\n\n const moveCursorToEnd = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n const range = document.createRange();\n const selection = window.getSelection();\n range.selectNodeContents(element);\n range.collapse(false);\n selection?.removeAllRanges();\n selection?.addRange(range);\n element.scrollLeft = element.scrollWidth;\n };\n\n const scrollContentToStart = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n element.scrollLeft = 0;\n };\n\n const changeEdit = (edit: boolean) => {\n setIsEditing(edit);\n onEditChangeProp?.(edit);\n };\n\n // Update cursor when value updates: otherwise it goes to the start\n useEnhancedEffect(() => {\n if (isEditing) moveCursorToEnd();\n }, [isEditing, value]);\n\n const handleInput: HvTypographyProps[\"onInput\"] = (event) => {\n // Sanitize content\n const newValue = sanitize((event.target as any).textContent) || \"\";\n setValue(newValue);\n onInputProp?.(event);\n onChangeProp?.(event, newValue);\n };\n\n const handleClick: HvTypographyProps[\"onClick\"] = (event) => {\n setCachedValue(value);\n changeEdit(true);\n onClickProp?.(event);\n };\n\n const handleBlur = (\n event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n ) => {\n changeEdit(false);\n scrollContentToStart();\n\n // Never leave the field empty\n const newValue = value.trim() || cachedValue;\n setValue(newValue);\n\n onBlurProp?.(event, newValue);\n };\n\n const handleKeyDown: HvTypographyProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Enter\")) {\n // Blur field\n handleBlur(event);\n } else if (isKey(event, \"Esc\")) {\n changeEdit(false);\n\n // Cancel editing\n setValue(cachedValue);\n onChangeProp?.(event, cachedValue);\n }\n onKeyDownProp?.(event);\n };\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvTypography\n ref={contentEditableRef}\n contentEditable={isEditing}\n className={cx(classes.label, { [classes.edit]: isEditing })}\n variant=\"label\"\n component=\"span\"\n onInput={handleInput}\n onClick={handleClick}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // Using children is unstable in React for contentEditable so the value is rendered through dangerouslySetInnerHTML\n dangerouslySetInnerHTML={{\n __html: value,\n }}\n {...others}\n />\n <Edit className={classes.editIcon} iconSize=\"XS\" />\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarTabs.js","sources":["../../../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvButtonProps,\n HvDropDownMenu,\n HvOverflowTooltip,\n isKey,\n uniqueId,\n useControlled,\n useDefaultProps,\n useForkRef,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n AddAlt,\n CloseXS,\n MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { clamp } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { ToolbarTabEditor } from \"./ToolbarTabEditor\";\nimport {\n DROPDOWN_MENU_WIDTH,\n MAX_TAB_WIDTH,\n MIN_TAB_WIDTH,\n staticClasses,\n useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n create: \"Create new\",\n undefined: \"Undefined\",\n dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n id: string;\n label: string;\n icon?: React.ReactNode;\n /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */\n fixed?: boolean;\n}\n\nexport interface HvCanvasToolbarTabsProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /** When controlled, defines the tabs. */\n tabs?: ToolbarTabsTab[];\n /** When uncontrolled, defines the initial tabs. */\n defaultTabs?: ToolbarTabsTab[];\n /** Id of the selected tab if it needs to be controlled. */\n selectedTabId?: string;\n /** Defines the icon to be placed before the label when a new tab is created through the \"Create new\" button. If not defined, no icon is used. */\n icon?: React.ReactNode;\n /** Whether the tabs are editable or not. Default to `false`. */\n disableTabEdit?: boolean;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | null,\n ) => void;\n /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n onChange?: (\n event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n tabs: ToolbarTabsTab[],\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasToolbarTabsClasses;\n /** Whether the \"Create new\" button, which enables to create new tabs, is hidden. Defaults to `false`. */\n hideCreateNew?: boolean;\n}\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n HTMLDivElement,\n HvCanvasToolbarTabsProps\n>((props, ref) => {\n const {\n children,\n className,\n selectedTabId: selectedTabIdProp,\n icon: iconProp,\n disableTabEdit = false,\n hideCreateNew = false,\n tabs: tabsProp,\n defaultTabs: defaultTabsProp = [],\n labels: labelsProp,\n classes: classesProp,\n onTabChange: onTabChangeProp,\n onChange: onChangeProp,\n ...others\n } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n // Actions resize detector: to know when to use the dropdown menu\n const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n handleHeight: false,\n });\n\n // Root resize detector: to know when to use the dropdown menu\n const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n handleHeight: false,\n });\n\n const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n const [selectedTab, setSelectedTab] = useControlled<string | null>(\n selectedTabIdProp,\n tabs?.[0]?.id ?? \"none\",\n );\n const [isEditing, setIsEditing] = useState(false);\n\n const rootForkedRef = useForkRef(ref, rootRef);\n\n const handleChangeTabs = (\n event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n newTabs: ToolbarTabsTab[],\n ) => {\n setTabs(newTabs);\n onChangeProp?.(event, newTabs);\n };\n\n const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n value,\n ) => {\n setSelectedTab(String(value));\n onTabChangeProp?.(event, String(value));\n };\n\n const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n const newTabs: ToolbarTabsTab[] = [...tabs];\n const newTab: ToolbarTabsTab = {\n id: uniqueId(),\n label: `${labels.undefined} ${newTabs.length + 1}`,\n icon: iconProp,\n };\n newTabs.push(newTab);\n handleChangeSelectedTab(event, newTab.id);\n handleChangeTabs?.(event, newTabs);\n };\n\n const handleEdit = (\n event: React.FormEvent<Element>,\n value: string,\n tabId: string,\n ) =>\n handleChangeTabs(\n event,\n tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n );\n\n const handleDeleteTab = (event: any, tabId: string) => {\n const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n if (tabId === selectedTab) {\n const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n }\n\n handleChangeTabs(event, newTabs);\n };\n\n const handleKeyDownTab = (\n event: React.KeyboardEvent,\n tabId: string,\n removable: boolean,\n ) => {\n if (removable && (isKey(event, \"Delete\") || isKey(event, \"Backspace\"))) {\n handleDeleteTab(event, tabId);\n\n // We don't want the click to also select the tab\n event.stopPropagation();\n } else if (isKey(event, \"Enter\")) {\n // Activate edit label mode\n setIsEditing(true);\n }\n };\n\n const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {\n let availableWidth = rootWidth - actionsWidth;\n let calculatedTabWidth = availableWidth / tabs.length;\n let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n // Overflowing\n if (calculatedTabWidth < MIN_TAB_WIDTH) {\n availableWidth -= DROPDOWN_MENU_WIDTH;\n const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);\n calculatedTabWidth = availableWidth / visibleCount;\n clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n const temporaryHiddenTabs = tabs.slice(visibleCount);\n const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n (tab) => tab.id === selectedTab,\n );\n const excludedTabIndex = visibleCount - 1;\n const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n if (shouldShuffle) {\n return {\n tabWidth: clamped,\n visibleTabs: [\n ...tabs.slice(0, excludedTabIndex),\n temporaryHiddenTabs[selectedTabHiddenIndex],\n ].filter((tab) => tab),\n hiddenTabs: [\n tabs[excludedTabIndex],\n ...temporaryHiddenTabs.filter(\n (tab, i) => i !== selectedTabHiddenIndex,\n ),\n ].filter((tab) => tab),\n };\n }\n\n return {\n tabWidth: clamped,\n visibleTabs: tabs.slice(0, visibleCount),\n hiddenTabs: temporaryHiddenTabs,\n };\n }\n\n return {\n tabWidth: clamped,\n visibleTabs: tabs,\n hiddenTabs: [],\n };\n }, [actionsWidth, rootWidth, selectedTab, tabs]);\n\n return (\n <div\n ref={rootForkedRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <div className={classes.tabsContainer}>\n {visibleTabs.length > 0 && (\n <HvCanvasPanelTabs\n classes={{ list: classes.tabsList }}\n value={selectedTab}\n onChange={handleChangeSelectedTab}\n >\n {visibleTabs.map((tab, index) => {\n const btnSelected = selectedTab === tab.id;\n const removable = !tab.fixed;\n return (\n <HvCanvasPanelTab\n style={{\n width: tabWidth,\n }}\n key={tab.id}\n id={String(tab.id)}\n className={classes.tab}\n value={tab.id}\n onKeyDown={(event) =>\n handleKeyDownTab(event, tab.id, removable)\n }\n >\n <div className={classes.tabContent}>\n {tab.icon && (\n <div className={classes.tabIconContainer}>{tab.icon}</div>\n )}\n {!btnSelected || disableTabEdit ? (\n <HvOverflowTooltip\n classes={{\n tooltipAnchor: classes.tabLabel,\n }}\n data={tab.label}\n />\n ) : (\n <ToolbarTabEditor\n classes={{\n label: cx(classes.tabLabel, classes.tabLabelEditor),\n }}\n value={tab.label}\n edit={isEditing}\n onEditChange={setIsEditing}\n onChange={(event, value) =>\n handleEdit(event, value, tab.id)\n }\n onBlur={(event, value) =>\n handleEdit(event, value, tab.id)\n }\n // We don't want the arrow keys to trigger the tab navigation\n onKeyDown={(e) => e.stopPropagation()}\n />\n )}\n {removable && (\n <div className={classes.closeIconContainer}>\n <CloseXS\n aria-hidden\n size=\"xs\"\n onClick={(event) => {\n handleDeleteTab(event, tab.id);\n\n // We don't want the click to also select the tab\n event.stopPropagation();\n }}\n />\n </div>\n )}\n {selectedTab !== tab.id &&\n visibleTabs[index + 1]?.id !== selectedTab && (\n <div className={classes.tabDivider} />\n )}\n </div>\n </HvCanvasPanelTab>\n );\n })}\n </HvCanvasPanelTabs>\n )}\n {hiddenTabs.length > 0 && (\n <HvDropDownMenu\n classes={{\n container: classes.dropdownMenuContainer,\n menuListRoot: classes.dropdownMenuListRoot,\n }}\n dataList={hiddenTabs}\n icon={<MoreOptionsHorizontal />}\n labels={{ dropdownMenu: labels.dropdownMenu }}\n onClick={(event, value) =>\n handleChangeSelectedTab(event, value.id ?? \"none\")\n }\n />\n )}\n </div>\n <div ref={actionsRef} className={classes.actionsContainer}>\n {children}\n {!hideCreateNew && (\n <HvButton\n variant=\"primaryGhost\"\n startIcon={<AddAlt />}\n onClick={handleCreateNew}\n >\n {labels.create}\n </HvButton>\n )}\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = `color-mix(in srgb, ${theme.colors.pp.primaryDimmed} 50%, ${theme.colors.pp.dimmer})`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs\",\n {\n root: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n transition: \"width 0.3s ease\",\n height: TAB_HEIGHT,\n },\n tabsContainer: {\n display: \"flex\",\n },\n tabsList: {\n height: TAB_HEIGHT,\n background: theme.colors.atmo1,\n borderEndStartRadius: theme.radii.base,\n },\n tab: {\n boxSizing: \"border-box\",\n border: `1px solid ${theme.colors.atmo1}`,\n borderBottom: \"none\",\n borderRadius: \"10px 10px 0 0\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo1,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n [`&.${tabClasses.selected}`]: {\n color: theme.colors.primary,\n backgroundColor: TAB_COLOR,\n borderColor: theme.colors.atmo4,\n },\n [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n {\n borderRadius: 0,\n backgroundColor: TAB_COLOR,\n borderColor: TAB_COLOR,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n },\n\n // Hide icon when editor is hovered and focused\n [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n {\n display: \"none\",\n },\n // Hide close when editor is focused\n [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n display: \"none\",\n },\n },\n tabLabel: {\n \"&:not($tabLabelEditor)\": {\n margin: theme.spacing(0, \"xs\"),\n },\n },\n tabLabelEditor: {\n color: theme.colors.primary,\n },\n tabContent: {\n position: \"relative\",\n height: TAB_HEIGHT,\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n width: \"100%\",\n padding: TAB_PADDING,\n },\n tabIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: TAB_ICON_SIZE,\n },\n closeIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n marginLeft: \"auto\",\n marginRight: theme.spacing(-1),\n width: CLOSE_ICON_SIZE,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.circle,\n },\n },\n tabDivider: {\n position: \"absolute\",\n height: 18,\n width: 1,\n backgroundColor: theme.colors.atmo3,\n right: 0,\n },\n actionsContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: theme.space.sm,\n },\n dropdownMenuContainer: {\n width: DROPDOWN_MENU_WIDTH,\n display: \"flex\",\n justifyContent: \"center\",\n },\n dropdownMenuListRoot: {\n maxHeight: 220,\n },\n },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":"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"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
function stripNullish(obj) {
|
|
2
|
-
return Object.entries(obj).reduce(
|
|
3
|
-
(acc, [key, value]) => {
|
|
4
|
-
if (value != null && value !== "") {
|
|
5
|
-
acc[key] = value;
|
|
6
|
-
}
|
|
7
|
-
return acc;
|
|
8
|
-
},
|
|
9
|
-
{}
|
|
10
|
-
);
|
|
11
|
-
}
|
|
12
|
-
const mergeStyles = (styleProp, styles) => ({ ...stripNullish(styles), ...styleProp });
|
|
13
|
-
export {
|
|
14
|
-
mergeStyles
|
|
15
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../utils/src/utils/styles.ts"],"sourcesContent":["function stripNullish<T extends Record<string, unknown>>(obj: T) {\n return Object.entries(obj).reduce<Record<string, unknown>>(\n (acc, [key, value]) => {\n if (value != null && value !== \"\") {\n acc[key] = value;\n }\n return acc;\n },\n {},\n );\n}\n\n/**\n * Utility that merges the `style` prop (`styleProp`) with an external `style` object.\n *\n * The external object accepts CSS vars (`--var`) and removes empty style entries.\n */\nexport const mergeStyles = (\n styleProp: React.CSSProperties | undefined,\n styles: Record<string, any>,\n): React.CSSProperties => ({ ...stripNullish(styles), ...styleProp });\n"],"names":[],"mappings":"AAAA,SAAS,aAAgD,KAAQ;AACxD,SAAA,OAAO,QAAQ,GAAG,EAAE;AAAA,IACzB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACjB,UAAA,SAAS,QAAQ,UAAU,IAAI;AACjC,YAAI,GAAG,IAAI;AAAA,MAAA;AAEN,aAAA;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EACF;AACF;AAOa,MAAA,cAAc,CACzB,WACA,YACyB,EAAE,GAAG,aAAa,MAAM,GAAG,GAAG,UAAU;"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|