@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js

@@ -0,0 +1,102 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../../../utils/focusUtils.js";
+import { createClasses } from "../../../utils/classes.js";
+const item = {
+  border: "none",
+  cursor: "pointer",
+  padding: `${theme.space.xs} ${theme.space.sm}`,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  "&:active": {
+    outline: "none"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  "&:focus-visible": {
+    ...outlineStyles
+  },
+  "& span": {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  "& span::after": {
+    content: "attr(data-text)",
+    height: 0,
+    visibility: "hidden",
+    overflow: "hidden",
+    userSelect: "none",
+    pointerEvents: "none",
+    fontWeight: theme.fontWeights.semibold,
+    "@media speech": {
+      display: "none"
+    }
+  }
+};
+const { staticClasses, useClasses } = createClasses(
+  "HvHeader-MenuItem",
+  {
+    root: {
+      display: "inline",
+      "&:hover": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      },
+      "&:focus-within": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      }
+    },
+    menu: {
+      marginTop: 0,
+      paddingBottom: "4px",
+      paddingTop: "4px",
+      height: "100%",
+      borderTop: "none",
+      borderBottom: `4px solid ${theme.colors.atmo2}`
+    },
+    menubar: {
+      marginTop: "0px",
+      paddingBottom: "4px",
+      paddingTop: "4px",
+      height: "100%",
+      borderTop: `0px solid ${theme.colors.atmo1}`,
+      borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
+    },
+    selected: {
+      "&$menu": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%",
+        "& > * > span": {
+          color: theme.colors.secondary
+        }
+      },
+      "&$menubar": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%"
+      }
+    },
+    link: {
+      textDecoration: "none",
+      ...item
+    },
+    button: {
+      color: "inherit",
+      ...item
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=MenuItem.styles.js.map

package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\nimport { createClasses } from \"../../../utils/classes\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    menu: {\n      marginTop: 0,\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: \"none\",\n      borderBottom: `4px solid ${theme.colors.atmo2}`,\n    },\n    menubar: {\n      marginTop: \"0px\",\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: `0px solid ${theme.colors.atmo1}`,\n      borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.colors.secondary,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n      },\n    },\n    link: {\n      textDecoration: \"none\",\n      ...item,\n    } as CSSInterpolation,\n    button: {\n      color: \"inherit\",\n      ...item,\n    } as CSSInterpolation,\n  }\n);\n"],"names":[],"mappings":";;;AAOA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,kBAAkB;AAAA,QAChB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,cAAc,GAAG,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AACF;"}

package/dist/esm/Header/Navigation/Navigation.js

@@ -0,0 +1,40 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Navigation.styles.js";
+import { staticClasses } from "./Navigation.styles.js";
+import { FocusProvider } from "./utils/FocusContext.js";
+import { SelectionContext } from "./utils/SelectionContext.js";
+import { useSelectionPath } from "./useSelectionPath.js";
+import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
+const HvHeaderNavigation = (props) => {
+  const {
+    data,
+    selected,
+    onClick,
+    className,
+    classes: classesProp,
+    levels = 2,
+    ...others
+  } = useDefaultProps("HvHeaderNavigation", props);
+  const { classes, cx } = useClasses(classesProp);
+  const selectionPath = useSelectionPath(data, selected);
+  const handleClick = (event, selection) => {
+    event.preventDefault();
+    onClick?.(event, selection);
+  };
+  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(
+    HvHeaderMenuBar,
+    {
+      data,
+      type: "menubar",
+      onClick: handleClick,
+      levels,
+      currentLevel: 1
+    }
+  ) }) }) });
+};
+export {
+  HvHeaderNavigation,
+  staticClasses as headerNavigationClasses
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/esm/Header/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (\n    event: MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAiCa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CACnD,OACA,cACG;AACH,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,6BACG,iBAAiB,UAAjB,EAA0B,OAAO,eAChC,UAAC,oBAAA,eAAA,EACC,UAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ;"}

package/dist/esm/Header/Navigation/Navigation.styles.js

@@ -0,0 +1,19 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvHeader-Navigation",
+  {
+    root: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      zIndex: 1,
+      top: "0px",
+      left: "0px"
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Navigation.styles.js.map

package/dist/esm/Header/Navigation/Navigation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-Navigation\",\n  {\n    root: {\n      position: \"absolute\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: 1,\n      top: \"0px\",\n      left: \"0px\",\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF;"}

package/dist/esm/Header/Navigation/useSelectionPath.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+const getSelectionPath = (data, selectedId, selection = [], idx = -1, parent = []) => {
+  data?.forEach((item, i) => {
+    const hasData = item.data && item.data.length;
+    const isSelected = item.id === selectedId;
+    if (isSelected)
+      selection.push(...idx > -1 ? [parent[idx].id] : [], item.id);
+    if (hasData)
+      getSelectionPath(item.data, selectedId, selection, i, data);
+  });
+  return selection;
+};
+const useSelectionPath = (data, selectedId) => {
+  const [selectionPath, setSelectionPath] = useState([]);
+  useEffect(() => {
+    const path = getSelectionPath(data, selectedId);
+    setSelectionPath(path);
+  }, [data, selectedId]);
+  return selectionPath;
+};
+export {
+  useSelectionPath
+};
+//# sourceMappingURL=useSelectionPath.js.map

package/dist/esm/Header/Navigation/useSelectionPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionPath.js","sources":["../../../../src/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string | undefined,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (\n  data: HvHeaderNavigationItemProp[],\n  selectedId?: string\n): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":[],"mappings":";AAWA,MAAM,mBAAmB,CACvB,MACA,YACA,YAAsB,IACtB,MAAc,IACd,SAAuC,OAC1B;AACP,QAAA,QAAQ,CAAC,MAAkC,MAAM;AACrD,UAAM,UAAU,KAAK,QAAQ,KAAK,KAAK;AAEjC,UAAA,aAAa,KAAK,OAAO;AAE3B,QAAA;AACF,gBAAU,KAAK,GAAI,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,EAAE,IAAI,CAAC,GAAI,KAAK,EAAE;AAE3D,QAAA;AAAS,uBAAiB,KAAK,MAAM,YAAY,WAAW,GAAG,IAAI;AAAA,EAAA,CACxE;AAEM,SAAA;AACT;AAEa,MAAA,mBAAmB,CAC9B,MACA,eACa;AACb,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAmB,CAAE,CAAA;AAE/D,YAAU,MAAM;AACR,UAAA,OAAO,iBAAiB,MAAM,UAAU;AAE9C,qBAAiB,IAAI;AAAA,EAAA,GACpB,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}

package/dist/esm/Header/Navigation/utils/FocusContext.js

@@ -0,0 +1,25 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useReducer, useMemo } from "react";
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "setItemFocused":
+      return { itemFocused: action.itemFocused };
+    default:
+      return state;
+  }
+};
+const initialState = { itemFocused: void 0, dispatch: void 0 };
+const FocusContext = createContext(initialState);
+const FocusProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const contextValue = useMemo(
+    () => ({ ...state, dispatch }),
+    [state, dispatch]
+  );
+  return /* @__PURE__ */ jsx(FocusContext.Provider, { value: contextValue, children });
+};
+export {
+  FocusContext,
+  FocusProvider
+};
+//# sourceMappingURL=FocusContext.js.map

package/dist/esm/Header/Navigation/utils/FocusContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusContext.js","sources":["../../../../../src/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import React, { createContext, useMemo, useReducer } from \"react\";\n\ntype Action = { type: \"setItemFocused\"; itemFocused: EventTarget & Element };\n\nconst reducer: React.Reducer<FocusContextType, Action> = (state, action) => {\n  switch (action.type) {\n    case \"setItemFocused\":\n      return { itemFocused: action.itemFocused };\n    default:\n      return state;\n  }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\ntype FocusContextType = {\n  itemFocused?: EventTarget & Element;\n  dispatch?: React.Dispatch<Action>;\n};\n\nexport const FocusContext = createContext<FocusContextType>(initialState);\n\nexport const FocusProvider = ({ children }: { children?: React.ReactNode }) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const contextValue = useMemo(\n    () => ({ ...state, dispatch }),\n    [state, dispatch]\n  );\n\n  return (\n    <FocusContext.Provider value={contextValue}>\n      {children}\n    </FocusContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;AAIA,MAAM,UAAmD,CAAC,OAAO,WAAW;AAC1E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACI,aAAA,EAAE,aAAa,OAAO;IAC/B;AACS,aAAA;AAAA,EACX;AACF;AAEA,MAAM,eAAe,EAAE,aAAa,QAAW,UAAU;AAO5C,MAAA,eAAe,cAAgC,YAAY;AAEjE,MAAM,gBAAgB,CAAC,EAAE,eAA+C;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,EAAA;AAGlB,6BACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,SACH,CAAA;AAEJ;"}

package/dist/esm/Header/Navigation/utils/SelectionContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const SelectionContext = createContext([""]);
+export {
+  SelectionContext
+};
+//# sourceMappingURL=SelectionContext.js.map

package/dist/esm/Header/Navigation/utils/SelectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionContext.js","sources":["../../../../../src/Header/Navigation/utils/SelectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const SelectionContext = createContext<string[]>([\"\"]);\n"],"names":[],"mappings":";AAEO,MAAM,mBAAmB,cAAwB,CAAC,EAAE,CAAC;"}

package/dist/esm/InlineEditor/InlineEditor.js

@@ -0,0 +1,126 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState, useRef, useLayoutEffect } from "react";
+import { Edit } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { isKey } from "../utils/keyboardUtils.js";
+import { useClasses } from "./InlineEditor.styles.js";
+import { staticClasses } from "./InlineEditor.styles.js";
+import { HvButton } from "../Button/Button.js";
+import { HvInput } from "../Input/Input.js";
+import { HvTypography } from "../Typography/Typography.js";
+const HvInlineEditor = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    value: valueProp,
+    defaultValue,
+    showIcon,
+    component: InputComponent = HvInput,
+    variant = "body",
+    placeholder = "Enter text",
+    onBlur,
+    onChange,
+    onKeyDown,
+    buttonProps,
+    typographyProps,
+    disabled,
+    ...others
+  } = useDefaultProps("HvInlineEditor", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const [editMode, setEditMode] = useState(false);
+  const [cachedValue, setCachedValue] = useState(value);
+  const inputRef = useRef();
+  const { activeTheme } = useTheme();
+  const typographyStyles = activeTheme?.typography[variant] || {};
+  const { lineHeight } = typographyStyles;
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (editMode && input) {
+      input.focus();
+      input.select();
+    }
+  }, [editMode]);
+  const handleClick = () => {
+    setEditMode(true);
+    setCachedValue(value);
+  };
+  const handleBlur = (event) => {
+    setEditMode(false);
+    const newValue = value || cachedValue;
+    setValue(newValue);
+    onBlur?.(event, newValue);
+  };
+  const handleKeyDown = (event) => {
+    if (isKey(event, "Esc")) {
+      setEditMode(false);
+      setValue(cachedValue);
+    }
+    onKeyDown?.(event);
+  };
+  const handleChange = (event, val) => {
+    setValue(val);
+    onChange?.(event, val);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsx(
+    InputComponent,
+    {
+      inputRef,
+      classes: {
+        root: classes.inputRoot,
+        input: classes.input,
+        inputBorderContainer: classes.inputBorderContainer
+      },
+      inputProps: {
+        style: {
+          ...typographyStyles,
+          height: InputComponent === HvInput ? lineHeight : void 0
+        }
+      },
+      value,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ...others
+    }
+  ) : /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      variant: "secondaryGhost",
+      overrideIconColors: false,
+      endIcon: /* @__PURE__ */ jsx(
+        Edit,
+        {
+          color: "secondary_60",
+          role: "none",
+          className: cx(classes.icon, {
+            [classes.iconVisible]: showIcon
+          })
+        }
+      ),
+      className: cx(classes.button, {
+        [classes.largeText]: parseInt(lineHeight, 10) >= 28
+      }),
+      onClick: handleClick,
+      disabled,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          variant,
+          noWrap: true,
+          className: cx(classes.text, { [classes.textEmpty]: !value }),
+          ...typographyProps,
+          children: value || placeholder
+        }
+      )
+    }
+  ) });
+};
+export {
+  HvInlineEditor,
+  staticClasses as inlineEditorClasses
+};
+//# sourceMappingURL=InlineEditor.js.map

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"../Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"../Typography\";\nimport { HvInput, HvInputProps } from \"../Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** Whether the editor is disabled or not. */\n  disabled?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"none\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA0Da,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,WAAW;AACX,QAAA,EAAE,gBAAgB;AAExB,QAAM,mBAAmB,aAAa,WAAW,OAAO,KAAK,CAAA;AACvD,QAAA,EAAE,WAAe,IAAA;AAEvB,kBAAgB,MAAM;AACpB,UAAM,QAAQ,SAAS;AACvB,QAAI,YAAY,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,OAAO;AAAA,IACf;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAChB,mBAAe,KAAK;AAAA,EAAA;AAGhB,QAAA,aAAqC,CAAC,UAAU;AACpD,gBAAY,KAAK;AAEjB,UAAM,WAAW,SAAS;AAC1B,aAAS,QAAQ;AACjB,aAAS,OAAO,QAAQ;AAAA,EAAA;AAGpB,QAAA,gBAA2C,CAAC,UAAU;AACtD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,kBAAY,KAAK;AACjB,eAAS,WAAW;AAAA,IACtB;AACA,gBAAY,KAAY;AAAA,EAAA;AAGpB,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC7D,aAAS,GAAG;AACZ,eAAW,OAAO,GAAG;AAAA,EAAA;AAIrB,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAY,YAAA,CAAC,WACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,sBAAsB,QAAQ;AAAA,MAChC;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,mBAAmB,UAAU,aAAa;AAAA,QACpD;AAAA,MACF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EAAA,IAGN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,oBAAoB;AAAA,MACpB,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG;AAAA,UAAA,CACxB;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC5B,CAAC,QAAQ,SAAS,GAAG,SAAS,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO;AAAA,UAC1D,GAAG;AAAA,UAEH,UAAS,SAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/esm/InlineEditor/InlineEditor.styles.js

@@ -0,0 +1,82 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../BaseInput/BaseInput.styles.js";
+import "../BaseInput/BaseInput.js";
+import { staticClasses as staticClasses$2 } from "../Input/Input.styles.js";
+import "../Input/Input.js";
+const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
+  root: {
+    [`& .${staticClasses$1.inputRoot}.${staticClasses$2.inputRoot}`]: {
+      height: "100%",
+      minHeight: "32px"
+    }
+  },
+  inputBorderContainer: {
+    top: "unset",
+    bottom: 0
+  },
+  input: {},
+  inputRoot: {},
+  text: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    alignSelf: "center"
+  },
+  largeText: {},
+  textEmpty: {
+    color: theme.colors.secondary_60
+  },
+  button: {
+    padding: theme.spacing("6px", "8px", "5px", "8px"),
+    minHeight: "32px",
+    boxSizing: "border-box",
+    cursor: "text",
+    height: "100%",
+    width: "100%",
+    maxWidth: "100%",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    backgroundColor: theme.colors.atmo1,
+    border: `1px solid transparent`,
+    "&:hover, &:focus": {
+      border: `1px solid ${theme.colors.primary}`,
+      backgroundColor: theme.colors.atmo1,
+      "& $icon": {
+        visibility: "visible"
+      }
+    },
+    "&:active": {
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: "transparent",
+      "& $icon": {
+        visibility: "visible"
+      }
+    },
+    "& > div": {
+      width: "100%"
+    },
+    "& > div > span": {
+      width: "100%"
+    }
+  },
+  icon: {
+    cursor: "pointer",
+    visibility: "hidden",
+    alignSelf: "center",
+    height: "16px",
+    width: "32px",
+    minWidth: "32px",
+    "& svg": {
+      margin: theme.spacing(0, "xs")
+    }
+  },
+  iconVisible: {
+    visibility: "visible"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=InlineEditor.styles.js.map

package/dist/esm/InlineEditor/InlineEditor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { inputClasses } from \"../Input\";\nimport { baseInputClasses } from \"../BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `1px solid ${theme.colors.primary}`,\n      backgroundColor: theme.colors.atmo1,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["baseInputClasses","inputClasses"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,CAAC,MAAMA,gBAAiB,SAAS,IAAIC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAC9D,QAAQ;AAAA,MACR,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW,CAAC;AAAA,EACZ,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjD,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IAER,oBAAoB;AAAA,MAClB,QAAQ,aAAa,MAAM,OAAO,OAAO;AAAA,MACzC,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,SAAS;AAAA,MACP,QAAQ,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EACd;AACF,CAAC;"}