@zag-js/color-picker 1.22.1 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +26 -21
  2. package/dist/index.mjs +26 -21
  3. package/package.json +9 -9
package/dist/index.js CHANGED
@@ -205,6 +205,9 @@ function connect(service, normalize) {
205
205
  const areaValue = computed("areaValue");
206
206
  const valueAsString = computed("valueAsString");
207
207
  const disabled = computed("disabled");
208
+ const readOnly = !!prop("readOnly");
209
+ const invalid = !!prop("invalid");
210
+ const required = !!prop("required");
208
211
  const interactive = computed("interactive");
209
212
  const dragging = state.hasTag("dragging");
210
213
  const open = state.hasTag("open");
@@ -271,8 +274,8 @@ function connect(service, normalize) {
271
274
  dir: prop("dir"),
272
275
  id: getRootId(scope),
273
276
  "data-disabled": domQuery.dataAttr(disabled),
274
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
275
- "data-invalid": domQuery.dataAttr(prop("invalid")),
277
+ "data-readonly": domQuery.dataAttr(readOnly),
278
+ "data-invalid": domQuery.dataAttr(invalid),
276
279
  style: {
277
280
  "--value": value.toString("css")
278
281
  }
@@ -285,8 +288,9 @@ function connect(service, normalize) {
285
288
  id: getLabelId(scope),
286
289
  htmlFor: getHiddenInputId(scope),
287
290
  "data-disabled": domQuery.dataAttr(disabled),
288
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
289
- "data-invalid": domQuery.dataAttr(prop("invalid")),
291
+ "data-readonly": domQuery.dataAttr(readOnly),
292
+ "data-invalid": domQuery.dataAttr(invalid),
293
+ "data-required": domQuery.dataAttr(required),
290
294
  "data-focus": domQuery.dataAttr(focused),
291
295
  onClick(event) {
292
296
  event.preventDefault();
@@ -301,8 +305,8 @@ function connect(service, normalize) {
301
305
  id: getControlId(scope),
302
306
  dir: prop("dir"),
303
307
  "data-disabled": domQuery.dataAttr(disabled),
304
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
305
- "data-invalid": domQuery.dataAttr(prop("invalid")),
308
+ "data-readonly": domQuery.dataAttr(readOnly),
309
+ "data-invalid": domQuery.dataAttr(invalid),
306
310
  "data-state": open ? "open" : "closed",
307
311
  "data-focus": domQuery.dataAttr(focused)
308
312
  });
@@ -317,8 +321,8 @@ function connect(service, normalize) {
317
321
  "aria-controls": getContentId(scope),
318
322
  "aria-labelledby": getLabelId(scope),
319
323
  "data-disabled": domQuery.dataAttr(disabled),
320
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
321
- "data-invalid": domQuery.dataAttr(prop("invalid")),
324
+ "data-readonly": domQuery.dataAttr(readOnly),
325
+ "data-invalid": domQuery.dataAttr(invalid),
322
326
  "data-placement": currentPlacement,
323
327
  "aria-expanded": domQuery.dataAttr(open),
324
328
  "data-state": open ? "open" : "closed",
@@ -375,9 +379,9 @@ function connect(service, normalize) {
375
379
  ...parts.area.attrs,
376
380
  id: getAreaId(scope),
377
381
  role: "group",
378
- "data-invalid": domQuery.dataAttr(prop("invalid")),
382
+ "data-invalid": domQuery.dataAttr(invalid),
379
383
  "data-disabled": domQuery.dataAttr(disabled),
380
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
384
+ "data-readonly": domQuery.dataAttr(readOnly),
381
385
  onPointerDown(event) {
382
386
  if (!interactive) return;
383
387
  if (!domQuery.isLeftClick(event)) return;
@@ -405,9 +409,9 @@ function connect(service, normalize) {
405
409
  return normalize.element({
406
410
  ...parts.areaBackground.attrs,
407
411
  id: getAreaGradientId(scope),
408
- "data-invalid": domQuery.dataAttr(prop("invalid")),
412
+ "data-invalid": domQuery.dataAttr(invalid),
409
413
  "data-disabled": domQuery.dataAttr(disabled),
410
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
414
+ "data-readonly": domQuery.dataAttr(readOnly),
411
415
  style: {
412
416
  position: "relative",
413
417
  touchAction: "none",
@@ -432,8 +436,8 @@ function connect(service, normalize) {
432
436
  dir: prop("dir"),
433
437
  tabIndex: disabled ? void 0 : 0,
434
438
  "data-disabled": domQuery.dataAttr(disabled),
435
- "data-invalid": domQuery.dataAttr(prop("invalid")),
436
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
439
+ "data-invalid": domQuery.dataAttr(invalid),
440
+ "data-readonly": domQuery.dataAttr(readOnly),
437
441
  role: "slider",
438
442
  "aria-valuemin": 0,
439
443
  "aria-valuemax": 100,
@@ -666,9 +670,9 @@ function connect(service, normalize) {
666
670
  autoComplete: "off",
667
671
  disabled,
668
672
  "data-disabled": domQuery.dataAttr(disabled),
669
- "data-invalid": domQuery.dataAttr(prop("invalid")),
670
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
671
- readOnly: prop("readOnly"),
673
+ "data-invalid": domQuery.dataAttr(invalid),
674
+ "data-readonly": domQuery.dataAttr(readOnly),
675
+ readOnly,
672
676
  defaultValue: getChannelValue(value, channel),
673
677
  min: channelRange?.minValue,
674
678
  max: channelRange?.maxValue,
@@ -712,8 +716,8 @@ function connect(service, normalize) {
712
716
  disabled,
713
717
  name: prop("name"),
714
718
  tabIndex: -1,
715
- readOnly: prop("readOnly"),
716
- required: prop("required"),
719
+ readOnly,
720
+ required,
717
721
  id: getHiddenInputId(scope),
718
722
  style: domQuery.visuallyHiddenStyle,
719
723
  defaultValue: valueAsString
@@ -726,8 +730,8 @@ function connect(service, normalize) {
726
730
  dir: prop("dir"),
727
731
  disabled,
728
732
  "data-disabled": domQuery.dataAttr(disabled),
729
- "data-invalid": domQuery.dataAttr(prop("invalid")),
730
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
733
+ "data-invalid": domQuery.dataAttr(invalid),
734
+ "data-readonly": domQuery.dataAttr(readOnly),
731
735
  "aria-label": "Pick a color from the screen",
732
736
  onClick() {
733
737
  if (!interactive) return;
@@ -1213,6 +1217,7 @@ var machine = core.createMachine({
1213
1217
  if (prop("inline")) return;
1214
1218
  const getContentEl2 = () => getContentEl(scope);
1215
1219
  return dismissable.trackDismissableElement(getContentEl2, {
1220
+ type: "popover",
1216
1221
  exclude: getTriggerEl(scope),
1217
1222
  defer: true,
1218
1223
  onInteractOutside(event) {
package/dist/index.mjs CHANGED
@@ -203,6 +203,9 @@ function connect(service, normalize) {
203
203
  const areaValue = computed("areaValue");
204
204
  const valueAsString = computed("valueAsString");
205
205
  const disabled = computed("disabled");
206
+ const readOnly = !!prop("readOnly");
207
+ const invalid = !!prop("invalid");
208
+ const required = !!prop("required");
206
209
  const interactive = computed("interactive");
207
210
  const dragging = state.hasTag("dragging");
208
211
  const open = state.hasTag("open");
@@ -269,8 +272,8 @@ function connect(service, normalize) {
269
272
  dir: prop("dir"),
270
273
  id: getRootId(scope),
271
274
  "data-disabled": dataAttr(disabled),
272
- "data-readonly": dataAttr(prop("readOnly")),
273
- "data-invalid": dataAttr(prop("invalid")),
275
+ "data-readonly": dataAttr(readOnly),
276
+ "data-invalid": dataAttr(invalid),
274
277
  style: {
275
278
  "--value": value.toString("css")
276
279
  }
@@ -283,8 +286,9 @@ function connect(service, normalize) {
283
286
  id: getLabelId(scope),
284
287
  htmlFor: getHiddenInputId(scope),
285
288
  "data-disabled": dataAttr(disabled),
286
- "data-readonly": dataAttr(prop("readOnly")),
287
- "data-invalid": dataAttr(prop("invalid")),
289
+ "data-readonly": dataAttr(readOnly),
290
+ "data-invalid": dataAttr(invalid),
291
+ "data-required": dataAttr(required),
288
292
  "data-focus": dataAttr(focused),
289
293
  onClick(event) {
290
294
  event.preventDefault();
@@ -299,8 +303,8 @@ function connect(service, normalize) {
299
303
  id: getControlId(scope),
300
304
  dir: prop("dir"),
301
305
  "data-disabled": dataAttr(disabled),
302
- "data-readonly": dataAttr(prop("readOnly")),
303
- "data-invalid": dataAttr(prop("invalid")),
306
+ "data-readonly": dataAttr(readOnly),
307
+ "data-invalid": dataAttr(invalid),
304
308
  "data-state": open ? "open" : "closed",
305
309
  "data-focus": dataAttr(focused)
306
310
  });
@@ -315,8 +319,8 @@ function connect(service, normalize) {
315
319
  "aria-controls": getContentId(scope),
316
320
  "aria-labelledby": getLabelId(scope),
317
321
  "data-disabled": dataAttr(disabled),
318
- "data-readonly": dataAttr(prop("readOnly")),
319
- "data-invalid": dataAttr(prop("invalid")),
322
+ "data-readonly": dataAttr(readOnly),
323
+ "data-invalid": dataAttr(invalid),
320
324
  "data-placement": currentPlacement,
321
325
  "aria-expanded": dataAttr(open),
322
326
  "data-state": open ? "open" : "closed",
@@ -373,9 +377,9 @@ function connect(service, normalize) {
373
377
  ...parts.area.attrs,
374
378
  id: getAreaId(scope),
375
379
  role: "group",
376
- "data-invalid": dataAttr(prop("invalid")),
380
+ "data-invalid": dataAttr(invalid),
377
381
  "data-disabled": dataAttr(disabled),
378
- "data-readonly": dataAttr(prop("readOnly")),
382
+ "data-readonly": dataAttr(readOnly),
379
383
  onPointerDown(event) {
380
384
  if (!interactive) return;
381
385
  if (!isLeftClick(event)) return;
@@ -403,9 +407,9 @@ function connect(service, normalize) {
403
407
  return normalize.element({
404
408
  ...parts.areaBackground.attrs,
405
409
  id: getAreaGradientId(scope),
406
- "data-invalid": dataAttr(prop("invalid")),
410
+ "data-invalid": dataAttr(invalid),
407
411
  "data-disabled": dataAttr(disabled),
408
- "data-readonly": dataAttr(prop("readOnly")),
412
+ "data-readonly": dataAttr(readOnly),
409
413
  style: {
410
414
  position: "relative",
411
415
  touchAction: "none",
@@ -430,8 +434,8 @@ function connect(service, normalize) {
430
434
  dir: prop("dir"),
431
435
  tabIndex: disabled ? void 0 : 0,
432
436
  "data-disabled": dataAttr(disabled),
433
- "data-invalid": dataAttr(prop("invalid")),
434
- "data-readonly": dataAttr(prop("readOnly")),
437
+ "data-invalid": dataAttr(invalid),
438
+ "data-readonly": dataAttr(readOnly),
435
439
  role: "slider",
436
440
  "aria-valuemin": 0,
437
441
  "aria-valuemax": 100,
@@ -664,9 +668,9 @@ function connect(service, normalize) {
664
668
  autoComplete: "off",
665
669
  disabled,
666
670
  "data-disabled": dataAttr(disabled),
667
- "data-invalid": dataAttr(prop("invalid")),
668
- "data-readonly": dataAttr(prop("readOnly")),
669
- readOnly: prop("readOnly"),
671
+ "data-invalid": dataAttr(invalid),
672
+ "data-readonly": dataAttr(readOnly),
673
+ readOnly,
670
674
  defaultValue: getChannelValue(value, channel),
671
675
  min: channelRange?.minValue,
672
676
  max: channelRange?.maxValue,
@@ -710,8 +714,8 @@ function connect(service, normalize) {
710
714
  disabled,
711
715
  name: prop("name"),
712
716
  tabIndex: -1,
713
- readOnly: prop("readOnly"),
714
- required: prop("required"),
717
+ readOnly,
718
+ required,
715
719
  id: getHiddenInputId(scope),
716
720
  style: visuallyHiddenStyle,
717
721
  defaultValue: valueAsString
@@ -724,8 +728,8 @@ function connect(service, normalize) {
724
728
  dir: prop("dir"),
725
729
  disabled,
726
730
  "data-disabled": dataAttr(disabled),
727
- "data-invalid": dataAttr(prop("invalid")),
728
- "data-readonly": dataAttr(prop("readOnly")),
731
+ "data-invalid": dataAttr(invalid),
732
+ "data-readonly": dataAttr(readOnly),
729
733
  "aria-label": "Pick a color from the screen",
730
734
  onClick() {
731
735
  if (!interactive) return;
@@ -1211,6 +1215,7 @@ var machine = createMachine({
1211
1215
  if (prop("inline")) return;
1212
1216
  const getContentEl2 = () => getContentEl(scope);
1213
1217
  return trackDismissableElement(getContentEl2, {
1218
+ type: "popover",
1214
1219
  exclude: getTriggerEl(scope),
1215
1220
  defer: true,
1216
1221
  onInteractOutside(event) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/color-picker",
3
- "version": "1.22.1",
3
+ "version": "1.24.0",
4
4
  "description": "Core logic for the color-picker widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -27,14 +27,14 @@
27
27
  "url": "https://github.com/chakra-ui/zag/issues"
28
28
  },
29
29
  "dependencies": {
30
- "@zag-js/core": "1.22.1",
31
- "@zag-js/anatomy": "1.22.1",
32
- "@zag-js/dom-query": "1.22.1",
33
- "@zag-js/dismissable": "1.22.1",
34
- "@zag-js/utils": "1.22.1",
35
- "@zag-js/color-utils": "1.22.1",
36
- "@zag-js/popper": "1.22.1",
37
- "@zag-js/types": "1.22.1"
30
+ "@zag-js/core": "1.24.0",
31
+ "@zag-js/anatomy": "1.24.0",
32
+ "@zag-js/dom-query": "1.24.0",
33
+ "@zag-js/dismissable": "1.24.0",
34
+ "@zag-js/utils": "1.24.0",
35
+ "@zag-js/color-utils": "1.24.0",
36
+ "@zag-js/popper": "1.24.0",
37
+ "@zag-js/types": "1.24.0"
38
38
  },
39
39
  "devDependencies": {
40
40
  "clean-package": "2.2.0"