@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/Slider/Slider.styles.js

@@ -1,223 +1,190 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-import base from "./base.js";
-const dot = {
-  position: "absolute",
-  bottom: "-1px",
-  marginLeft: "0px",
-  width: "1px",
-  height: "4px",
-  border: "none",
-  backgroundColor: theme.colors.border,
-  cursor: "pointer",
-  verticalAlign: "middle",
-  zIndex: "-3"
+import base_default from "./base.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Slider/Slider.styles.tsx
+var dot = {
+	position: "absolute",
+	bottom: "-1px",
+	marginLeft: "0px",
+	width: "1px",
+	height: "4px",
+	border: "none",
+	backgroundColor: theme.colors.border,
+	cursor: "pointer",
+	verticalAlign: "middle",
+	zIndex: "-3"
 };
-const dragSquare = {
-  cursor: "grab",
-  width: "calc(100% - 40px)",
-  left: "20px",
-  height: "27px",
-  position: "absolute",
-  top: "-12px",
-  content: "''",
-  background: "transparent",
-  borderTop: `12px solid ${theme.colors.primaryDimmed}`,
-  borderBottom: `12px solid ${theme.colors.primaryDimmed}`,
-  zIndex: "-2"
+var dragSquare = {
+	cursor: "grab",
+	width: "calc(100% - 40px)",
+	left: "20px",
+	height: "27px",
+	position: "absolute",
+	top: "-12px",
+	content: "''",
+	background: "transparent",
+	borderTop: `12px solid ${theme.colors.primaryDimmed}`,
+	borderBottom: `12px solid ${theme.colors.primaryDimmed}`,
+	zIndex: "-2"
 };
-const ring = {
-  width: "32px",
-  height: "32px",
-  borderRadius: theme.radii.full,
-  border: `9px solid ${theme.colors.primaryDimmed}`,
-  opacity: "100%",
-  content: "''",
-  position: "absolute",
-  top: "-10px",
-  left: "-10px"
+var ring = {
+	width: "32px",
+	height: "32px",
+	borderRadius: theme.radii.full,
+	border: `9px solid ${theme.colors.primaryDimmed}`,
+	opacity: "100%",
+	content: "''",
+	position: "absolute",
+	top: "-10px",
+	left: "-10px"
 };
-const border = {
-  width: "20px",
-  height: "20px",
-  borderRadius: theme.radii.full,
-  border: `2px solid ${theme.colors.textDimmed}`,
-  content: "''",
-  position: "absolute",
-  top: "-4px",
-  left: "-4px"
+var border = {
+	width: "20px",
+	height: "20px",
+	borderRadius: theme.radii.full,
+	border: `2px solid ${theme.colors.textDimmed}`,
+	content: "''",
+	position: "absolute",
+	top: "-4px",
+	left: "-4px"
 };
-const sliderStyles = {
-  mark: {
-    ...theme.typography.caption1,
-    fontFamily: theme.fontFamily.body,
-    top: "-2px",
-    zIndex: -1
-  },
-  disabledMark: {
-    ...theme.typography.caption1,
-    fontFamily: theme.fontFamily.body,
-    color: theme.colors.textDisabled,
-    cursor: "not-allowed",
-    top: "-2px"
-  },
-  dot: {
-    ...dot
-  },
-  dotDisabled: {
-    ...dot,
-    cursor: "not-allowed"
-  },
-  knobHidden: { display: "none" },
-  knobHiddenLast: {
-    borderColor: "transparent",
-    height: "3px",
-    width: "2px",
-    marginLeft: "-1px",
-    border: "none",
-    marginTop: "0px",
-    left: "100%",
-    touchAction: "none",
-    cursor: "default"
-  },
-  knobInner: {
-    borderColor: "transparent",
-    boxShadow: "none",
-    backgroundColor: theme.colors.text,
-    width: "16px",
-    height: "16px"
-  },
-  knobOuter: {
-    position: "relative",
-    borderColor: "transparent",
-    borderRadius: theme.radii.full,
-    boxShadow: "none",
-    backgroundColor: theme.colors.border,
-    width: "32px",
-    height: "32px",
-    top: "-80%",
-    left: "-80%",
-    zIndex: "-1"
-  },
-  track: {
-    backgroundColor: theme.colors.text,
-    height: "3px",
-    zIndex: "-1",
-    marginTop: "-1px"
-  },
-  rail: { backgroundColor: theme.colors.border, height: "1px", zIndex: "-3" }
+var sliderStyles = {
+	mark: {
+		...theme.typography.caption1,
+		fontFamily: theme.fontFamily.body,
+		top: "-2px",
+		zIndex: -1
+	},
+	disabledMark: {
+		...theme.typography.caption1,
+		fontFamily: theme.fontFamily.body,
+		color: theme.colors.textDisabled,
+		cursor: "not-allowed",
+		top: "-2px"
+	},
+	dot: { ...dot },
+	dotDisabled: {
+		...dot,
+		cursor: "not-allowed"
+	},
+	knobHidden: { display: "none" },
+	knobHiddenLast: {
+		borderColor: "transparent",
+		height: "3px",
+		width: "2px",
+		marginLeft: "-1px",
+		border: "none",
+		marginTop: "0px",
+		left: "100%",
+		touchAction: "none",
+		cursor: "default"
+	},
+	knobInner: {
+		borderColor: "transparent",
+		boxShadow: "none",
+		backgroundColor: theme.colors.text,
+		width: "16px",
+		height: "16px"
+	},
+	knobOuter: {
+		position: "relative",
+		borderColor: "transparent",
+		borderRadius: theme.radii.full,
+		boxShadow: "none",
+		backgroundColor: theme.colors.border,
+		width: "32px",
+		height: "32px",
+		top: "-80%",
+		left: "-80%",
+		zIndex: "-1"
+	},
+	track: {
+		backgroundColor: theme.colors.text,
+		height: "3px",
+		zIndex: "-1",
+		marginTop: "-1px"
+	},
+	rail: {
+		backgroundColor: theme.colors.border,
+		height: "1px",
+		zIndex: "-3"
+	}
 };
-const { staticClasses, useClasses } = createClasses("HvSlider", {
-  sliderBase: { ...base },
-  rootDisabled: {
-    cursor: "not-allowed",
-    "&& .rc-slider-disabled": {
-      background: "transparent"
-    }
-  },
-  sliderContainer: { marginBottom: "18px", padding: "0 23px" },
-  error: { padding: "0 8px" },
-  trackDragging: {
-    cursor: "grabbing",
-    "&& .rc-slider-track": {
-      "&::before": {
-        ...dragSquare,
-        cursor: "grabbing"
-      }
-    }
-  },
-  trackStandBy: {
-    "&& .rc-slider-track": {
-      "&:hover": {
-        "&::before": {
-          ...dragSquare
-        }
-      }
-    }
-  },
-  sliderRoot: { zIndex: 0 },
-  rootRange: {},
-  handleContainer: {
-    "&& .rc-slider-handle": {
-      cursor: "pointer",
-      marginTop: "-8px",
-      opacity: 1,
-      "&:active": {
-        cursor: "grab",
-        "&::before": {
-          ...ring
-        },
-        "&::after": {
-          ...border
-        }
-      },
-      "&:hover": {
-        "&::before": {
-          ...ring
-        },
-        "&::after": {
-          ...border
-        }
-      },
-      // Note about the usage of `!important below`: the way the rc-slider allows us to
-      // style the knobs is through inline styles. This means that the `box-shadow`, which
-      // is an inline style and is set to `none` to prevent the default rc-slider style to
-      // show, can't be overridden for the focus scenario unless we use the `!important` flag.
-      "&:focus-visible": {
-        ...outlineStyles,
-        boxShadow: "0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important",
-        "&::after": {
-          ...border
-        }
-      }
-    }
-  },
-  handle: {},
-  handleContainerDisabled: {
-    "&& .rc-slider-handle": {
-      cursor: "not-allowed",
-      marginTop: "-8px",
-      opacity: 1,
-      "&:active": {
-        cursor: "not-allowed"
-      },
-      "&:hover": {
-        cursor: "not-allowed"
-      }
-    }
-  },
-  handleHiddenContainer: { display: "none" },
-  labelContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: "12px",
-    marginLeft: "20px",
-    marginRight: "20px"
-  },
-  labelIncluded: { justifyContent: "space-between" },
-  onlyInput: { justifyContent: "flex-end" },
-  label: {},
-  root: {},
-  sliderTooltip: {
-    "&& .rc-slider-tooltip-inner": {
-      background: theme.colors.bgContainer,
-      borderRadius: 0,
-      maxWidth: "532px",
-      height: "100%",
-      padding: theme.space.sm,
-      ...theme.typography.body,
-      fontFamily: theme.fontFamily.body,
-      boxShadow: "none"
-    },
-    "&& .rc-slider-tooltip-arrow": {
-      visibility: "hidden"
-    }
-  }
+var { staticClasses, useClasses } = createClasses("HvSlider", {
+	sliderBase: { ...base_default },
+	rootDisabled: {
+		cursor: "not-allowed",
+		"&& .rc-slider-disabled": { background: "transparent" }
+	},
+	sliderContainer: {
+		marginBottom: "18px",
+		padding: "0 23px"
+	},
+	error: { padding: "0 8px" },
+	trackDragging: {
+		cursor: "grabbing",
+		"&& .rc-slider-track": { "&::before": {
+			...dragSquare,
+			cursor: "grabbing"
+		} }
+	},
+	trackStandBy: { "&& .rc-slider-track": { "&:hover": { "&::before": { ...dragSquare } } } },
+	sliderRoot: { zIndex: 0 },
+	rootRange: {},
+	handleContainer: { "&& .rc-slider-handle": {
+		cursor: "pointer",
+		marginTop: "-8px",
+		opacity: 1,
+		"&:active": {
+			cursor: "grab",
+			"&::before": { ...ring },
+			"&::after": { ...border }
+		},
+		"&:hover": {
+			"&::before": { ...ring },
+			"&::after": { ...border }
+		},
+		"&:focus-visible": {
+			...outlineStyles,
+			boxShadow: "0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important",
+			"&::after": { ...border }
+		}
+	} },
+	handle: {},
+	handleContainerDisabled: { "&& .rc-slider-handle": {
+		cursor: "not-allowed",
+		marginTop: "-8px",
+		opacity: 1,
+		"&:active": { cursor: "not-allowed" },
+		"&:hover": { cursor: "not-allowed" }
+	} },
+	handleHiddenContainer: { display: "none" },
+	labelContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginBottom: "12px",
+		marginLeft: "20px",
+		marginRight: "20px"
+	},
+	labelIncluded: { justifyContent: "space-between" },
+	onlyInput: { justifyContent: "flex-end" },
+	label: {},
+	root: {},
+	sliderTooltip: {
+		"&& .rc-slider-tooltip-inner": {
+			background: theme.colors.bgContainer,
+			borderRadius: 0,
+			maxWidth: "532px",
+			height: "100%",
+			padding: theme.space.sm,
+			...theme.typography.body,
+			fontFamily: theme.fontFamily.body,
+			boxShadow: "none"
+		},
+		"&& .rc-slider-tooltip-arrow": { visibility: "hidden" }
+	}
 });
-export {
-  sliderStyles,
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { sliderStyles, staticClasses, useClasses };

package/dist/Slider/SliderInput/SliderInput.js

@@ -1,61 +1,42 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, Fragment } from "react";
 import { setId } from "../../utils/setId.js";
+import { HvInput } from "../../Input/Input.js";
 import { knobsValuesToString, stringValuesToKnobs } from "../utils.js";
 import { useClasses } from "./SliderInput.styles.js";
-import { staticClasses } from "./SliderInput.styles.js";
-import { HvInput } from "../../Input/Input.js";
-const HvSliderInput = ({
-  classes: classesProp,
-  className,
-  id,
-  label,
-  status,
-  values: valuesProp = [],
-  inputProps = [],
-  readOnly = false,
-  disabled = false,
-  markDigits = 0,
-  onChange,
-  ...others
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  const [inputValues, setInputValues] = useState(
-    knobsValuesToString(valuesProp, markDigits)
-  );
-  const handleChange = (index) => {
-    if (disabled) return;
-    onChange?.(stringValuesToKnobs(inputValues), index);
-  };
-  useEffect(() => {
-    setInputValues(knobsValuesToString(valuesProp, markDigits));
-  }, [markDigits, valuesProp]);
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    index !== 0 && /* @__PURE__ */ jsx("span", { children: "—" }),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        id: setId(id, index),
-        "aria-label": `${label}-${index}`,
-        className: classes.input,
-        disabled,
-        value: Number.isNaN(value) || value == null ? "" : value.toString(),
-        onEnter: () => handleChange(index),
-        onBlur: () => handleChange(index),
-        onChange: (_, inputValue) => {
-          const newValues = [...inputValues];
-          newValues[index] = inputValue;
-          setInputValues(newValues);
-        },
-        status: status?.[index] || "standBy",
-        readOnly,
-        disableClear: true,
-        ...inputProps[index]
-      }
-    )
-  ] }, setId(id, index))) });
-};
-export {
-  HvSliderInput,
-  staticClasses as sliderInputClasses
+import { Fragment, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Slider/SliderInput/SliderInput.tsx
+var HvSliderInput = ({ classes: classesProp, className, id, label, status, values: valuesProp = [], inputProps = [], readOnly = false, disabled = false, markDigits = 0, onChange, ...others }) => {
+	const { classes, cx } = useClasses(classesProp);
+	const [inputValues, setInputValues] = useState(knobsValuesToString(valuesProp, markDigits));
+	const handleChange = (index) => {
+		if (disabled) return;
+		onChange?.(stringValuesToKnobs(inputValues), index);
+	};
+	useEffect(() => {
+		setInputValues(knobsValuesToString(valuesProp, markDigits));
+	}, [markDigits, valuesProp]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, className),
+		...others,
+		children: inputValues.map((value, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index !== 0 && /* @__PURE__ */ jsx("span", { children: "—" }), /* @__PURE__ */ jsx(HvInput, {
+			id: setId(id, index),
+			"aria-label": `${label}-${index}`,
+			className: classes.input,
+			disabled,
+			value: Number.isNaN(value) || value == null ? "" : value.toString(),
+			onEnter: () => handleChange(index),
+			onBlur: () => handleChange(index),
+			onChange: (_, inputValue) => {
+				const newValues = [...inputValues];
+				newValues[index] = inputValue;
+				setInputValues(newValues);
+			},
+			status: status?.[index] || "standBy",
+			readOnly,
+			disableClear: true,
+			...inputProps[index]
+		})] }, setId(id, index)))
+	});
 };
+//#endregion
+export { HvSliderInput };

package/dist/Slider/SliderInput/SliderInput.styles.js

@@ -1,16 +1,15 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvSliderInput", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    color: theme.colors.textSubtle,
-    gap: theme.space.xs,
-    fontSize: 16
-  },
-  input: { maxWidth: "50px" }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Slider/SliderInput/SliderInput.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvSliderInput", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		color: theme.colors.textSubtle,
+		gap: theme.space.xs,
+		fontSize: 16
+	},
+	input: { maxWidth: "50px" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };