@hitachivantara/uikit-react-pentaho/dist/cjs/Canvas/SidePanel/SidePanel.cjs

UI Kit Pentaho React components.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const CanvasContext = require("../CanvasContext.cjs");
const SidePanel_styles = require("./SidePanel.styles.cjs");
const useResizable = require("./useResizable.cjs");
const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
const PanelTab = require("../PanelTab/PanelTab.cjs");
const DEFAULT_LABELS = {
  open: "Open",
  close: "Close"
};
const HvCanvasSidePanel = react.forwardRef(function HvCanvasSidePanel2(props, ref) {
  const {
    id: idProp,
    tab: tabProp,
    open: openProp,
    defaultOpen = false,
    tabs,
    onToggle,
    onTabChange,
    labels: labelsProp,
    minWidth = 100,
    maxWidth = 500,
    initialWidth = 320,
    onResize,
    className,
    children,
    classes: classesProp,
    ...others
  } = uikitReactCore.useDefaultProps("HvCanvasSidePanel", props);
  const id = uikitReactCore.useUniqueId(idProp);
  const canvasContext = CanvasContext.useCanvasContext();
  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
  const sidePanelOpen = canvasContext?.sidePanelOpen;
  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
  const handleSidePanelDragging = canvasContext?.handleSidePanelDragging;
  const { classes, cx } = SidePanel_styles.useClasses(classesProp);
  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
  const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
  const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
    tabProp,
    tabs?.[0]?.id ?? "none"
  );
  react.useEffect(() => {
    handleSidePanelOpen?.(open);
  }, [handleSidePanelOpen, open]);
  react.useEffect(() => {
    handleSidePanelWidth?.(initialWidth);
  }, [handleSidePanelWidth, initialWidth]);
  const updateWidth = (width2) => {
    handleSidePanelWidth?.(width2);
    onResize?.(width2);
  };
  const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable.useResizable({
    ref,
    initialWidth,
    minWidth,
    maxWidth,
    onResize: updateWidth
  });
  react.useEffect(() => {
    handleSidePanelDragging?.(isDragging);
  }, [handleSidePanelDragging, isDragging]);
  const handleTogglePanel = (event) => {
    setOpen((prev) => !prev);
    handleSidePanelOpen?.(!sidePanelOpen);
    onToggle?.(event, !open);
  };
  const handleTabChange = (event, tabId) => {
    setSelectedTab(tabId);
    onTabChange?.(event, tabId);
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        id,
        className: cx(classes.root, className, {
          [classes.open]: open,
          [classes.close]: !open
        }),
        ...getContainerProps({ style: { ...!open && { width: 0 } } }),
        ...others,
        children: [
          tabs && /* @__PURE__ */ jsxRuntime.jsx(
            PanelTabs.HvCanvasPanelTabs,
            {
              className: classes.tabs,
              value: selectedTab,
              onChange: handleTabChange,
              children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
                PanelTab.HvCanvasPanelTab,
                {
                  id: `${id}-${tab.id}`,
                  value: tab.id,
                  children: tab.content
                },
                tab.id
              ))
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            uikitReactCore.HvPanel,
            {
              role: tabs ? "tabpanel" : void 0,
              "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
              className: classes.content,
              children
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx("div", { ...getSeparatorProps() }),
    /* @__PURE__ */ jsxRuntime.jsx(
      uikitReactCore.HvIconButton,
      {
        variant: "primaryGhost",
        title: open ? labels.close : labels.open,
        onClick: handleTogglePanel,
        className: cx(classes.handle, {
          [classes.handleOpen]: open,
          [classes.handleClose]: !open
        }),
        style: {
          left: open ? width : 0,
          transition: isDragging ? "none" : void 0
        },
        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { rotate: open })
      }
    )
  ] });
});
exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
exports.HvCanvasSidePanel = HvCanvasSidePanel;