@connectif/ui-components 9.0.4 → 9.0.5

package/CHANGELOG.md

@@ -1,11 +1,31 @@
 # Changelog
 
+## [9.0.5] - 2026-06- 19
+
+### Added
+
+- `InputLabel`: added focused visual state — the label color switches to `primary.main` when the associated input (linked via `htmlFor`) is focused.
+- `InputLabel`: added `focused` prop to allow external control of the focused visual state, overriding the internal focus tracking.
+- `InputLabel`: added `onClick` prop forwarded to the underlying `<label>` element.
+- `ColorPicker`: added `disabled` prop.
+
+### Changed
+
+- `Toolbar` story `ToolbarInDrawer`: drawer now starts closed, with an open button and a close button in the toolbar actions.
+- `Dialog` story: dialog now starts closed, with a centered "Open Dialog" button to open it.
+- `ConfirmationDialog` story: dialogs now start closed, with a centered "Open Dialog" button to open them.
+- `Snackbar` story: removed the `Dialog` wrapper — buttons now render directly.
+
 ## [9.0.4] - 2026-06-08
 
 ### Changed
 
 - `LineChart`: now the secondary metric is positioned in left side of the chart.
 
+### Fixed
+
+- `Stepper`: Stepper connector fixed when only label is specified in steps
+
 ## [9.0.3] - 2026-06-02
 
 ### Added

package/dist/components/input/ColorPicker.d.ts

@@ -53,6 +53,11 @@ export type ColorPickerProps = {
      * @default 'auto'
      */
     mode?: ColorPickerMode;
+    /**
+     * (optional) Whether the color picker is disabled.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * A function to update color value
      */

package/dist/components/input/InputLabel.d.ts

@@ -21,6 +21,15 @@ export type InputLabelProps = React.PropsWithChildren<{
      * Show an info icon with the text as tooltip
      */
     infoText?: TooltipProps['title'];
+    /**
+     * Override the focused visual state. When provided, takes
+     * precedence over the internal focus tracking via `htmlFor`.
+     */
+    focused?: boolean;
+    /**
+     * Click handler for the label element.
+     */
+    onClick?: React.MouseEventHandler<HTMLLabelElement>;
 }>;
 /**
  * A label text to be shown along with form fields, like Select or TextFields, usually
@@ -44,6 +53,15 @@ declare const InputLabel: React.ForwardRefExoticComponent<{
      * Show an info icon with the text as tooltip
      */
     infoText?: TooltipProps["title"];
+    /**
+     * Override the focused visual state. When provided, takes
+     * precedence over the internal focus tracking via `htmlFor`.
+     */
+    focused?: boolean;
+    /**
+     * Click handler for the label element.
+     */
+    onClick?: React.MouseEventHandler<HTMLLabelElement>;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLLabelElement>>;

package/dist/index.js

@@ -19343,7 +19343,7 @@ function useDebouncedCallback(callback, wait) {
 }
 
 // src/components/input/DebouncedTextField.tsx
-import { useEffect as useEffect12, useState as useState17 } from "react";
+import { useEffect as useEffect13, useState as useState18 } from "react";
 
 // src/components/input/TextField.tsx
 import * as React52 from "react";
@@ -19355,23 +19355,49 @@ import { styled as styled4 } from "@mui/material";
 import { jsx as jsx99, jsxs as jsxs44 } from "react/jsx-runtime";
 var getSeverityColor = ({ palette: palette2 }, severity) => severity === "error" ? palette2.error.main : palette2.grey[900];
 var StyledLabel = styled4("label", {
-  shouldForwardProp: (prop) => prop !== "severity"
+  shouldForwardProp: (prop) => prop !== "severity" && prop !== "focused"
 })(
-  ({ severity, theme: theme2 }) => theme2.unstable_sx({
+  ({ severity, focused, theme: theme2 }) => theme2.unstable_sx({
     display: "block",
     padding: "4px 0",
     ...variants["caption"],
-    color: getSeverityColor(theme2, severity)
+    color: focused && severity !== "error" ? theme2.palette.primary.main : getSeverityColor(theme2, severity)
   })
 );
 var InputLabel = React50.forwardRef(
-  function InputLabel2({ htmlFor, sx, children, severity = "info", infoText }, ref) {
+  function InputLabel2({
+    htmlFor,
+    sx,
+    children,
+    severity = "info",
+    infoText,
+    focused: focusedProp,
+    onClick
+  }, ref) {
+    const [internalFocused, setInternalFocused] = React50.useState(false);
+    const focused = focusedProp ?? internalFocused;
+    React50.useEffect(() => {
+      const input = htmlFor ? document.getElementById(htmlFor) : null;
+      if (!input) {
+        return;
+      }
+      const handleFocus = () => setInternalFocused(true);
+      const handleBlur = () => setInternalFocused(false);
+      input.addEventListener("focus", handleFocus);
+      input.addEventListener("blur", handleBlur);
+      return () => {
+        input.removeEventListener("focus", handleFocus);
+        input.removeEventListener("blur", handleBlur);
+      };
+    }, [htmlFor]);
     return /* @__PURE__ */ jsxs44(
       StyledLabel,
       {
         htmlFor,
         sx,
         severity,
+        focused,
+        onClick,
         ref,
         children: [
           children,
@@ -19749,7 +19775,7 @@ var TextField_default = TextField;
 // src/components/input/DebouncedTextField.tsx
 import { jsx as jsx102 } from "react/jsx-runtime";
 var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value, onChange, debounce = 100, ...rest }, ref) {
-  const [text, setText] = useState17(value ?? "");
+  const [text, setText] = useState18(value ?? "");
   const expectedChangeRef = React53.useRef(void 0);
   const onChangeDebounced = useDebouncedCallback(
     (e) => {
@@ -19760,7 +19786,7 @@ var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value
     },
     debounce
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (expectedChangeRef.current === value) {
       expectedChangeRef.current = void 0;
     } else {
@@ -22552,6 +22578,7 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
   popoverZIndex,
   inputWidthStyle = "150px",
   mode = "auto",
+  disabled = false,
   onChange
 }, ref) {
   const { t } = useTranslation();
@@ -22584,6 +22611,7 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
     {
       iconId: value ? "color-square" : "transparent",
       size: "M",
+      disabled,
       onClick: (event) => {
         setAnchorEl(event.currentTarget);
       },
@@ -22626,6 +22654,11 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
       );
     }
   }, [value, internalPickerValue, colorChangeOccurred, allowEmpty, mode]);
+  React67.useEffect(() => {
+    if (disabled) {
+      setAnchorEl(void 0);
+    }
+  }, [disabled]);
   React67.useEffect(() => {
     if (anchorEl) {
       const handleFocus = () => {
@@ -22663,14 +22696,14 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
       {
         value: textFieldValue,
         label,
+        disabled,
         sx: {
           width: inputWidthStyle,
           height: "36px !important"
         },
         inputSx: {
           fontFamily: "Source Sans Pro, sans-serif",
-          fontWeight: "400",
-          color: grey900
+          fontWeight: "400"
         },
         placeholder: t("COLOR_PICKER.VALUE_NOT_DEFINED"),
         onChange: handleTextFieldChange,
@@ -23538,7 +23571,7 @@ import * as React73 from "react";
 // src/components/input/SelectPopover.tsx
 import * as React72 from "react";
 import { Grid as Grid4, Stack as Stack12 } from "@mui/material";
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { jsx as jsx132, jsxs as jsxs62 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
@@ -23576,9 +23609,9 @@ var SelectPopover = function SelectPopover2({
   itemsTitle
 }) {
   const { t } = useTranslation();
-  const [searchText, setSearchText] = useState30("");
-  const [isScrollBottom, setIsScrollBottom] = useState30(false);
-  const [currentItems, setCurrentItems] = useState30([]);
+  const [searchText, setSearchText] = useState31("");
+  const [isScrollBottom, setIsScrollBottom] = useState31(false);
+  const [currentItems, setCurrentItems] = useState31([]);
   const [currentSelectedItems, setCurrentSelectedItems] = React72.useState([]);
   const prevSelectedItemsIdsRef = React72.useRef([]);
   const onSearchTextChanged = (text) => {
@@ -28142,7 +28175,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React95 from "react";
-import { useEffect as useEffect28, useRef as useRef33, useState as useState41 } from "react";
+import { useEffect as useEffect29, useRef as useRef33, useState as useState42 } from "react";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -28179,9 +28212,9 @@ function SwipeableViews({
   const containerRef = useRef33(null);
   const scrollTimeout = useRef33(null);
   const scrollingMethod = useRef33("none");
-  const [previousIndex, setPreviousIndex] = useState41(index);
+  const [previousIndex, setPreviousIndex] = useState42(index);
   const hideScrollAnimation = useRef33(true);
-  useEffect28(() => {
+  useEffect29(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -28806,7 +28839,7 @@ var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React99 from "react";
-import { useState as useState44 } from "react";
+import { useState as useState45 } from "react";
 import { jsx as jsx182, jsxs as jsxs89 } from "react/jsx-runtime";
 var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
   title,
@@ -28818,7 +28851,7 @@ var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
   const textElementRef = React99.useRef(
     null
   );
-  const [showHoverActions, setShowHoverActions] = useState44(false);
+  const [showHoverActions, setShowHoverActions] = useState45(false);
   return /* @__PURE__ */ jsx182(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx182(
     TextEllipsisTooltip_default,
     {