@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/ColorPicker/SavedColors/SavedColors.styles.js

@@ -1,31 +1,29 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerSavedColors", {
-  root: {
-    display: "flex",
-    flexWrap: "wrap",
-    position: "relative",
-    gap: theme.space.xs,
-    alignItems: "center"
-  },
-  swatchRoot: {
-    position: "relative",
-    height: 32
-  },
-  removeButton: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    transform: "translate(25%, -25%)",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: 16,
-    width: 16
-    // background: theme.colors.bgContainer,
-    // borderRadius: theme.radii.base,
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/ColorPicker/SavedColors/SavedColors.styles.tsx
+var { useClasses } = createClasses("HvColorPickerSavedColors", {
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		position: "relative",
+		gap: theme.space.xs,
+		alignItems: "center"
+	},
+	swatchRoot: {
+		position: "relative",
+		height: 32
+	},
+	removeButton: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		transform: "translate(25%, -25%)",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		height: 16,
+		width: 16
+	}
 });
-export {
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/ColorPicker/Swatch.js

@@ -1,39 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps, mergeStyles, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
-const { useClasses } = createClasses("HvColorPickerSwatch", {
-  root: {
-    width: "32px",
-    height: "32px",
-    borderRadius: theme.radii.base,
-    ":focus": {
-      boxShadow: `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, var(--color) 0px 0px 4px`
-    },
-    "&,&:hover,&:focus-visible": {
-      backgroundColor: "var(--color)"
-    }
-  }
-});
-const Swatch = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    style,
-    color,
-    ...others
-  } = useDefaultProps("HvColorPickerSwatch", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    HvButtonBase,
-    {
-      title: color,
-      style: mergeStyles(style, { "--color": color }),
-      className: cx(classes.root, className),
-      ...others
-    }
-  );
-};
-export {
-  Swatch
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses, mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/ColorPicker/Swatch.tsx
+var { useClasses } = createClasses("HvColorPickerSwatch", { root: {
+	width: "32px",
+	height: "32px",
+	borderRadius: theme.radii.base,
+	":focus": { boxShadow: `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, var(--color) 0px 0px 4px` },
+	"&,&:hover,&:focus-visible": { backgroundColor: "var(--color)" }
+} });
+var Swatch = (props) => {
+	const { classes: classesProp, className, style, color, ...others } = useDefaultProps("HvColorPickerSwatch", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx(HvButtonBase, {
+		title: color,
+		style: mergeStyles(style, { "--color": color }),
+		className: cx(classes.root, className),
+		...others
+	});
 };
+//#endregion
+export { Swatch };

package/dist/Container/Container.js

@@ -1,61 +1,40 @@
-import { jsx } from "react/jsx-runtime";
+import { staticClasses, useClasses } from "./Container.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import MuiContainer from "@mui/material/Container";
-import { useTheme } from "@mui/material/styles";
+import { useTheme as useTheme$1 } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { useClasses, staticClasses } from "./Container.styles.js";
-const HvContainer = forwardRef(
-  function HvContainer2(props, ref) {
-    const {
-      maxWidth = false,
-      classes: classesProp,
-      className,
-      fixed,
-      disableGutters,
-      ...others
-    } = useDefaultProps("HvContainer", props);
-    const { classes, cx, css } = useClasses(classesProp);
-    const muiTheme = useTheme();
-    const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
-    const gutters = upMd ? {
-      // Increases specificity
-      [`&.${staticClasses.root}`]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      }
-    } : {
-      // Increases specificity
-      [`&.${staticClasses.root}`]: {
-        paddingLeft: theme.space.sm,
-        paddingRight: theme.space.sm
-      }
-    };
-    return /* @__PURE__ */ jsx(
-      MuiContainer,
-      {
-        className: cx({ [css(gutters)]: !disableGutters }, className),
-        classes: {
-          root: classes.root,
-          disableGutters: classes.disableGutters,
-          fixed: classes.fixed,
-          maxWidthXs: classes.maxWidthXs,
-          maxWidthSm: classes.maxWidthSm,
-          maxWidthMd: classes.maxWidthMd,
-          maxWidthLg: classes.maxWidthLg,
-          maxWidthXl: classes.maxWidthXl
-        },
-        ref,
-        maxWidth,
-        fixed,
-        disableGutters,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvContainer,
-  staticClasses as containerClasses
-};
+//#region src/Container/Container.tsx
+/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */
+var HvContainer = forwardRef(function HvContainer(props, ref) {
+	const { maxWidth = false, classes: classesProp, className, fixed, disableGutters, ...others } = useDefaultProps("HvContainer", props);
+	const { classes, cx, css } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx(MuiContainer, {
+		className: cx({ [css(useMediaQuery(useTheme$1().breakpoints.up("md")) ? { [`&.${staticClasses.root}`]: {
+			paddingLeft: theme.spacing(4),
+			paddingRight: theme.spacing(4)
+		} } : { [`&.${staticClasses.root}`]: {
+			paddingLeft: theme.space.sm,
+			paddingRight: theme.space.sm
+		} })]: !disableGutters }, className),
+		classes: {
+			root: classes.root,
+			disableGutters: classes.disableGutters,
+			fixed: classes.fixed,
+			maxWidthXs: classes.maxWidthXs,
+			maxWidthSm: classes.maxWidthSm,
+			maxWidthMd: classes.maxWidthMd,
+			maxWidthLg: classes.maxWidthLg,
+			maxWidthXl: classes.maxWidthXl
+		},
+		ref,
+		maxWidth,
+		fixed,
+		disableGutters,
+		...others
+	});
+});
+//#endregion
+export { HvContainer };

package/dist/Container/Container.styles.js

@@ -1,15 +1,14 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvContainer", {
-  root: {},
-  disableGutters: {},
-  fixed: {},
-  maxWidthXs: {},
-  maxWidthSm: {},
-  maxWidthMd: {},
-  maxWidthLg: {},
-  maxWidthXl: {}
+//#region src/Container/Container.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvContainer", {
+	root: {},
+	disableGutters: {},
+	fixed: {},
+	maxWidthXs: {},
+	maxWidthSm: {},
+	maxWidthMd: {},
+	maxWidthLg: {},
+	maxWidthXl: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Controls/Controls.js

@@ -1,78 +1,54 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
+import { HvButton } from "../Button/Button.js";
+import { HvMultiButton } from "../MultiButton/MultiButton.js";
 import { HvControlsContextProvider } from "./context/ControlsContext.js";
 import { useClasses } from "./Controls.styles.js";
-import { staticClasses } from "./Controls.styles.js";
-import { HvMultiButton } from "../MultiButton/MultiButton.js";
-import { HvButton } from "../Button/Button.js";
-const HvControls = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    views,
-    callbacks,
-    selectedView,
-    defaultView,
-    children,
-    hideViewSwitcher = false,
-    onViewChange
-  } = useDefaultProps("HvControls", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [currentView, setCurrentView] = useControlled(
-    selectedView,
-    defaultView
-  );
-  const onViewChangeHandler = (evt, btnId) => {
-    setCurrentView(btnId);
-    onViewChange?.(evt, btnId);
-  };
-  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);
-  const onSortHandler = (value) => callbacks?.setSortBy?.([
-    {
-      id: value?.accessor,
-      desc: value?.desc
-    }
-  ]);
-  const childrenCount = Children.count(children);
-  const childrenArray = Children.toArray(children);
-  const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
-  const leftChildren = childrenArray.slice(0, childrenIndexCut);
-  const rightChildren = childrenArray.slice(
-    childrenIndexCut,
-    childrenCount || 0
-  );
-  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), children: /* @__PURE__ */ jsxs(
-    HvControlsContextProvider,
-    {
-      value: {
-        onSearch: onSearchHandler,
-        onSort: onSortHandler
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
-        /* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
-          rightChildren,
-          views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(
-            HvButton,
-            {
-              id: btnId,
-              icon: true,
-              selected: currentView === btnId,
-              onClick: (evt) => onViewChangeHandler(evt, btnId),
-              ...others,
-              children: icon
-            },
-            btnId
-          )) })
-        ] })
-      ]
-    }
-  ) });
-};
-export {
-  HvControls,
-  staticClasses as controlsClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Controls/Controls.tsx
+var HvControls = (props) => {
+	const { id, className, classes: classesProp, views, callbacks, selectedView, defaultView, children, hideViewSwitcher = false, onViewChange } = useDefaultProps("HvControls", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [currentView, setCurrentView] = useControlled(selectedView, defaultView);
+	const onViewChangeHandler = (evt, btnId) => {
+		setCurrentView(btnId);
+		onViewChange?.(evt, btnId);
+	};
+	const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);
+	const onSortHandler = (value) => callbacks?.setSortBy?.([{
+		id: value?.accessor,
+		desc: value?.desc
+	}]);
+	const childrenCount = Children.count(children);
+	const childrenArray = Children.toArray(children);
+	const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * .5) : 0;
+	const leftChildren = childrenArray.slice(0, childrenIndexCut);
+	const rightChildren = childrenArray.slice(childrenIndexCut, childrenCount || 0);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx(classes.root, className),
+		children: /* @__PURE__ */ jsxs(HvControlsContextProvider, {
+			value: {
+				onSearch: onSearchHandler,
+				onSort: onSortHandler
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(classes.section, classes.leftSection),
+				children: leftChildren
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(classes.section, classes.rightSection),
+				children: [rightChildren, views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(HvButton, {
+					id: btnId,
+					icon: true,
+					selected: currentView === btnId,
+					onClick: (evt) => onViewChangeHandler(evt, btnId),
+					...others,
+					children: icon
+				}, btnId)) })]
+			})]
+		})
+	});
 };
+//#endregion
+export { HvControls };

package/dist/Controls/Controls.styles.js

@@ -1,15 +1,18 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvControls", {
-  root: {
-    display: "inline-flex",
-    width: "100%",
-    justifyContent: "space-between"
-  },
-  section: { display: "inline-flex", alignItems: "flex-end", gap: 10 },
-  rightSection: {},
-  leftSection: {}
+//#region src/Controls/Controls.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvControls", {
+	root: {
+		display: "inline-flex",
+		width: "100%",
+		justifyContent: "space-between"
+	},
+	section: {
+		display: "inline-flex",
+		alignItems: "flex-end",
+		gap: 10
+	},
+	rightSection: {},
+	leftSection: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Controls/LeftControl/LeftControl.js

@@ -1,40 +1,27 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { HvControlsContext } from "../context/ControlsContext.js";
-import { useClasses } from "./LeftControl.styles.js";
-import { staticClasses } from "./LeftControl.styles.js";
 import { HvInput } from "../../Input/Input.js";
-const HvLeftControl = ({
-  id,
-  classes: classesProp,
-  className,
-  children,
-  placeholder = "Search",
-  onSearch,
-  hideSearch = false,
-  searchProps,
-  ...others
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  const { onSearch: onSearchHandler } = useContext(HvControlsContext);
-  const onChangeFilter = (e, value) => {
-    onSearch?.(e, value);
-    onSearchHandler?.(value);
-  };
-  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
-    !hideSearch && /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        type: "search",
-        placeholder,
-        onChange: onChangeFilter,
-        ...searchProps
-      }
-    ),
-    children
-  ] });
-};
-export {
-  HvLeftControl,
-  staticClasses as leftControlClasses
+import HvControlsContext from "../context/ControlsContext.js";
+import { useClasses } from "./LeftControl.styles.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Controls/LeftControl/LeftControl.tsx
+var HvLeftControl = ({ id, classes: classesProp, className, children, placeholder = "Search", onSearch, hideSearch = false, searchProps, ...others }) => {
+	const { classes, cx } = useClasses(classesProp);
+	const { onSearch: onSearchHandler } = useContext(HvControlsContext);
+	const onChangeFilter = (e, value) => {
+		onSearch?.(e, value);
+		onSearchHandler?.(value);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: [!hideSearch && /* @__PURE__ */ jsx(HvInput, {
+			type: "search",
+			placeholder,
+			onChange: onChangeFilter,
+			...searchProps
+		}), children]
+	});
 };
+//#endregion
+export { HvLeftControl };

package/dist/Controls/LeftControl/LeftControl.styles.js

@@ -1,8 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvLeftControl", {
-  root: { display: "inline-flex", gap: 10 }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Controls/LeftControl/LeftControl.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvLeftControl", { root: {
+	display: "inline-flex",
+	gap: 10
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/Controls/RightControl/RightControl.js

@@ -1,48 +1,33 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useContext } from "react";
-import { HvControlsContext } from "../context/ControlsContext.js";
-import { useClasses } from "./RightControl.styles.js";
-import { staticClasses } from "./RightControl.styles.js";
+import HvControlsContext from "../context/ControlsContext.js";
 import { HvDropdown } from "../../Dropdown/Dropdown.js";
-const HvRightControl = ({
-  id,
-  classes: classesProp,
-  className,
-  children,
-  values,
-  onSort,
-  hideSortBy = false,
-  sortProps,
-  ...others
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  const [dropDownValues, setDropdownValues] = useState(values);
-  const { onSort: onSortHandler } = useContext(HvControlsContext);
-  const handleChangeSort = (value) => {
-    onSort?.(value);
-    onSortHandler?.(value);
-    setDropdownValues(
-      (prevValues) => prevValues?.map((prevValue) => ({
-        ...prevValue,
-        selected: prevValue.id === value.id
-      }))
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
-    !hideSortBy && /* @__PURE__ */ jsx(
-      HvDropdown,
-      {
-        values: dropDownValues,
-        className: classes.sortDropdown,
-        onChange: handleChangeSort,
-        singleSelectionToggle: false,
-        ...sortProps
-      }
-    ),
-    children
-  ] });
-};
-export {
-  HvRightControl,
-  staticClasses as rightControlClasses
+import { useClasses } from "./RightControl.styles.js";
+import { useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Controls/RightControl/RightControl.tsx
+var HvRightControl = ({ id, classes: classesProp, className, children, values, onSort, hideSortBy = false, sortProps, ...others }) => {
+	const { classes, cx } = useClasses(classesProp);
+	const [dropDownValues, setDropdownValues] = useState(values);
+	const { onSort: onSortHandler } = useContext(HvControlsContext);
+	const handleChangeSort = (value) => {
+		onSort?.(value);
+		onSortHandler?.(value);
+		setDropdownValues((prevValues) => prevValues?.map((prevValue) => ({
+			...prevValue,
+			selected: prevValue.id === value.id
+		})));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: [!hideSortBy && /* @__PURE__ */ jsx(HvDropdown, {
+			values: dropDownValues,
+			className: classes.sortDropdown,
+			onChange: handleChangeSort,
+			singleSelectionToggle: false,
+			...sortProps
+		}), children]
+	});
 };
+//#endregion
+export { HvRightControl };

package/dist/Controls/RightControl/RightControl.styles.js

@@ -1,9 +1,11 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvRightControl", {
-  root: { display: "inline-flex", gap: 10 },
-  sortDropdown: { minWidth: 200 }
+//#region src/Controls/RightControl/RightControl.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvRightControl", {
+	root: {
+		display: "inline-flex",
+		gap: 10
+	},
+	sortDropdown: { minWidth: 200 }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Controls/context/ControlsContext.js

@@ -1,8 +1,7 @@
 import { createContext } from "react";
-const HvControlsContext = createContext({});
-const HvControlsContextProvider = HvControlsContext.Provider;
+//#region src/Controls/context/ControlsContext.ts
+var HvControlsContext = createContext({});
+var HvControlsContextProvider = HvControlsContext.Provider;
 HvControlsContext.Consumer;
-export {
-  HvControlsContext,
-  HvControlsContextProvider
-};
+//#endregion
+export { HvControlsContextProvider, HvControlsContext as default };