@lablup/ui-common 0.1.0-alpha.8 → 0.2.0-alpha.15

package/dist/components/BooleanToken/BooleanToken.js

@@ -0,0 +1,19 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Token as n } from "@astryxdesign/core/Token";
+//#region src/components/BooleanToken/BooleanToken.tsx
+function r({ value: r, trueLabel: i, falseLabel: a, fallback: o = "-" }) {
+	let s = e();
+	return typeof r == "boolean" ? r ? /* @__PURE__ */ t(n, {
+		color: "green",
+		label: i ?? s("uic.BooleanToken.true")
+	}) : /* @__PURE__ */ t(n, {
+		color: "default",
+		label: a ?? s("uic.BooleanToken.false")
+	}) : o;
+}
+r.displayName = "BooleanToken";
+//#endregion
+export { r as BooleanToken };
+
+//# sourceMappingURL=BooleanToken.js.map

package/dist/components/BooleanToken/BooleanToken.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanToken.js","names":[],"sources":["../../../src/components/BooleanToken/BooleanToken.tsx"],"sourcesContent":["/**\n * BooleanToken\n *\n * An on/off value as a Token: green for true, the quiet default outline for\n * false, and `fallback` when the value is not a boolean (unknown, not loaded).\n *\n * @example\n * <BooleanToken value={user.isAdmin} trueLabel=\"Admin\" falseLabel=\"Member\" />\n */\nimport type { ReactNode } from \"react\";\nimport { Token } from \"@astryxdesign/core/Token\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\n\nexport interface BooleanTokenProps {\n  /** The value. Anything but a boolean renders `fallback`. */\n  value: boolean | null | undefined;\n  /** Label for `true`. @default the catalog's uic.BooleanToken.true (\"True\") */\n  trueLabel?: string;\n  /** Label for `false`. @default the catalog's uic.BooleanToken.false (\"False\") */\n  falseLabel?: string;\n  /** Rendered when `value` is not a boolean. @default \"-\" */\n  fallback?: ReactNode;\n}\n\nexport function BooleanToken({\n  value,\n  trueLabel,\n  falseLabel,\n  fallback = \"-\",\n}: BooleanTokenProps) {\n  const t = useUicTranslator();\n  if (typeof value !== \"boolean\") {\n    return fallback;\n  }\n  return value ? (\n    <Token color=\"green\" label={trueLabel ?? t(\"uic.BooleanToken.true\")} />\n  ) : (\n    <Token color=\"default\" label={falseLabel ?? t(\"uic.BooleanToken.false\")} />\n  );\n}\n\nBooleanToken.displayName = \"BooleanToken\";\n"],"mappings":";;;;AAyBA,SAAgB,EAAa,EAC3B,UACA,cACA,eACA,cAAW,OACS;CACpB,IAAM,IAAI,EAAiB;CAI3B,OAHI,OAAO,KAAU,YAGd,IACL,kBAAC,GAAD;EAAO,OAAM;EAAQ,OAAO,KAAa,EAAE,uBAAuB;CAAI,CAAA,IAEtE,kBAAC,GAAD;EAAO,OAAM;EAAU,OAAO,KAAc,EAAE,wBAAwB;CAAI,CAAA,IALnE;AAOX;AAEA,EAAa,cAAc"}

package/dist/components/BooleanToken/BooleanToken.messages.d.ts

@@ -0,0 +1,10 @@
+export declare const booleanTokenMessages: {
+    readonly "uic.BooleanToken.true": {
+        readonly defaultMessage: "True";
+        readonly description: "Default label of a token showing a boolean value that is true";
+    };
+    readonly "uic.BooleanToken.false": {
+        readonly defaultMessage: "False";
+        readonly description: "Default label of a token showing a boolean value that is false";
+    };
+};

package/dist/components/BooleanToken/BooleanToken.messages.js

@@ -0,0 +1,16 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/BooleanToken/BooleanToken.messages.ts
+var t = e({
+	"uic.BooleanToken.true": {
+		defaultMessage: "True",
+		description: "Default label of a token showing a boolean value that is true"
+	},
+	"uic.BooleanToken.false": {
+		defaultMessage: "False",
+		description: "Default label of a token showing a boolean value that is false"
+	}
+});
+//#endregion
+export { t as booleanTokenMessages };
+
+//# sourceMappingURL=BooleanToken.messages.js.map

package/dist/components/BooleanToken/BooleanToken.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanToken.messages.js","names":[],"sources":["../../../src/components/BooleanToken/BooleanToken.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const booleanTokenMessages = defineMessages({\n  \"uic.BooleanToken.true\": {\n    defaultMessage: \"True\",\n    description: \"Default label of a token showing a boolean value that is true\",\n  },\n  \"uic.BooleanToken.false\": {\n    defaultMessage: \"False\",\n    description: \"Default label of a token showing a boolean value that is false\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAuB,EAAe;CACjD,yBAAyB;EACvB,gBAAgB;EAChB,aAAa;CACf;CACA,0BAA0B;EACxB,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

package/dist/components/BooleanToken/index.d.ts

@@ -0,0 +1,2 @@
+export { BooleanToken } from './BooleanToken';
+export type { BooleanTokenProps } from './BooleanToken';

package/dist/components/BooleanToken/index.js

@@ -0,0 +1,2 @@
+import { BooleanToken as e } from "./BooleanToken.js";
+export { e as BooleanToken };

package/dist/components/BulkEditFormItem/BulkEditFormItem.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import { FormItemProps, RuleObject, RuleRender } from '../Form';
+/** A rule without `required`: the item always shows the required marker itself. */
+type RuleWithoutRequired = Omit<RuleObject, "required"> | RuleRender;
+export interface BulkEditFormItemProps extends Omit<FormItemProps, "required" | "rules"> {
+    /** Offers "Clear", which sets the value to `null` for every record. */
+    hasClear?: boolean;
+    /** The placeholder in keep mode. @default "Keep as is" */
+    keepValueLabel?: string;
+    /** The placeholder once cleared. @default "Clear" */
+    clearValueLabel?: string;
+    /** The label of the clear action. @default "Clear" */
+    clearLabel?: string;
+    /** The label of the action that returns to keep mode. @default "Undo changes" */
+    undoLabel?: string;
+    /** The control that edits the value. */
+    children?: ReactElement;
+    rules?: RuleWithoutRequired[];
+}
+export declare function BulkEditFormItem({ name, hasClear, keepValueLabel, clearValueLabel, clearLabel, undoLabel, children, ...formItemProps }: BulkEditFormItemProps): import("react").JSX.Element;
+export declare namespace BulkEditFormItem {
+    var displayName: string;
+}
+export {};

package/dist/components/BulkEditFormItem/BulkEditFormItem.js

@@ -0,0 +1,93 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { Form as t } from "../Form/index.js";
+import { cloneElement as n, forwardRef as r, useImperativeHandle as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { HStack as l } from "@astryxdesign/core/HStack";
+import { Link as u } from "@astryxdesign/core/Link";
+import { TextInput as d } from "@astryxdesign/core/TextInput";
+//#region src/components/BulkEditFormItem/BulkEditFormItem.tsx
+var f = () => {};
+function p({ name: n, hasClear: r = !1, keepValueLabel: i, clearValueLabel: p, clearLabel: h, undoLabel: g, children: _, ...v }) {
+	let y = e(), b = t.useFormInstance(), [x, S] = o("keep"), C = a(null), w = () => {
+		setTimeout(() => {
+			C.current?.focus(), C.current?.open();
+		}, 0);
+	}, T = (e) => {
+		e.preventDefault(), S("edit"), w();
+	}, E = () => {
+		let e = b.getFieldValue(n);
+		e === void 0 && S("keep"), e === null && r && S("clear");
+	}, D = () => {
+		S("clear"), b.setFieldValue(n, null);
+	}, O = () => {
+		S("keep"), b.setFieldValue(n, void 0);
+	}, k = i ?? y("uic.BulkEditFormItem.keepAsIs"), A = p ?? y("uic.BulkEditFormItem.clear"), j = /* @__PURE__ */ c(l, {
+		align: "center",
+		children: [x === "keep" && r && /* @__PURE__ */ s(u, {
+			onClick: D,
+			children: h ?? y("uic.BulkEditFormItem.clear")
+		}), /* @__PURE__ */ s(t.Item, {
+			noStyle: !0,
+			dependencies: [n],
+			children: ({ getFieldValue: e }) => x !== "keep" && e(n) !== void 0 && /* @__PURE__ */ s(u, {
+				onClick: O,
+				children: g ?? y("uic.BulkEditFormItem.undoChanges")
+			})
+		})]
+	}), M = (e) => /* @__PURE__ */ s(d, {
+		label: e,
+		isLabelHidden: !0,
+		value: e,
+		onChange: f,
+		onMouseDown: T,
+		onFocus: T,
+		width: "100%"
+	});
+	return /* @__PURE__ */ c(t.Item, {
+		...v,
+		style: {
+			marginBottom: 0,
+			...v.style
+		},
+		required: !0,
+		extra: /* @__PURE__ */ c(l, {
+			justify: v.extra ? "between" : "end",
+			align: "center",
+			gap: 2,
+			children: [v.extra, j]
+		}),
+		children: [x === "keep" ? M(k) : x === "clear" ? M(A) : null, x !== "keep" && /* @__PURE__ */ s(t.Item, {
+			name: n,
+			...v,
+			noStyle: !0,
+			hidden: x !== "edit",
+			children: _ && /* @__PURE__ */ s(m, {
+				ref: C,
+				onBlur: E,
+				children: _
+			})
+		})]
+	});
+}
+p.displayName = "BulkEditFormItem";
+var m = r(({ children: e, ...t }, r) => {
+	let s = a(null), [c, l] = o(!1);
+	i(r, () => ({
+		focus: () => s.current?.focus?.(),
+		open: () => l(!0)
+	}));
+	let u = e.props;
+	return n(e, {
+		...t,
+		ref: s,
+		open: c,
+		onOpenChange: (e) => {
+			l(e), u.onOpenChange?.(e);
+		}
+	});
+});
+m.displayName = "ControlWrapper";
+//#endregion
+export { p as BulkEditFormItem };
+
+//# sourceMappingURL=BulkEditFormItem.js.map

package/dist/components/BulkEditFormItem/BulkEditFormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkEditFormItem.js","names":[],"sources":["../../../src/components/BulkEditFormItem/BulkEditFormItem.tsx"],"sourcesContent":["/**\n * BulkEditFormItem\n *\n * A `Form.Item` for editing one field across many records at once. It starts\n * in \"keep as is\" (the field's value stays `undefined`, so a submit leaves\n * every record's current value alone); clicking or focusing the placeholder\n * switches to editing the wrapped control; `hasClear` adds a \"Clear\" action\n * that sets the value to `null`; \"Undo changes\" returns to keep mode.\n *\n * The control is unmounted in keep mode, so its field registers only when the\n * user starts editing, and an `initialValue` applies at that moment rather\n * than marking every field edited on mount.\n *\n * @example\n * <BulkEditFormItem name=\"domain\" label=\"Domain\" hasClear clearValueLabel=\"No domain\">\n *   <Selector options={domains} />\n * </BulkEditFormItem>\n */\nimport {\n  cloneElement,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type MouseEvent,\n  type FocusEvent,\n  type ReactElement,\n} from \"react\";\nimport { HStack } from \"@astryxdesign/core/HStack\";\nimport { Link } from \"@astryxdesign/core/Link\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { Form, type FormItemProps, type RuleObject, type RuleRender } from \"../Form\";\n\ntype BulkEditMode = \"keep\" | \"edit\" | \"clear\";\n\n/** A rule without `required`: the item always shows the required marker itself. */\ntype RuleWithoutRequired = Omit<RuleObject, \"required\"> | RuleRender;\n\nexport interface BulkEditFormItemProps extends Omit<\n  FormItemProps,\n  \"required\" | \"rules\"\n> {\n  /** Offers \"Clear\", which sets the value to `null` for every record. */\n  hasClear?: boolean;\n  /** The placeholder in keep mode. @default \"Keep as is\" */\n  keepValueLabel?: string;\n  /** The placeholder once cleared. @default \"Clear\" */\n  clearValueLabel?: string;\n  /** The label of the clear action. @default \"Clear\" */\n  clearLabel?: string;\n  /** The label of the action that returns to keep mode. @default \"Undo changes\" */\n  undoLabel?: string;\n  /** The control that edits the value. */\n  children?: ReactElement;\n  rules?: RuleWithoutRequired[];\n}\n\nconst noop = () => {};\n\nexport function BulkEditFormItem({\n  name,\n  hasClear = false,\n  keepValueLabel,\n  clearValueLabel,\n  clearLabel,\n  undoLabel,\n  children,\n  ...formItemProps\n}: BulkEditFormItemProps) {\n  const t = useUicTranslator();\n  const form = Form.useFormInstance();\n  const [mode, setMode] = useState<BulkEditMode>(\"keep\");\n  const controlRef = useRef<ControlWrapperRef>(null);\n\n  const focusControl = () => {\n    setTimeout(() => {\n      controlRef.current?.focus();\n      controlRef.current?.open();\n    }, 0);\n  };\n\n  const handlePlaceholderClick = (e: MouseEvent | FocusEvent) => {\n    e.preventDefault();\n    setMode(\"edit\");\n    focusControl();\n  };\n\n  const handleControlBlur = () => {\n    const currentValue = form.getFieldValue(name);\n    if (currentValue === undefined) {\n      setMode(\"keep\");\n    }\n    if (currentValue === null && hasClear) {\n      setMode(\"clear\");\n    }\n  };\n\n  const handleClear = () => {\n    setMode(\"clear\");\n    form.setFieldValue(name, null);\n  };\n\n  const handleUndo = () => {\n    setMode(\"keep\");\n    form.setFieldValue(name, undefined);\n  };\n\n  const resolvedKeepValueLabel = keepValueLabel ?? t(\"uic.BulkEditFormItem.keepAsIs\");\n  const resolvedClearValueLabel = clearValueLabel ?? t(\"uic.BulkEditFormItem.clear\");\n\n  const actions = (\n    <HStack align=\"center\">\n      {mode === \"keep\" && hasClear && (\n        <Link onClick={handleClear}>\n          {clearLabel ?? t(\"uic.BulkEditFormItem.clear\")}\n        </Link>\n      )}\n      {/* A dependency-only item re-renders when the field's value changes. */}\n      <Form.Item noStyle dependencies={[name]}>\n        {({ getFieldValue }) =>\n          mode !== \"keep\" &&\n          getFieldValue(name) !== undefined && (\n            <Link onClick={handleUndo}>\n              {undoLabel ?? t(\"uic.BulkEditFormItem.undoChanges\")}\n            </Link>\n          )\n        }\n      </Form.Item>\n    </HStack>\n  );\n\n  const placeholder = (label: string) => (\n    <TextInput\n      label={label}\n      isLabelHidden\n      value={label}\n      onChange={noop}\n      onMouseDown={handlePlaceholderClick}\n      onFocus={handlePlaceholderClick}\n      width=\"100%\"\n    />\n  );\n\n  return (\n    <Form.Item\n      {...formItemProps}\n      style={{ marginBottom: 0, ...formItemProps.style }}\n      // The marker is shown for every bulk-edit field: the item has no rules\n      // of its own to derive it from.\n      required\n      extra={\n        <HStack\n          justify={formItemProps.extra ? \"between\" : \"end\"}\n          align=\"center\"\n          gap={2}\n        >\n          {formItemProps.extra}\n          {actions}\n        </HStack>\n      }\n    >\n      {mode === \"keep\"\n        ? placeholder(resolvedKeepValueLabel)\n        : mode === \"clear\"\n          ? placeholder(resolvedClearValueLabel)\n          : null}\n      {/* Clear mode stays mounted (hidden) so its `null` is still collected\n          by validateFields / getFieldsValue. */}\n      {mode !== \"keep\" && (\n        <Form.Item name={name} {...formItemProps} noStyle hidden={mode !== \"edit\"}>\n          {children && (\n            <ControlWrapper ref={controlRef} onBlur={handleControlBlur}>\n              {children}\n            </ControlWrapper>\n          )}\n        </Form.Item>\n      )}\n    </Form.Item>\n  );\n}\n\nBulkEditFormItem.displayName = \"BulkEditFormItem\";\n\ninterface ControlWrapperRef {\n  open: () => void;\n  focus: () => void;\n}\n\ninterface ControlWrapperProps {\n  children: ReactElement;\n  onBlur?: () => void;\n}\n\n/**\n * Clones the control with a ref and a controlled `open` / `onOpenChange`\n * pair, so the item can focus it and open its popup when editing starts.\n * Any other props the item injects pass through.\n */\nconst ControlWrapper = forwardRef<ControlWrapperRef, ControlWrapperProps>(\n  ({ children, ...props }, ref) => {\n    const innerRef = useRef<{ focus?: () => void } | null>(null);\n    const [open, setOpen] = useState(false);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => innerRef.current?.focus?.(),\n      open: () => setOpen(true),\n    }));\n\n    const childProps = children.props as { onOpenChange?: (isOpen: boolean) => void };\n    return cloneElement(children, {\n      ...props,\n      ref: innerRef,\n      open,\n      onOpenChange: (isOpen: boolean) => {\n        setOpen(isOpen);\n        childProps.onOpenChange?.(isOpen);\n      },\n    } as Record<string, unknown>);\n  },\n);\nControlWrapper.displayName = \"ControlWrapper\";\n"],"mappings":";;;;;;;;AA2DA,IAAM,UAAa,CAAC;AAEpB,SAAgB,EAAiB,EAC/B,SACA,cAAW,IACX,mBACA,oBACA,eACA,cACA,aACA,GAAG,KACqB;CACxB,IAAM,IAAI,EAAiB,GACrB,IAAO,EAAK,gBAAgB,GAC5B,CAAC,GAAM,KAAW,EAAuB,MAAM,GAC/C,IAAa,EAA0B,IAAI,GAE3C,UAAqB;EACzB,iBAAiB;GAEf,AADA,EAAW,SAAS,MAAM,GAC1B,EAAW,SAAS,KAAK;EAC3B,GAAG,CAAC;CACN,GAEM,KAA0B,MAA+B;EAG7D,AAFA,EAAE,eAAe,GACjB,EAAQ,MAAM,GACd,EAAa;CACf,GAEM,UAA0B;EAC9B,IAAM,IAAe,EAAK,cAAc,CAAI;EAI5C,AAHI,MAAiB,KAAA,KACnB,EAAQ,MAAM,GAEZ,MAAiB,QAAQ,KAC3B,EAAQ,OAAO;CAEnB,GAEM,UAAoB;EAExB,AADA,EAAQ,OAAO,GACf,EAAK,cAAc,GAAM,IAAI;CAC/B,GAEM,UAAmB;EAEvB,AADA,EAAQ,MAAM,GACd,EAAK,cAAc,GAAM,KAAA,CAAS;CACpC,GAEM,IAAyB,KAAkB,EAAE,+BAA+B,GAC5E,IAA0B,KAAmB,EAAE,4BAA4B,GAE3E,IACJ,kBAAC,GAAD;EAAQ,OAAM;EAAd,UAAA,CACG,MAAS,UAAU,KAClB,kBAAC,GAAD;GAAM,SAAS;GACZ,UAAA,KAAc,EAAE,4BAA4B;EACzC,CAAA,GAGR,kBAAC,EAAK,MAAN;GAAW,SAAA;GAAQ,cAAc,CAAC,CAAI;GAClC,WAAA,EAAE,uBACF,MAAS,UACT,EAAc,CAAI,MAAM,KAAA,KACtB,kBAAC,GAAD;IAAM,SAAS;IACZ,UAAA,KAAa,EAAE,kCAAkC;GAC9C,CAAA;EAGD,CAAA,CACL;KAGJ,KAAe,MACnB,kBAAC,GAAD;EACS;EACP,eAAA;EACA,OAAO;EACP,UAAU;EACV,aAAa;EACb,SAAS;EACT,OAAM;CACP,CAAA;CAGH,OACE,kBAAC,EAAK,MAAN;EACE,GAAI;EACJ,OAAO;GAAE,cAAc;GAAG,GAAG,EAAc;EAAM;EAGjD,UAAA;EACA,OACE,kBAAC,GAAD;GACE,SAAS,EAAc,QAAQ,YAAY;GAC3C,OAAM;GACN,KAAK;GAHP,UAAA,CAKG,EAAc,OACd,CACK;;EAdZ,UAAA,CAiBG,MAAS,SACN,EAAY,CAAsB,IAClC,MAAS,UACP,EAAY,CAAuB,IACnC,MAGL,MAAS,UACR,kBAAC,EAAK,MAAN;GAAiB;GAAM,GAAI;GAAe,SAAA;GAAQ,QAAQ,MAAS;GAChE,UAAA,KACC,kBAAC,GAAD;IAAgB,KAAK;IAAY,QAAQ;IACtC;GACa,CAAA;EAET,CAAA,CAEJ;;AAEf;AAEA,EAAiB,cAAc;AAiB/B,IAAM,IAAiB,GACpB,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAsC,IAAI,GACrD,CAAC,GAAM,KAAW,EAAS,EAAK;CAEtC,EAAoB,UAAY;EAC9B,aAAa,EAAS,SAAS,QAAQ;EACvC,YAAY,EAAQ,EAAI;CAC1B,EAAE;CAEF,IAAM,IAAa,EAAS;CAC5B,OAAO,EAAa,GAAU;EAC5B,GAAG;EACH,KAAK;EACL;EACA,eAAe,MAAoB;GAEjC,AADA,EAAQ,CAAM,GACd,EAAW,eAAe,CAAM;EAClC;CACF,CAA4B;AAC9B,CACF;AACA,EAAe,cAAc"}

package/dist/components/BulkEditFormItem/BulkEditFormItem.messages.d.ts

@@ -0,0 +1,14 @@
+export declare const bulkEditFormItemMessages: {
+    readonly "uic.BulkEditFormItem.keepAsIs": {
+        readonly defaultMessage: "Keep as is";
+        readonly description: "Placeholder of a bulk-edit field that leaves every selected item's current value unchanged";
+    };
+    readonly "uic.BulkEditFormItem.clear": {
+        readonly defaultMessage: "Clear";
+        readonly description: "Link that clears the field on every selected item, and the field's placeholder once cleared";
+    };
+    readonly "uic.BulkEditFormItem.undoChanges": {
+        readonly defaultMessage: "Undo changes";
+        readonly description: "Link that returns a bulk-edit field to keeping the current values";
+    };
+};

package/dist/components/BulkEditFormItem/BulkEditFormItem.messages.js

@@ -0,0 +1,20 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/BulkEditFormItem/BulkEditFormItem.messages.ts
+var t = e({
+	"uic.BulkEditFormItem.keepAsIs": {
+		defaultMessage: "Keep as is",
+		description: "Placeholder of a bulk-edit field that leaves every selected item's current value unchanged"
+	},
+	"uic.BulkEditFormItem.clear": {
+		defaultMessage: "Clear",
+		description: "Link that clears the field on every selected item, and the field's placeholder once cleared"
+	},
+	"uic.BulkEditFormItem.undoChanges": {
+		defaultMessage: "Undo changes",
+		description: "Link that returns a bulk-edit field to keeping the current values"
+	}
+});
+//#endregion
+export { t as bulkEditFormItemMessages };
+
+//# sourceMappingURL=BulkEditFormItem.messages.js.map

package/dist/components/BulkEditFormItem/BulkEditFormItem.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkEditFormItem.messages.js","names":[],"sources":["../../../src/components/BulkEditFormItem/BulkEditFormItem.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const bulkEditFormItemMessages = defineMessages({\n  \"uic.BulkEditFormItem.keepAsIs\": {\n    defaultMessage: \"Keep as is\",\n    description:\n      \"Placeholder of a bulk-edit field that leaves every selected item's current value unchanged\",\n  },\n  \"uic.BulkEditFormItem.clear\": {\n    defaultMessage: \"Clear\",\n    description:\n      \"Link that clears the field on every selected item, and the field's placeholder once cleared\",\n  },\n  \"uic.BulkEditFormItem.undoChanges\": {\n    defaultMessage: \"Undo changes\",\n    description: \"Link that returns a bulk-edit field to keeping the current values\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAA2B,EAAe;CACrD,iCAAiC;EAC/B,gBAAgB;EAChB,aACE;CACJ;CACA,8BAA8B;EAC5B,gBAAgB;EAChB,aACE;CACJ;CACA,oCAAoC;EAClC,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

package/dist/components/BulkEditFormItem/index.d.ts

@@ -0,0 +1,2 @@
+export { BulkEditFormItem } from './BulkEditFormItem';
+export type { BulkEditFormItemProps } from './BulkEditFormItem';

package/dist/components/BulkEditFormItem/index.js

@@ -0,0 +1,2 @@
+import { BulkEditFormItem as e } from "./BulkEditFormItem.js";
+export { e as BulkEditFormItem };

package/dist/components/BulkErrorModal/BulkErrorModal.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement, ReactNode } from 'react';
+import { DataGridColumn, DataGridProps } from '../DataGrid/DataGrid';
+import { ModalProps } from '../Modal/Modal';
+export interface BulkErrorModalProps<T extends object> extends Omit<ModalProps, "children" | "title" | "footer" | "onAction" | "actionLabel" | "actionVariant" | "isActionLoading" | "isActionDisabled" | "actionButtonProps" | "cancelLabel" | "hasCancelButton"> {
+    /** How one failed item renders, per column. */
+    columns: ReadonlyArray<DataGridColumn<T>>;
+    /** One item per failure. */
+    data: ReadonlyArray<T>;
+    /** Row identity. Default: the item's `id`, then its `key`. */
+    idKey?: DataGridProps<T>["idKey"];
+    /** Guidance in an error banner above the grid. Without it there is no banner. */
+    description?: ReactNode;
+    /**
+     * Title of the banner. Default: the catalog's `uic.BulkErrorModal.errorOccurred`
+     */
+    descriptionTitle?: ReactNode;
+    /**
+     * Modal title. Default: an error glyph and the catalog's
+     * `uic.BulkErrorModal.title` ("Action execution failed").
+     */
+    title?: ReactNode;
+}
+export declare function BulkErrorModal<T extends object>({ columns, data, idKey, description, descriptionTitle, title, width, ...modalProps }: BulkErrorModalProps<T>): ReactElement;

package/dist/components/BulkErrorModal/BulkErrorModal.messages.d.ts

@@ -0,0 +1,10 @@
+export declare const bulkErrorModalMessages: {
+    readonly "uic.BulkErrorModal.title": {
+        readonly defaultMessage: "Action execution failed";
+        readonly description: "Default title of the dialog that lists the failed items of a bulk operation";
+    };
+    readonly "uic.BulkErrorModal.errorOccurred": {
+        readonly defaultMessage: "Error Occurred";
+        readonly description: "Title of the error banner above the failed items, over the caller's guidance";
+    };
+};

package/dist/components/BulkErrorModal/BulkErrorModal.messages.js

@@ -0,0 +1,16 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/BulkErrorModal/BulkErrorModal.messages.ts
+var t = e({
+	"uic.BulkErrorModal.title": {
+		defaultMessage: "Action execution failed",
+		description: "Default title of the dialog that lists the failed items of a bulk operation"
+	},
+	"uic.BulkErrorModal.errorOccurred": {
+		defaultMessage: "Error Occurred",
+		description: "Title of the error banner above the failed items, over the caller's guidance"
+	}
+});
+//#endregion
+export { t as bulkErrorModalMessages };
+
+//# sourceMappingURL=BulkErrorModal.messages.js.map

package/dist/components/BulkErrorModal/BulkErrorModal.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkErrorModal.messages.js","names":[],"sources":["../../../src/components/BulkErrorModal/BulkErrorModal.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const bulkErrorModalMessages = defineMessages({\n  \"uic.BulkErrorModal.title\": {\n    defaultMessage: \"Action execution failed\",\n    description:\n      \"Default title of the dialog that lists the failed items of a bulk operation\",\n  },\n  \"uic.BulkErrorModal.errorOccurred\": {\n    defaultMessage: \"Error Occurred\",\n    description:\n      \"Title of the error banner above the failed items, over the caller's guidance\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAyB,EAAe;CACnD,4BAA4B;EAC1B,gBAAgB;EAChB,aACE;CACJ;CACA,oCAAoC;EAClC,gBAAgB;EAChB,aACE;CACJ;AACF,CAAC"}

package/dist/components/BulkErrorModal/BulkErrorModal2.js

@@ -0,0 +1,55 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { Modal as t } from "../Modal/Modal2.js";
+import { DataGrid as n } from "../DataGrid/DataGrid2.js";
+/* empty css               */
+import { HStack as r, VStack as i } from "@astryxdesign/core/Stack";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { TriangleAlert as s } from "lucide-react";
+import { Banner as c } from "@astryxdesign/core/Banner";
+//#region src/components/BulkErrorModal/BulkErrorModal.tsx
+var l = 720, u = 10;
+function d({ columns: d, data: f, idKey: p, description: m, descriptionTitle: h, title: g, width: _ = l, ...v }) {
+	let y = e();
+	return /* @__PURE__ */ a(t, {
+		...v,
+		width: _,
+		title: g ?? /* @__PURE__ */ o(r, {
+			gap: 2,
+			align: "center",
+			children: [/* @__PURE__ */ a(s, {
+				color: "currentColor",
+				size: "1em",
+				className: "uic-bulk-error-modal__icon",
+				"aria-hidden": !0
+			}), y("uic.BulkErrorModal.title")]
+		}),
+		footer: null,
+		children: /* @__PURE__ */ o(i, {
+			gap: 3,
+			align: "stretch",
+			children: [m ? /* @__PURE__ */ a(c, {
+				status: "error",
+				title: h ?? y("uic.BulkErrorModal.errorOccurred"),
+				description: m
+			}) : null, /* @__PURE__ */ a(n, {
+				columns: d,
+				data: f,
+				idKey: p,
+				scrollWidth: "max-content",
+				pagination: {
+					pageSize: u,
+					hasPageSizeSelector: !1,
+					isHiddenOnSinglePage: !0
+				},
+				isResizable: !1,
+				density: "compact",
+				dividers: "grid"
+			})]
+		})
+	});
+}
+//#endregion
+export { d as BulkErrorModal };
+
+//# sourceMappingURL=BulkErrorModal2.js.map
+import "../../assets/components/BulkErrorModal/BulkErrorModal.css";

package/dist/components/BulkErrorModal/BulkErrorModal2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkErrorModal2.js","names":[],"sources":["../../../src/components/BulkErrorModal/BulkErrorModal.tsx"],"sourcesContent":["/**\n * BulkErrorModal\n *\n * Reports the failures of a bulk operation: one row per failed item, in a\n * `DataGrid` the caller describes with its own columns, since every bulk\n * operation reports a different shape. An optional error banner above it\n * carries guidance, such as how to retry. The modal is a report: it has no\n * footer, and closing goes through the header's close button, the backdrop\n * or Escape (`onOpenChange(false)`).\n *\n * The grid is compact with column rules, pages at ten rows and hides its page\n * bar while every row fits on one page.\n *\n * @example\n * <BulkErrorModal\n *   isOpen={failures.length > 0}\n *   onOpenChange={(open) => !open && setFailures([])}\n *   columns={[\n *     { key: \"name\", header: \"Folder\", renderCell: (row) => row.name },\n *     { key: \"message\", header: \"Error\", renderCell: (row) => row.message },\n *   ]}\n *   data={failures}\n *   description=\"Fix the failed folders and try again.\"\n * />\n */\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Banner } from \"@astryxdesign/core/Banner\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { TriangleAlert } from \"lucide-react\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport {\n  DataGrid,\n  type DataGridColumn,\n  type DataGridProps,\n} from \"../DataGrid/DataGrid\";\nimport { Modal, type ModalProps } from \"../Modal/Modal\";\nimport \"./BulkErrorModal.css\";\n\nexport interface BulkErrorModalProps<T extends object> extends Omit<\n  ModalProps,\n  | \"children\"\n  | \"title\"\n  | \"footer\"\n  | \"onAction\"\n  | \"actionLabel\"\n  | \"actionVariant\"\n  | \"isActionLoading\"\n  | \"isActionDisabled\"\n  | \"actionButtonProps\"\n  | \"cancelLabel\"\n  | \"hasCancelButton\"\n> {\n  /** How one failed item renders, per column. */\n  columns: ReadonlyArray<DataGridColumn<T>>;\n  /** One item per failure. */\n  data: ReadonlyArray<T>;\n  /** Row identity. Default: the item's `id`, then its `key`. */\n  idKey?: DataGridProps<T>[\"idKey\"];\n  /** Guidance in an error banner above the grid. Without it there is no banner. */\n  description?: ReactNode;\n  /**\n   * Title of the banner. Default: the catalog's `uic.BulkErrorModal.errorOccurred`\n   */\n  descriptionTitle?: ReactNode;\n  /**\n   * Modal title. Default: an error glyph and the catalog's\n   * `uic.BulkErrorModal.title` (\"Action execution failed\").\n   */\n  title?: ReactNode;\n}\n\nconst WIDTH = 720;\nconst PAGE_SIZE = 10;\n\nexport function BulkErrorModal<T extends object>({\n  columns,\n  data,\n  idKey,\n  description,\n  descriptionTitle,\n  title,\n  width = WIDTH,\n  ...modalProps\n}: BulkErrorModalProps<T>): ReactElement {\n  const t = useUicTranslator();\n  return (\n    <Modal\n      {...modalProps}\n      width={width}\n      title={\n        title ?? (\n          <HStack gap={2} align=\"center\">\n            {/* `var()` does not resolve in the stroke attribute, so the glyph\n                strokes currentColor and the class sets the colour. */}\n            <TriangleAlert\n              color=\"currentColor\"\n              size=\"1em\"\n              className=\"uic-bulk-error-modal__icon\"\n              aria-hidden\n            />\n            {t(\"uic.BulkErrorModal.title\")}\n          </HStack>\n        )\n      }\n      footer={null}\n    >\n      <VStack gap={3} align=\"stretch\">\n        {description ? (\n          <Banner\n            status=\"error\"\n            title={descriptionTitle ?? t(\"uic.BulkErrorModal.errorOccurred\")}\n            description={description}\n          />\n        ) : null}\n        <DataGrid<T>\n          columns={columns}\n          data={data}\n          idKey={idKey}\n          scrollWidth=\"max-content\"\n          pagination={{\n            pageSize: PAGE_SIZE,\n            hasPageSizeSelector: false,\n            isHiddenOnSinglePage: true,\n          }}\n          isResizable={false}\n          density=\"compact\"\n          dividers=\"grid\"\n        />\n      </VStack>\n    </Modal>\n  );\n}\n"],"mappings":";;;;;;;;;AAwEA,IAAM,IAAQ,KACR,IAAY;AAElB,SAAgB,EAAiC,EAC/C,YACA,SACA,UACA,gBACA,qBACA,UACA,WAAQ,GACR,GAAG,KACoC;CACvC,IAAM,IAAI,EAAiB;CAC3B,OACE,kBAAC,GAAD;EACE,GAAI;EACG;EACP,OACE,KACE,kBAAC,GAAD;GAAQ,KAAK;GAAG,OAAM;GAAtB,UAAA,CAGE,kBAAC,GAAD;IACE,OAAM;IACN,MAAK;IACL,WAAU;IACV,eAAA;GACD,CAAA,GACA,EAAE,0BAA0B,CACvB;;EAGZ,QAAQ;EAER,UAAA,kBAAC,GAAD;GAAQ,KAAK;GAAG,OAAM;GAAtB,UAAA,CACG,IACC,kBAAC,GAAD;IACE,QAAO;IACP,OAAO,KAAoB,EAAE,kCAAkC;IAClD;GACd,CAAA,IACC,MACJ,kBAAC,GAAD;IACW;IACH;IACC;IACP,aAAY;IACZ,YAAY;KACV,UAAU;KACV,qBAAqB;KACrB,sBAAsB;IACxB;IACA,aAAa;IACb,SAAQ;IACR,UAAS;GACV,CAAA,CACK;;CACH,CAAA;AAEX"}

package/dist/components/BulkErrorModal/index.d.ts

@@ -0,0 +1,2 @@
+export { BulkErrorModal } from './BulkErrorModal';
+export type { BulkErrorModalProps } from './BulkErrorModal';

package/dist/components/BulkErrorModal/index.js

@@ -0,0 +1,2 @@
+import { BulkErrorModal as e } from "./BulkErrorModal2.js";
+export { e as BulkErrorModal };

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

@@ -0,0 +1,43 @@
+import { CSSProperties } from 'react';
+/**
+ * Normalises `#rgb`, `#rrggbb`, `#rrggbbaa` (alpha dropped), `rgb()` and
+ * `rgba()` to lower-case `#rrggbb`. Anything else is `null`, so an
+ * unparseable value renders as unset instead of painting black.
+ */
+export declare function toHexColor(value?: string | null): string | null;
+export interface ColorPickerProps {
+    /** The colour: hex, or anything `toHexColor` normalises. */
+    value?: string | null;
+    /** Fires with `#rrggbb` when the user settles on a colour. */
+    onChange?: (hex: string) => void;
+    /** Shows the hex value next to the swatch on the trigger. */
+    hasValueLabel?: boolean;
+    /** Offers a clear button in the popover. */
+    hasClear?: boolean;
+    /** Fires when the clear button is pressed. */
+    onClear?: () => void;
+    isDisabled?: boolean;
+    /**
+     * Accessible name of the trigger and the colour area.
+     * @default the catalog's uic.ColorPicker.label ("Select color")
+     */
+    label?: string;
+    /** @default the catalog's uic.ColorPicker.hexValue ("Hex value") */
+    hexValueLabel?: string;
+    /** @default the catalog's uic.ColorPicker.clear ("Clear") */
+    clearLabel?: string;
+    /** Shown on the trigger when there is no colour. @default the catalog's uic.ColorPicker.noColor ("No color") */
+    noColorLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * Test id of the trigger. The colour area, the hex field, the clear button
+     * and the value label get `<id>-area`, `<id>-hex`, `<id>-clear` and
+     * `<id>-value`.
+     */
+    "data-testid"?: string;
+}
+export declare function ColorPicker({ value, onChange, hasValueLabel, hasClear, onClear, isDisabled, label, hexValueLabel, clearLabel, noColorLabel, className, style, "data-testid": testId, }: ColorPickerProps): import("react").JSX.Element;
+export declare namespace ColorPicker {
+    var displayName: string;
+}

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

@@ -0,0 +1,18 @@
+export declare const colorPickerMessages: {
+    readonly "uic.ColorPicker.label": {
+        readonly defaultMessage: "Select color";
+        readonly description: "Accessible name of a color picker whose caller gave it no label";
+    };
+    readonly "uic.ColorPicker.hexValue": {
+        readonly defaultMessage: "Hex value";
+        readonly description: "Hidden label of the color picker's text field for a #rrggbb value";
+    };
+    readonly "uic.ColorPicker.clear": {
+        readonly defaultMessage: "Clear";
+        readonly description: "Button in a color picker that removes the chosen color";
+    };
+    readonly "uic.ColorPicker.noColor": {
+        readonly defaultMessage: "No color";
+        readonly description: "Shown on a color picker's trigger when no color is set";
+    };
+};

package/dist/components/ColorPicker/ColorPicker.messages.js

@@ -0,0 +1,24 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/ColorPicker/ColorPicker.messages.ts
+var t = e({
+	"uic.ColorPicker.label": {
+		defaultMessage: "Select color",
+		description: "Accessible name of a color picker whose caller gave it no label"
+	},
+	"uic.ColorPicker.hexValue": {
+		defaultMessage: "Hex value",
+		description: "Hidden label of the color picker's text field for a #rrggbb value"
+	},
+	"uic.ColorPicker.clear": {
+		defaultMessage: "Clear",
+		description: "Button in a color picker that removes the chosen color"
+	},
+	"uic.ColorPicker.noColor": {
+		defaultMessage: "No color",
+		description: "Shown on a color picker's trigger when no color is set"
+	}
+});
+//#endregion
+export { t as colorPickerMessages };
+
+//# sourceMappingURL=ColorPicker.messages.js.map

package/dist/components/ColorPicker/ColorPicker.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.messages.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const colorPickerMessages = defineMessages({\n  \"uic.ColorPicker.label\": {\n    defaultMessage: \"Select color\",\n    description: \"Accessible name of a color picker whose caller gave it no label\",\n  },\n  \"uic.ColorPicker.hexValue\": {\n    defaultMessage: \"Hex value\",\n    description: \"Hidden label of the color picker's text field for a #rrggbb value\",\n  },\n  \"uic.ColorPicker.clear\": {\n    defaultMessage: \"Clear\",\n    description: \"Button in a color picker that removes the chosen color\",\n  },\n  \"uic.ColorPicker.noColor\": {\n    defaultMessage: \"No color\",\n    description: \"Shown on a color picker's trigger when no color is set\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAsB,EAAe;CAChD,yBAAyB;EACvB,gBAAgB;EAChB,aAAa;CACf;CACA,4BAA4B;EAC1B,gBAAgB;EAChB,aAAa;CACf;CACA,yBAAyB;EACvB,gBAAgB;EAChB,aAAa;CACf;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

package/dist/components/ColorPicker/ColorPicker2.js

@@ -0,0 +1,117 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+/* empty css            */
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { Button as i } from "@astryxdesign/core/Button";
+import { VStack as a } from "@astryxdesign/core/Stack";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { TextInput as c } from "@astryxdesign/core/TextInput";
+import { Popover as l } from "@astryxdesign/core/Popover";
+//#region src/components/ColorPicker/ColorPicker.tsx
+var u = /^#[0-9a-fA-F]{6}$/, d = /^#[0-9a-fA-F]{3}$/, f = /^#[0-9a-fA-F]{8}$/, p = /^rgba?\(([^)]+)\)$/i, m = (e) => Math.max(0, Math.min(255, Math.round(e))).toString(16).padStart(2, "0");
+function h(e) {
+	if (!e) return null;
+	let t = e.trim();
+	if (u.test(t)) return t.toLowerCase();
+	if (f.test(t)) return t.slice(0, 7).toLowerCase();
+	if (d.test(t)) {
+		let [, e, n, r] = t;
+		return `#${e}${e}${n}${n}${r}${r}`.toLowerCase();
+	}
+	let n = p.exec(t);
+	if (n) {
+		let e = n[1].split(/[,/\s]+/).filter(Boolean).map(Number);
+		if (e.length >= 3 && e.slice(0, 3).every(Number.isFinite)) return `#${m(e[0])}${m(e[1])}${m(e[2])}`;
+	}
+	return null;
+}
+function g({ value: u, onChange: d, hasValueLabel: f, hasClear: p, onClear: m, isDisabled: g, label: _, hexValueLabel: v, clearLabel: y, noColorLabel: b, className: x, style: S, "data-testid": C }) {
+	let w = e(), T = n(null), [E, D] = r(!1), O = h(u), [k, A] = r(O ?? "#000000"), [j, M] = r(O ?? ""), N = (e) => {
+		let t = h(e);
+		!t || t === O || d?.(t);
+	};
+	t(() => {
+		let e = T.current;
+		if (!e) return;
+		let t = () => N(e.value);
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [E, O]);
+	let P = _ ?? w("uic.ColorPicker.label");
+	return /* @__PURE__ */ o(l, {
+		isOpen: E,
+		onOpenChange: (e) => {
+			D(e), e && (A(O ?? "#000000"), M(O ?? ""));
+		},
+		label: P,
+		placement: "below",
+		alignment: "start",
+		content: /* @__PURE__ */ s(a, {
+			gap: 3,
+			align: "stretch",
+			className: "uic-color-picker__panel",
+			children: [
+				/* @__PURE__ */ o("input", {
+					ref: T,
+					type: "color",
+					className: "uic-color-picker__area",
+					"aria-label": P,
+					"data-testid": C ? `${C}-area` : void 0,
+					value: k,
+					disabled: g,
+					onChange: (e) => {
+						A(e.target.value), M(e.target.value);
+					}
+				}),
+				/* @__PURE__ */ o(c, {
+					label: v ?? w("uic.ColorPicker.hexValue"),
+					isLabelHidden: !0,
+					size: "sm",
+					value: j,
+					placeholder: "#000000",
+					isDisabled: g,
+					"data-testid": C ? `${C}-hex` : void 0,
+					onChange: (e) => {
+						M(e);
+						let t = h(e);
+						t && (A(t), N(t));
+					},
+					onEnter: () => N(j)
+				}),
+				p ? /* @__PURE__ */ o(i, {
+					variant: "ghost",
+					size: "sm",
+					label: y ?? w("uic.ColorPicker.clear"),
+					"data-testid": C ? `${C}-clear` : void 0,
+					isDisabled: g,
+					onClick: () => {
+						m?.(), D(!1);
+					}
+				}) : null
+			]
+		}),
+		children: /* @__PURE__ */ s("button", {
+			type: "button",
+			className: ["uic-color-picker__trigger", x].filter(Boolean).join(" "),
+			disabled: g,
+			style: S,
+			"data-testid": C,
+			"aria-label": f ? void 0 : P,
+			children: [/* @__PURE__ */ o("span", {
+				className: "uic-color-picker__swatch",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o("span", {
+					className: "uic-color-picker__swatch-fill",
+					style: { backgroundColor: O ?? "transparent" }
+				})
+			}), f ? /* @__PURE__ */ o("span", {
+				"data-testid": C ? `${C}-value` : void 0,
+				children: O ?? b ?? w("uic.ColorPicker.noColor")
+			}) : null]
+		})
+	});
+}
+g.displayName = "ColorPicker";
+//#endregion
+export { g as ColorPicker, h as toHexColor };
+
+//# sourceMappingURL=ColorPicker2.js.map
+import "../../assets/components/ColorPicker/ColorPicker.css";

package/dist/components/ColorPicker/ColorPicker2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker2.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/**\n * ColorPicker\n *\n * A colour field: a swatch trigger that opens a popover holding the\n * platform's colour input and a hex text field, and optionally a clear\n * button. Astryx has no colour picker, so the picking area is the native\n * `<input type=\"color\">` and everything around it is Astryx.\n *\n * The value is a `#rrggbb` string on both edges. `onChange` fires when the\n * user settles on a colour (the native input's `change` event, or a complete\n * hex typed into the field), not on every pointer move while dragging, so a\n * caller that writes a setting writes it once. There is no alpha.\n *\n * @example\n * <ColorPicker value={accent} onChange={setAccent} hasValueLabel hasClear onClear={reset} />\n */\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { Popover } from \"@astryxdesign/core/Popover\";\nimport { VStack } from \"@astryxdesign/core/Stack\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport \"./ColorPicker.css\";\n\nconst FULL_HEX = /^#[0-9a-fA-F]{6}$/;\nconst SHORT_HEX = /^#[0-9a-fA-F]{3}$/;\nconst HEX_WITH_ALPHA = /^#[0-9a-fA-F]{8}$/;\nconst RGB_FUNCTION = /^rgba?\\(([^)]+)\\)$/i;\n\nconst toHexPair = (channel: number) =>\n  Math.max(0, Math.min(255, Math.round(channel)))\n    .toString(16)\n    .padStart(2, \"0\");\n\n/**\n * Normalises `#rgb`, `#rrggbb`, `#rrggbbaa` (alpha dropped), `rgb()` and\n * `rgba()` to lower-case `#rrggbb`. Anything else is `null`, so an\n * unparseable value renders as unset instead of painting black.\n */\nexport function toHexColor(value?: string | null): string | null {\n  if (!value) return null;\n  const raw = value.trim();\n  if (FULL_HEX.test(raw)) return raw.toLowerCase();\n  if (HEX_WITH_ALPHA.test(raw)) return raw.slice(0, 7).toLowerCase();\n  if (SHORT_HEX.test(raw)) {\n    const [, r, g, b] = raw;\n    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();\n  }\n  const rgb = RGB_FUNCTION.exec(raw);\n  if (rgb) {\n    const parts = rgb[1]!\n      .split(/[,/\\s]+/)\n      .filter(Boolean)\n      .map(Number);\n    if (parts.length >= 3 && parts.slice(0, 3).every(Number.isFinite)) {\n      return `#${toHexPair(parts[0]!)}${toHexPair(parts[1]!)}${toHexPair(parts[2]!)}`;\n    }\n  }\n  return null;\n}\n\nexport interface ColorPickerProps {\n  /** The colour: hex, or anything `toHexColor` normalises. */\n  value?: string | null;\n  /** Fires with `#rrggbb` when the user settles on a colour. */\n  onChange?: (hex: string) => void;\n  /** Shows the hex value next to the swatch on the trigger. */\n  hasValueLabel?: boolean;\n  /** Offers a clear button in the popover. */\n  hasClear?: boolean;\n  /** Fires when the clear button is pressed. */\n  onClear?: () => void;\n  isDisabled?: boolean;\n  /**\n   * Accessible name of the trigger and the colour area.\n   * @default the catalog's uic.ColorPicker.label (\"Select color\")\n   */\n  label?: string;\n  /** @default the catalog's uic.ColorPicker.hexValue (\"Hex value\") */\n  hexValueLabel?: string;\n  /** @default the catalog's uic.ColorPicker.clear (\"Clear\") */\n  clearLabel?: string;\n  /** Shown on the trigger when there is no colour. @default the catalog's uic.ColorPicker.noColor (\"No color\") */\n  noColorLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Test id of the trigger. The colour area, the hex field, the clear button\n   * and the value label get `<id>-area`, `<id>-hex`, `<id>-clear` and\n   * `<id>-value`.\n   */\n  \"data-testid\"?: string;\n}\n\nexport function ColorPicker({\n  value,\n  onChange,\n  hasValueLabel,\n  hasClear,\n  onClear,\n  isDisabled,\n  label,\n  hexValueLabel,\n  clearLabel,\n  noColorLabel,\n  className,\n  style,\n  \"data-testid\": testId,\n}: ColorPickerProps) {\n  const t = useUicTranslator();\n  const areaRef = useRef<HTMLInputElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const hex = toHexColor(value);\n  // The popover's working copy, seeded when it opens. An unshowable value\n  // opens the area on black; the trigger keeps showing it as unset.\n  const [draft, setDraft] = useState<string>(hex ?? \"#000000\");\n  const [text, setText] = useState<string>(hex ?? \"\");\n\n  const commit = (next: string) => {\n    const normalised = toHexColor(next);\n    if (!normalised || normalised === hex) return;\n    onChange?.(normalised);\n  };\n\n  // React's onChange is the `input` event, which fires all through a drag;\n  // the settled value is the native `change` event, subscribed on the node.\n  useEffect(() => {\n    const el = areaRef.current;\n    if (!el) return;\n    const handleChange = () => commit(el.value);\n    el.addEventListener(\"change\", handleChange);\n    return () => el.removeEventListener(\"change\", handleChange);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, hex]);\n\n  const triggerLabel = label ?? t(\"uic.ColorPicker.label\");\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      onOpenChange={(open) => {\n        setIsOpen(open);\n        if (open) {\n          setDraft(hex ?? \"#000000\");\n          setText(hex ?? \"\");\n        }\n        // Closing commits nothing: both commit paths have fired by then, and a\n        // close-commit would re-send a value the user just cleared.\n      }}\n      label={triggerLabel}\n      placement=\"below\"\n      alignment=\"start\"\n      content={\n        <VStack gap={3} align=\"stretch\" className=\"uic-color-picker__panel\">\n          <input\n            ref={areaRef}\n            type=\"color\"\n            className=\"uic-color-picker__area\"\n            aria-label={triggerLabel}\n            data-testid={testId ? `${testId}-area` : undefined}\n            value={draft}\n            disabled={isDisabled}\n            onChange={(e) => {\n              setDraft(e.target.value);\n              setText(e.target.value);\n            }}\n          />\n          <TextInput\n            label={hexValueLabel ?? t(\"uic.ColorPicker.hexValue\")}\n            isLabelHidden\n            size=\"sm\"\n            value={text}\n            placeholder=\"#000000\"\n            isDisabled={isDisabled}\n            data-testid={testId ? `${testId}-hex` : undefined}\n            onChange={(next) => {\n              setText(next);\n              // The field has no OK button: commit as soon as the text is a\n              // whole colour, since a click back onto the page loses it.\n              const normalised = toHexColor(next);\n              if (normalised) {\n                setDraft(normalised);\n                commit(normalised);\n              }\n            }}\n            onEnter={() => commit(text)}\n          />\n          {hasClear ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              label={clearLabel ?? t(\"uic.ColorPicker.clear\")}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              isDisabled={isDisabled}\n              onClick={() => {\n                onClear?.();\n                setIsOpen(false);\n              }}\n            />\n          ) : null}\n        </VStack>\n      }\n    >\n      <button\n        type=\"button\"\n        className={[\"uic-color-picker__trigger\", className].filter(Boolean).join(\" \")}\n        disabled={isDisabled}\n        style={style}\n        data-testid={testId}\n        aria-label={hasValueLabel ? undefined : triggerLabel}\n      >\n        <span className=\"uic-color-picker__swatch\" aria-hidden=\"true\">\n          <span\n            className=\"uic-color-picker__swatch-fill\"\n            style={{ backgroundColor: hex ?? \"transparent\" }}\n          />\n        </span>\n        {hasValueLabel ? (\n          <span data-testid={testId ? `${testId}-value` : undefined}>\n            {hex ?? noColorLabel ?? t(\"uic.ColorPicker.noColor\")}\n          </span>\n        ) : null}\n      </button>\n    </Popover>\n  );\n}\n\nColorPicker.displayName = \"ColorPicker\";\n"],"mappings":"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"}