@destyler/color-picker 0.2.6 → 0.2.7

package/dist/index.d.mts

@@ -1,4 +1,3 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { Color, Color as Color$1, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@destyler/color";
 import { PositioningOptions } from "@destyler/popper";
 import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/dismissable";
@@ -7,7 +6,7 @@ import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, Orientation, PropTypes, RequiredBy } from "@destyler/types";
 
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: any;
 //#endregion
 //#region src/types.d.ts
 type ExtendedColorChannel = ColorChannel | 'hex' | 'css';
@@ -56,79 +55,86 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
   /**
    * The ids of the elements in the color picker. Useful for composition.
    */
-  'ids'?: ElementIds | undefined;
+  ids?: ElementIds | undefined;
   /**
-   * The current color value
+   * The controlled color value
    * @default #000000
    */
-  'value': Color;
+  value?: Color | undefined;
+  /**
+   * The initial color value when it is not controlled.
+   * Prefer this over seeding with `value` for uncontrolled usage.
+   * @default #000000
+   */
+  defaultValue?: Color | undefined;
   /**
    * Whether the color picker is disabled
    */
-  'disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
   /**
    * Whether the color picker is read-only
    */
-  'readOnly'?: boolean | undefined;
+  readOnly?: boolean | undefined;
   /**
    * Whether the color picker is required
    */
-  'required'?: boolean | undefined;
+  required?: boolean | undefined;
   /**
    * Whether the color picker is invalid
    */
-  'invalid'?: boolean | undefined;
+  invalid?: boolean | undefined;
   /**
    * Handler that is called when the value changes, as the user drags.
    */
-  'onValueChange'?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
   /**
    * Handler that is called when the user stops dragging.
    */
-  'onValueChangeEnd'?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueChangeEnd?: ((details: ValueChangeDetails) => void) | undefined;
   /**
    * Handler that is called when the user opens or closes the color picker.
    */
-  'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
   /**
    * The name for the form input
    */
-  'name'?: string | undefined;
+  name?: string | undefined;
   /**
    * The positioning options for the color picker
    */
-  'positioning': PositioningOptions;
+  positioning: PositioningOptions;
   /**
    * The initial focus element when the color picker is opened.
    */
-  'initialFocusEl'?: (() => HTMLElement | null) | undefined;
+  initialFocusEl?: (() => HTMLElement | null) | undefined;
   /**
    * Whether the color picker is open
    */
-  'open'?: boolean | undefined;
+  open?: boolean | undefined;
   /**
-   * Whether the color picker open state is controlled by the user
+   * The initial open state of the color picker when it is not controlled.
+   * Prefer this over seeding with `open` for uncontrolled usage.
    */
-  'open.controlled'?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
   /**
    * The color format to use
    * @default "rgba"
    */
-  'format': ColorFormat;
+  format: ColorFormat;
   /**
    * Function called when the color format changes
    */
-  'onFormatChange'?: ((details: FormatChangeDetails) => void) | undefined;
+  onFormatChange?: ((details: FormatChangeDetails) => void) | undefined;
   /**
    * Whether to close the color picker when a swatch is selected
    * @default false
    */
-  'closeOnSelect'?: boolean | undefined;
+  closeOnSelect?: boolean | undefined;
   /**
    * Whether to auto focus the color picker when it is opened
    * @default true
    */
-  'openAutoFocus'?: boolean | undefined;
+  openAutoFocus?: boolean | undefined;
 }
 interface PrivateContext {
   /**

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { getColorAreaGradient, normalizeColor, parseColor } from "@destyler/colo
 import { createScope, dataAttr, disableTextSelection, dispatchInputValueEvent, getEventKey, getEventPoint, getEventStep, getInitialFocus, getRelativePoint, isLeftClick, isModifierKey, query, queryAll, raf, trackFormControl, trackPointerMove, visuallyHiddenStyle } from "@destyler/dom";
 import { getPlacement, getPlacementStyles } from "@destyler/popper";
 import { trackDismissableElement } from "@destyler/dismissable";
-import { compact, tryCatch } from "@destyler/utils";
+import { compact, isControlled, isPropUserProvided, resolveControllableOpen, resolveControllableProp, tryCatch, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 
 //#region src/anatomy.ts
@@ -912,6 +912,14 @@ const invoke = {
 const set = {
 	value(ctx, color) {
 		if (!color || ctx.value.isEqual(color)) return;
+		if (isControlled(ctx, "value")) {
+			const value = color.toFormat(ctx.format);
+			ctx.onValueChange?.({
+				value,
+				valueAsString: value.toString(ctx.format)
+			});
+			return;
+		}
 		ctx.value = color;
 		invoke.change(ctx);
 	},
@@ -922,10 +930,17 @@ const set = {
 	}
 };
 function machine(userContext) {
-	const ctx = compact(userContext);
+	const ctx = compact(withControllableProvided(userContext, ["open", "value"]));
+	const { initialOpen } = resolveControllableOpen(ctx);
+	const { initial: initialValue } = resolveControllableProp({
+		value: ctx.value,
+		defaultValue: ctx.defaultValue,
+		valueProvided: isPropUserProvided(ctx, "value"),
+		fallback: parse("#000000")
+	});
 	return createMachine({
 		id: "color-picker",
-		initial: ctx.open ? "open" : "idle",
+		initial: initialOpen ? "open" : "idle",
 		context: {
 			dir: "ltr",
 			value: parse("#000000"),
@@ -934,6 +949,7 @@ function machine(userContext) {
 			closeOnSelect: false,
 			openAutoFocus: true,
 			...ctx,
+			value: initialValue,
 			activeId: null,
 			activeChannel: null,
 			activeOrientation: null,
@@ -1166,7 +1182,7 @@ function machine(userContext) {
 	}, {
 		guards: {
 			closeOnSelect: (ctx$1) => !!ctx$1.closeOnSelect,
-			isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"],
+			isOpenControlled: (ctx$1) => isControlled(ctx$1, "open"),
 			shouldRestoreFocus: (ctx$1) => !!ctx$1.restoreFocus
 		},
 		activities: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/color-picker",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "a component that allows users to select a color from a color picker.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.6",
-    "@destyler/color": "0.2.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/popper": "0.2.6",
-    "@destyler/dismissable": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/utils": "0.2.6",
-    "@destyler/xstate": "0.2.6"
+    "@destyler/anatomy": "0.2.7",
+    "@destyler/color": "0.2.7",
+    "@destyler/dom": "0.2.7",
+    "@destyler/types": "0.2.7",
+    "@destyler/xstate": "0.2.7",
+    "@destyler/popper": "0.2.7",
+    "@destyler/dismissable": "0.2.7",
+    "@destyler/utils": "0.2.7"
   },
   "publishConfig": {
     "access": "public"