@iobroker/gui-components 10.2.0 → 10.2.1

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.1",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -877,6 +877,12 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 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 {};