@umbraco-ui/uui-color-picker 1.6.0-rc.0 → 1.6.0-rc.2

package/lib/index.js

@@ -97,11 +97,11 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     demandCustomElement(this, "uui-input");
     demandCustomElement(this, "uui-button");
     demandCustomElement(this, "uui-button-group");
-    demandCustomElement(this, "uui-popover");
     demandCustomElement(this, "uui-color-swatches");
     demandCustomElement(this, "uui-color-swatch");
     demandCustomElement(this, "uui-color-area");
     demandCustomElement(this, "uui-color-slider");
+    demandCustomElement(this, "uui-popover-container");
   }
   /** Returns the current value as a string in the specified format. */
   getFormattedValue(format) {
@@ -232,20 +232,6 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       });
     });
   }
-  openColorPicker(event) {
-    event.stopImmediatePropagation();
-    const target = event.target;
-    const popover = target.parentElement;
-    popover.open = !(popover == null ? void 0 : popover.open);
-    target.setAttribute("aria-expanded", popover.open.toString());
-  }
-  closeColorPicker(event) {
-    const target = event.target;
-    const trigger = target.querySelector("button[part=trigger]");
-    if (trigger) {
-      trigger.setAttribute("aria-expanded", "false");
-    }
-  }
   handleEyeDropper() {
     if (!hasEyeDropper) {
       return;
@@ -376,13 +362,9 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     </uui-color-swatches>`;
   }
   _renderPreviewButton() {
-    return html`<uui-popover
-      placement="bottom-start"
-      @close=${this.closeColorPicker}>
-      <button
+    return html` <button
         type="button"
         part="trigger"
-        slot="trigger"
         aria-label="${this.label || "Open Color picker"}"
         class=${classMap({
       "color-picker__trigger": true,
@@ -396,11 +378,12 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       "--preview-color": `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
     })}
         ?disabled=${this.disabled}
-        @click=${this.openColorPicker}
         aria-haspopup="true"
-        aria-expanded="false"></button>
-      <div slot="popover">${this._renderColorPicker()}</div>
-    </uui-popover>`;
+        aria-expanded="false"
+        popovertarget="color-picker-popover"></button>
+      <uui-popover-container id="color-picker-popover">
+        ${this._renderColorPicker()}
+      </uui-popover-container>`;
   }
   render() {
     return this.inline ? this._renderColorPicker() : this._renderPreviewButton();
@@ -415,6 +398,9 @@ UUIColorPickerElement.styles = [
         display: block;
         width: var(--uui-color-picker-width, 280px);
       }
+      uui-popover-container {
+        width: inherit;
+      }
       .color-picker {
         width: 100%;
         background-color: #fff;
@@ -532,12 +518,6 @@ UUIColorPickerElement.styles = [
         height: 36px;
       }
 
-      uui-popover {
-        display: block;
-        width: 100%;
-        margin: 5px 0;
-      }
-
       uui-input {
         /*  lower the font size to avoid overflow with hlsa format */
         font-size: 0.85rem;

package/lib/uui-color-picker.element.d.ts

@@ -1,9 +1,9 @@
 import { LitElement } from 'lit';
 import { HslaColor } from 'colord';
-import { UUIColorAreaEvent } from '@umbraco-ui/uui-color-area/lib';
-import { UUIColorSliderEvent } from '@umbraco-ui/uui-color-slider/lib';
-import { UUIColorSwatchesElement, UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches/lib';
-import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+import type { UUIColorAreaEvent } from '@umbraco-ui/uui-color-area/lib';
+import type { UUIColorSliderEvent } from '@umbraco-ui/uui-color-slider/lib';
+import type { UUIColorSwatchesElement, UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches/lib';
+import type { UUIInputElement } from '@umbraco-ui/uui-input/lib';
 export type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
 export type UUIColorPickerFormatWithAlpha = UUIColorPickerFormat | 'hexa' | 'rgba' | 'hsla' | 'hsva';
 type UUIColorPickerSize = 'small' | 'medium' | 'large';
@@ -107,8 +107,6 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
     handleInputKeyDown(event: KeyboardEvent): void;
     handleColorSwatchChange(event: UUIColorSwatchesEvent): void;
     handleCopy(): void;
-    openColorPicker(event: Event): void;
-    closeColorPicker(event: Event): void;
     handleEyeDropper(): void;
     setColor(colorString: string | HslaColor): boolean;
     setLetterCase(string: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "version": "1.6.0-rc.0",
+  "version": "1.6.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0-rc.0",
+    "@umbraco-ui/uui-base": "1.6.0-rc.2",
+    "@umbraco-ui/uui-popover-container": "1.6.0-rc.2",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -42,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
-  "gitHead": "04709c32cb81b058bdf7976b69533e5b793c49ab"
+  "gitHead": "5d4eefce4744802ab5bc40055b1a3136f0afc520"
 }