@hitachivantara/uikit-react-pentaho 0.6.0 → 0.7.0

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.
@@ -105,7 +105,7 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
105
105
  left: open ? width : 0,
106
106
  transition: isDragging ? "none" : void 0
107
107
  },
108
- children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { style: { rotate: open ? "180deg" : void 0 } })
108
+ children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { rotate: open })
109
109
  }
110
110
  )
111
111
  ] });
@@ -31,6 +31,8 @@ const useResizable = (resizableOptions) => {
31
31
  }
32
32
  };
33
33
  const handleMouseUp = () => {
34
+ if (!panelRef.current) return;
35
+ panelRef.current.style.userSelect = "";
34
36
  panelRef.current?.parentElement?.removeEventListener(
35
37
  "mousemove",
36
38
  mouseMove
@@ -42,11 +44,10 @@ const useResizable = (resizableOptions) => {
42
44
  setIsDragging(false);
43
45
  };
44
46
  const startResizing = () => {
45
- panelRef.current?.parentElement?.addEventListener(
46
- "mousemove",
47
- mouseMove
48
- );
49
- panelRef.current?.parentElement?.addEventListener("mouseup", handleMouseUp);
47
+ if (!panelRef.current) return;
48
+ panelRef.current.style.userSelect = "none";
49
+ panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
50
+ panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
50
51
  setIsDragging(true);
51
52
  };
52
53
  const getContainerProps = (overrides = {}) => ({
@@ -104,7 +104,7 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
104
104
  left: open ? width : 0,
105
105
  transition: isDragging ? "none" : void 0
106
106
  },
107
- children: /* @__PURE__ */ jsx(End, { style: { rotate: open ? "180deg" : void 0 } })
107
+ children: /* @__PURE__ */ jsx(End, { rotate: open })
108
108
  }
109
109
  )
110
110
  ] });
@@ -1 +1 @@
1
- {"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } 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 { 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\"> {\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 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 className,\n children,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n const id = useUniqueId(idProp);\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 const { width, isDragging, getContainerProps, getSeparatorProps } =\n useResizable({\n ref,\n initialWidth: 320,\n minWidth: 100,\n maxWidth: 500,\n });\n\n const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\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 style={{ rotate: open ? \"180deg\" : undefined }} />\n </HvIconButton>\n </>\n );\n});\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } 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 { 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\"> {\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 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 className,\n children,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n const id = useUniqueId(idProp);\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 const { width, isDragging, getContainerProps, getSeparatorProps } =\n useResizable({\n ref,\n initialWidth: 320,\n minWidth: 100,\n maxWidth: 500,\n });\n\n const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\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":[],"mappings":"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"}
@@ -29,6 +29,8 @@ const useResizable = (resizableOptions) => {
29
29
  }
30
30
  };
31
31
  const handleMouseUp = () => {
32
+ if (!panelRef.current) return;
33
+ panelRef.current.style.userSelect = "";
32
34
  panelRef.current?.parentElement?.removeEventListener(
33
35
  "mousemove",
34
36
  mouseMove
@@ -40,11 +42,10 @@ const useResizable = (resizableOptions) => {
40
42
  setIsDragging(false);
41
43
  };
42
44
  const startResizing = () => {
43
- panelRef.current?.parentElement?.addEventListener(
44
- "mousemove",
45
- mouseMove
46
- );
47
- panelRef.current?.parentElement?.addEventListener("mouseup", handleMouseUp);
45
+ if (!panelRef.current) return;
46
+ panelRef.current.style.userSelect = "none";
47
+ panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
48
+ panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
48
49
  setIsDragging(true);
49
50
  };
50
51
  const getContainerProps = (overrides = {}) => ({
@@ -1 +1 @@
1
- {"version":3,"file":"useResizable.js","sources":["../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { MouseEvent, 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}\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 {\n ref,\n initialWidth = 320,\n minWidth = 100,\n maxWidth = 600,\n } = 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 }\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 panelRef.current?.parentElement?.removeEventListener(\n \"mousemove\",\n mouseMove as unknown as EventListener,\n );\n panelRef.current?.parentElement?.removeEventListener(\n \"mouseup\",\n handleMouseUp as EventListener,\n );\n setIsDragging(false);\n };\n\n const startResizing = () => {\n panelRef.current?.parentElement?.addEventListener(\n \"mousemove\",\n mouseMove as unknown as EventListener,\n );\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":";;AAuBa,MAAA,eAAe,CAC1B,qBAMG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,IACT;AAEJ,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;AAAA,MAAA;AAAA,IACnB;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;AAC1B,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;AAC1B,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe,iBAAiB,WAAW,aAAa;AAC1E,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
+ {"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}\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 {\n ref,\n initialWidth = 320,\n minWidth = 100,\n maxWidth = 600,\n } = 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 }\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":";;AAuBa,MAAA,eAAe,CAC1B,qBAMG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,IACT;AAEJ,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;AAAA,MAAA;AAAA,IACnB;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;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-pentaho",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "UI Kit Pentaho+ React components.",
@@ -30,9 +30,9 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@emotion/css": "^11.11.0",
33
- "@hitachivantara/uikit-react-core": "^5.81.2",
34
- "@hitachivantara/uikit-react-icons": "^5.12.10",
35
- "@hitachivantara/uikit-react-utils": "^0.2.15",
33
+ "@hitachivantara/uikit-react-core": "^5.82.0",
34
+ "@hitachivantara/uikit-react-icons": "^5.13.0",
35
+ "@hitachivantara/uikit-react-utils": "^0.2.16",
36
36
  "@mui/base": "^5.0.0-beta.40",
37
37
  "react-resize-detector": "^8.1.0"
38
38
  },
@@ -43,7 +43,7 @@
43
43
  "access": "public",
44
44
  "directory": "package"
45
45
  },
46
- "gitHead": "4c28927dd7b93fa1ee2a9ee5137534d4106a6cbc",
46
+ "gitHead": "0ef2da44e0bc8356acb31fe409df28e35bd254bc",
47
47
  "exports": {
48
48
  ".": {
49
49
  "types": "./dist/types/index.d.ts",