@iobroker/gui-components 10.2.0 → 10.2.2

package/README.md

@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@iobroker/gui-components": "^10.2.0",
+        "@iobroker/gui-components": "^10.2.2",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -877,6 +877,21 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.2.2 (2026-09-03)
+
+- (@GermanBluefox) Fixed: the object browser lost the column widths as soon as the page was left and opened again. Every width class has its own widths, and the stored ones were written into the class that was guessed before the container was measured, so the table fell back to the defaults of the class it really had: https://github.com/ioBroker/ioBroker.admin/issues/3616
+- (@GermanBluefox) Fixed: after reopening the object browser, the next resize stored only the two columns it touched and dropped every other width the user had set
+- (@GermanBluefox) Fixed: with "Auto" switched off, the checkboxes for "Changed from", "Quality code", "Timestamp" and "Last change" had no effect, and the header of the states view showed those columns although the rows had no cells for them
+- (@GermanBluefox) Fixed: the buttons column could not be resized, as neither it nor the value column in front of it had a resize handle
+- (@GermanBluefox) Fixed: switching "Auto" off did not store the column selection, so after a reload the table showed nothing but the ID column
+- (@GermanBluefox) A double click on a resize handle resets the widths of all width classes now, not only of the current one
+
+### 10.2.1 (2026-08-31)
+
+- (@GermanBluefox) Changed layouts for some components
+- (@GermanBluefox) Color picker was updated
+- (@GermanBluefox) Schedule wizard was updated
+
 ### 10.2.0 (2026-08-26)
 
 - (@krobipd) Corrected: the object browser stayed empty after closing the object customization dialog if any object was changed while the dialog was open (ioBroker/ioBroker.admin#3391)

package/build/Components/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ * Copyright 2018-2026 Denis Haev (bluefox) <dogafox@gmail.com>
  *
  * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,8 +14,36 @@
  * limitations under the License.
  */
 import React, { Component, type CSSProperties } from 'react';
-import { type RGBColor } from 'react-color';
+import { type RgbaColor } from 'react-colorful';
 import type { IobTheme } from '../types';
+/** Color in the `{ r, g, b, a }` notation. Kept for backwards compatibility with `react-color`. */
+export interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+/** Notation used for the value that is reported via `onChange`. */
+export type ColorPickerFormat = 'hex' | 'rgb' | 'hsl';
+/**
+ * Parse any CSS color notation into `{ r, g, b, a }`.
+ *
+ * Supported are `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`, `hsla()` (comma or space
+ * separated, with or without the `/ alpha` part) and every color name the browser knows.
+ *
+ * @param color The color string to parse.
+ * @returns the parsed color or null if the string could not be interpreted.
+ */
+export declare function parseColor(color: string): RgbaColor | null;
+/**
+ * Render `{ r, g, b, a }` in the requested notation.
+ *
+ * @param color The color to render.
+ * @param format The desired notation.
+ * @param noAlpha If true, the alpha channel is dropped.
+ * @returns the color as CSS string.
+ */
+export declare function formatColor(color: RgbaColor, format: ColorPickerFormat, noAlpha?: boolean): string;
 interface ColorPickerProps {
     /** Set to true to disable the color picker. */
     disabled?: boolean;
@@ -33,19 +61,38 @@ interface ColorPickerProps {
     style?: CSSProperties;
     /** The CSS class name. */
     className?: string;
+    /** Predefined colors that are offered below the picker. */
     customPalette?: string[];
+    /** Do not show the text field with the color value, only the color bar. */
     noInputField?: boolean;
+    /** Width of the color bar. */
     barWidth?: number;
     sx?: Record<string, any>;
+    /** @deprecated the theme is taken from the MUI context */
     theme?: IobTheme;
+    /** Hide the alpha slider and always report a fully opaque color. */
+    noAlpha?: boolean;
+    /** Notation of the reported value. If not set, it is taken from the incoming value and defaults to `rgb`. */
+    format?: ColorPickerFormat;
+    /** Do not offer the recently used colors. */
+    noRecentColors?: boolean;
+    /** Width of the picker popup in pixels. Default 280. */
+    pickerWidth?: number;
+    /** ID of the text field. Must be set if more than one color picker is rendered at the same time. */
+    id?: string;
 }
 interface ColorPickerState {
     displayColorPicker: boolean;
-    color: string | RGBColor;
+    /** The working color of the picker. Always valid, even if no color is selected. */
+    rgba: RgbaColor;
+    /** The text shown in the input field. An empty string means "no color selected". */
+    textValue: string;
+    format: ColorPickerFormat;
     anchorEl: HTMLDivElement | null;
+    recentColors: string[];
 }
 /**
- * A color picker component.
+ * A color picker component with alpha channel, eye dropper and HEX/RGB/HSL notations.
  */
 export declare class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
     /**
@@ -54,8 +101,12 @@ export declare class ColorPicker extends Component<ColorPickerProps, ColorPicker
      * @param props The properties.
      */
     constructor(props: ColorPickerProps);
-    private handleClick;
-    private handleClose;
+    /**
+     * If the props are updated from outside, they should override the state
+     *
+     * @param prevProps The previous properties.
+     */
+    componentDidUpdate(prevProps: ColorPickerProps): void;
     /**
      * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
      *
@@ -72,15 +123,46 @@ export declare class ColorPicker extends Component<ColorPickerProps, ColorPicker
      * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.
      */
     static rgb2hex(rgb: string): string;
-    private handleChange;
     /**
-     * If the props are updated from outside, they should override the state
+     * Read the recently used colors from the local storage.
+     */
+    static readRecentColors(): string[];
+    /**
+     * Remember the given color as recently used.
+     *
+     * @param color The color to remember.
+     */
+    storeRecentColor(color: string): void;
+    private handleClick;
+    private handleClose;
+    /**
+     * The user moved a slider, clicked a swatch or used the eye dropper.
+     *
+     * @param rgba The new color.
+     */
+    private handleColorChange;
+    /**
+     * The user typed into the input field. The text is taken as it is and only parsed for the preview.
+     *
+     * @param textValue The entered text.
+     */
+    private handleTextChange;
+    /**
+     * Switch between the #rrggbb, rgba() and hsla() notations.
+     *
+     * @param format The new notation.
+     */
+    private handleFormatChange;
+    private handleClear;
+    private handleEyeDropper;
+    /**
+     * Render a row of predefined colors.
      *
-     * @param _prevProps The previous properties.
-     * @param prevState The previous state.
+     * @param colors The colors to show.
+     * @param title The title above the row.
      */
-    componentDidUpdate(_prevProps: ColorPickerProps, prevState: ColorPickerState): void;
-    renderCustomPalette(): React.JSX.Element | null;
+    renderSwatches(colors: string[], title: string): React.JSX.Element | null;
+    renderPicker(): React.JSX.Element;
     render(): React.JSX.Element;
 }
 export {};