elbe-ui 1.0.6 → 1.0.8

package/dist/ui/components/dialog.d.ts

@@ -1,9 +1,10 @@
 import type { ElbeChildren } from "../util/types";
-export declare function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, }: {
+export declare function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, maxWidth, }: {
     _style?: React.CSSProperties;
     title: string;
     open: boolean;
     onClose: () => void;
     children: ElbeChildren;
     barrierDismissible?: boolean;
+    maxWidth?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/dialog.js

@@ -3,7 +3,7 @@ import { X } from "lucide-react";
 import { useEffect } from "react";
 import { IconButton } from "./button/icon_button";
 import { Spaced } from "./layout/spaced";
-export function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, }) {
+export function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, maxWidth, }) {
     useEffect(() => {
         if (open) {
             document.body.style.overflow = "hidden";
@@ -20,7 +20,10 @@ export function ElbeDialog({ title, open, onClose, children, _style, barrierDism
             e.preventDefault();
             if (barrierDismissible)
                 onClose();
-        }, open: open, style: Object.assign({ textAlign: "start" }, (_style !== null && _style !== void 0 ? _style : {})), children: _jsxs("div", { className: "elbe_dialog_base primary card plain-opaque padding-none", style: { maxWidth: "40rem", minWidth: "10rem" }, children: [_jsxs("div", { className: "row cross-center padded main-between", children: [_jsx("div", { className: "body-l b", children: title }), _jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
+        }, open: open, style: Object.assign({ textAlign: "start" }, (_style !== null && _style !== void 0 ? _style : {})), children: _jsxs("div", { className: "elbe_dialog_base primary card plain-opaque padding-none", style: {
+                maxWidth: `min(${maxWidth !== null && maxWidth !== void 0 ? maxWidth : 40}rem, 100%)`,
+                minWidth: "10rem",
+            }, children: [_jsxs("div", { className: "row cross-center padded main-between", children: [_jsx("div", { className: "body-l b", children: title }), _jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 onClose();

package/dist/ui/components/input/select.d.ts

@@ -1,10 +1,12 @@
 import { ActionElbeProps } from "../base/box";
-export declare function Select({ options, value, label, onChange, ...elbe }: {
+export declare function Select<T>({ options, value, label, hideLabel, width, onChange, ...elbe }: {
     options: {
-        key: string;
+        key: T;
         label: string;
     }[];
-    value?: string;
+    value?: T;
     label?: string;
-    onChange: (value: string) => any;
+    hideLabel?: boolean;
+    width?: number;
+    onChange?: (value: T) => any;
 } & ActionElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/input/select.js

@@ -9,9 +9,41 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { randomAlphaNum } from "../../util/util";
 import { applyProps } from "../base/box";
 export function Select(_a) {
-    var { options, value, label, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "onChange"]);
-    return (_jsx("select", Object.assign({}, applyProps("select", elbe), { value: value, role: "combobox", onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
+    var _b;
+    var { options, value, label, hideLabel, width, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "hideLabel", "width", "onChange"]);
+    const id = (_b = elbe.id) !== null && _b !== void 0 ? _b : randomAlphaNum(8, "input_field_");
+    let valueIndex = options.findIndex((o) => o.key === value);
+    // If the value is not found, select the first option without a key (if any) or the first option
+    if (valueIndex === -1) {
+        valueIndex = options.findIndex((v) => !v.key);
+        if (valueIndex === -1) {
+            valueIndex = 0;
+        }
+    }
+    let valStr = "-".repeat(valueIndex + 1);
+    return (_jsxs("div", { style: {
+            flex: elbe.flex ? (elbe.flex === true ? 1 : elbe.flex) : undefined,
+            width: elbe.flex ? undefined : (width !== null && width !== void 0 ? width : 12) + "rem",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            filter: onChange ? undefined : "grayscale(1) opacity(0.5)",
+            pointerEvents: onChange ? undefined : "none",
+            cursor: onChange ? undefined : "not-allowed",
+        }, "data-tooltip": elbe.tooltip, children: [_jsx("label", { htmlFor: id, style: {
+                    display: hideLabel ? "none" : "block",
+                    fontSize: "0.8rem",
+                    padding: "0.2rem 0.5rem",
+                }, children: label }), _jsx("select", Object.assign({ id: id }, applyProps("select", elbe, [], {
+                minHeight: "3rem",
+                cursor: onChange ? "pointer" : "not-allowed",
+            }), { value: valStr, disabled: !onChange, role: "combobox", onChange: (e) => {
+                    const index = e.currentTarget.value.length - 1;
+                    const selectedOption = options[index];
+                    selectedOption && onChange ? onChange(selectedOption.key) : null;
+                }, children: options.map(({ key, label }, i) => (_jsx("option", { value: "-".repeat(i + 1), children: label }, JSON.stringify(key)))) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {