@hitachivantara/uikit-react-pentaho 0.1.3 → 0.1.4

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.
@@ -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 HvPanel,\n useControlled,\n useDefaultProps,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasTab } from \"../Tab\";\nimport { HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\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 extends HvBaseProps<HTMLDivElement> {\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 handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\n onToggle?.(event, !open);\n };\n\n const handleTabChange: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <>\n <div\n ref={ref}\n id={id}\n className={cx(classes.root, className, {\n [classes.open]: open,\n [classes.close]: !open,\n })}\n {...others}\n >\n {tabs && (\n <HvCanvasTabs\n className={classes.tabs}\n value={selectedTab}\n onChange={handleTabChange}\n >\n {tabs.map((tab) => (\n <HvCanvasTab\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n tabIndex={0}\n >\n {tab.content}\n </HvCanvasTab>\n ))}\n </HvCanvasTabs>\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\n className={cx(classes.handle, {\n [classes.handleOpen]: open,\n [classes.handleClose]: !open,\n })}\n onClick={handleTogglePanel}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n handleTogglePanel(e);\n }\n }}\n aria-label={open ? labels.close : labels.open}\n >\n <div className={classes.handleButton}>\n {open ? <Start color={[\"primary\"]} /> : <End color={[\"primary\"]} />}\n </div>\n </div>\n </>\n );\n});\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AAmCO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAiD,CAAC,OAAO,UAAU;AACvE,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,OAAO;AAAA,cACP,UAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBACX,UAAU;AAAA,kBAET,UAAI,IAAA;AAAA,gBAAA;AAAA,gBALA,IAAI;AAAA,cAAA,CAOZ;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,aAAa;AAAA,cAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,cACjD,WAAW,QAAQ;AAAA,cAElB;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,8BAAkB,CAAC;AAAA,UACrB;AAAA,QACF;AAAA,QACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,QAEzC,8BAAC,OAAI,EAAA,WAAW,QAAQ,cACrB,UAAA,2BAAQ,OAAM,EAAA,OAAO,CAAC,SAAS,GAAG,IAAM,oBAAA,KAAA,EAAI,OAAO,CAAC,SAAS,EAAG,CAAA,GACnE;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
1
+ {"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvPanel,\n useControlled,\n useDefaultProps,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasTab } from \"../Tab\";\nimport { HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\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 handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\n onToggle?.(event, !open);\n };\n\n const handleTabChange: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <>\n <div\n ref={ref}\n id={id}\n className={cx(classes.root, className, {\n [classes.open]: open,\n [classes.close]: !open,\n })}\n {...others}\n >\n {tabs && (\n <HvCanvasTabs\n className={classes.tabs}\n value={selectedTab}\n onChange={handleTabChange}\n >\n {tabs.map((tab) => (\n <HvCanvasTab\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n tabIndex={0}\n >\n {tab.content}\n </HvCanvasTab>\n ))}\n </HvCanvasTabs>\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\n className={cx(classes.handle, {\n [classes.handleOpen]: open,\n [classes.handleClose]: !open,\n })}\n onClick={handleTogglePanel}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n handleTogglePanel(e);\n }\n }}\n aria-label={open ? labels.close : labels.open}\n >\n <div className={classes.handleButton}>\n {open ? <Start color={[\"primary\"]} /> : <End color={[\"primary\"]} />}\n </div>\n </div>\n </>\n );\n});\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AAoCO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAiD,CAAC,OAAO,UAAU;AACvE,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,OAAO;AAAA,cACP,UAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBACX,UAAU;AAAA,kBAET,UAAI,IAAA;AAAA,gBAAA;AAAA,gBALA,IAAI;AAAA,cAAA,CAOZ;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,aAAa;AAAA,cAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,cACjD,WAAW,QAAQ;AAAA,cAElB;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,8BAAkB,CAAC;AAAA,UACrB;AAAA,QACF;AAAA,QACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,QAEzC,8BAAC,OAAI,EAAA,WAAW,QAAQ,cACrB,UAAA,2BAAQ,OAAM,EAAA,OAAO,CAAC,SAAS,GAAG,IAAM,oBAAA,KAAA,EAAI,OAAO,CAAC,SAAS,EAAG,CAAA,GACnE;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
@@ -98,7 +98,7 @@ export declare const HvCanvasSidePanel: ForwardRefExoticComponent<HvCanvasSidePa
98
98
 
99
99
  export declare type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses_2>;
100
100
 
101
- export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement> {
101
+ export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement, "onToggle"> {
102
102
  /** When controlled, defines id the panel is open or not. */
103
103
  open?: boolean;
104
104
  /** When uncontrolled, defines the initial state of the panel. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-pentaho",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "UI Kit Pentaho+ React components.",
@@ -30,8 +30,8 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@emotion/css": "^11.11.0",
33
- "@hitachivantara/uikit-react-core": "^5.66.12",
34
- "@hitachivantara/uikit-react-icons": "^5.10.3",
33
+ "@hitachivantara/uikit-react-core": "^5.66.13",
34
+ "@hitachivantara/uikit-react-icons": "^5.10.4",
35
35
  "@mui/base": "^5.0.0-beta.40",
36
36
  "react-resize-detector": "^8.1.0"
37
37
  },
@@ -42,7 +42,7 @@
42
42
  "access": "public",
43
43
  "directory": "package"
44
44
  },
45
- "gitHead": "0e182f8f81ce3e93aa8c822124ec1b8a4624a48f",
45
+ "gitHead": "783ab99a5fb41ad89f810e44fc15c1853a7f8381",
46
46
  "exports": {
47
47
  ".": {
48
48
  "require": "./dist/cjs/index.cjs",