draft-components 4.14.1 → 4.16.0

package/css/draft-components.css

@@ -2119,8 +2119,7 @@
   --font: var(--dc-text-sm);
   --padding: 12px 16px;
   --color: var(--dc-text-color-primary);
-  --background: rgb(var(--dc-white-rgb) / 85%);
-  --background-filter: blur(20px) saturate(180%);
+  --background: var(--dc-background-primary);
   --radius: 8px;
   --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%), 0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%), var(--dc-shadow-lg);
 
@@ -2140,8 +2139,6 @@
   background: var(--background);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
-  -webkit-backdrop-filter: var(--background-filter);
-          backdrop-filter: var(--background-filter);
 }
 
 .dc-popover__backdrop {
@@ -2191,7 +2188,6 @@
 .dark .dc-popover,
 .dark.dc-popover {
   --border-color: var(--dc-neutral-600);
-  --background: rgb(var(--dc-neutral-800-rgb) / 85%);
   --shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-lg);
 
   color-scheme: dark;
@@ -4614,8 +4610,7 @@
   --border-color: var(--dc-neutral-300);
   --border: 1px solid var(--border-color);
   --background: var(--dc-background-primary);
-  --background-sticky: rgb(var(--dc-white-rgb) / 80%);
-  --backdrop-filter-sticky: blur(20px) saturate(180%);
+  --background-sticky: var(--background);
   --head-background: var(--background);
   --row-background-stripped: var(--dc-neutral-100);
   --row-background-selected: var(--dc-neutral-100);
@@ -4689,8 +4684,6 @@
   position: sticky;
   z-index: 1;
   background: var(--background-sticky);
-  -webkit-backdrop-filter: var(--backdrop-filter-sticky);
-          backdrop-filter: var(--backdrop-filter-sticky);
 }
 
 .dc-table_sticky_header thead {
@@ -4784,7 +4777,6 @@
   --color: var(--dc-text-color-primary);
   --border-color: var(--dc-neutral-600);
   --background: var(--dc-background-primary);
-  --background-sticky: rgb(var(--dc-neutral-800-rgb) / 80%);
   --row-background-stripped: var(--dc-neutral-700);
   --row-background-selected: var(--dc-neutral-700);
   --row-background-highlighted: var(--dc-neutral-600);
@@ -5698,6 +5690,236 @@
 
 /* Other */
 
+.dc-multi-select {
+  /* Button props */
+  --button-color: var(--dc-text-color-primary);
+  --button-background: none;
+  --button-background-hover: var(--dc-neutral-100);
+  --button-focus-ring-color: var(--dc-focus-ring-color);
+
+  /* Checkbox props */
+  --checkbox-size: 20px;
+  --checkbox-border-radius: 6px;
+  --checkbox-color: var(--dc-text-color-primary);
+  --checkbox-color-checked: var(--dc-white);
+  --checkbox-background: var(--dc-white);
+  --checkbox-background-checked: var(--dc-blue-500);
+  --checkbox-border-color: var(--dc-neutral-300);
+  --checkbox-border-color-checked: rgb(var(--dc-black-rgb) / 10%);
+  --checkbox-border: 1px solid var(--checkbox-border-color);
+  --checkbox-border-checked: 1px solid var(--checkbox-border-color-checked);
+
+  /* Option props */
+  --option-font: var(--dc-text-sm);
+  --option-caption-font: var(--dc-text-xs);
+  --option-color: var(--dc-text-color-primary);
+  --option-color-selected: var(--dc-text-color-primary);
+  --option-caption-color: var(--dc-text-color-secondary);
+  --option-caption-color-selected: var(--dc-text-color-secondary);
+  --option-background: none;
+  --option-background-selected: var(--dc-background-color-3);
+  --option-border-radius: 4px;
+
+  /* Listbox props */
+  --listbox-border-radius: 7px;
+  --listbox-background: var(--dc-white);
+  --listbox-shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 8%),
+    0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%), var(--dc-shadow-lg);
+
+  /* Empty state props */
+  --empty-state-font-message-font: var(--dc-text-sm);
+  --empty-state-font-message-color: var(--dc-text-color-secondary);
+  --error-state-font-message-color: var(--dc-text-color-error);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  color-scheme: light;
+}
+
+.dc-multi-select__input-container {
+  position: relative;
+}
+
+.dc-multi-select__checked-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.dc-multi-select__item {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+.dc-multi-select__item-delete-button {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-left: 4px;
+  border-radius: inherit;
+}
+
+.dc-multi-select__button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  padding: 0;
+  font: inherit;
+  color: var(--button-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--button-background);
+  border: none;
+  border-radius: inherit;
+}
+
+.dc-multi-select__button:hover {
+  background: var(--button-background-hover);
+}
+
+.dc-multi-select__button:focus {
+  outline: none;
+}
+
+.dc-multi-select__button:focus-visible {
+  outline: 2px solid var(--button-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.dc-multi-select__button [data-icon="chevron-down"] {
+  transform-origin: center;
+}
+
+.dc-multi-select__button[aria-expanded="true"] [data-icon="chevron-down"] {
+  transform: rotate(180deg);
+}
+
+.dc-multi-select__empty-state {
+  padding: 8px;
+  font: var(--empty-state-font-message-font);
+  color: var(--empty-state-font-message-color);
+}
+
+.dc-multi-select__empty-state_error {
+  color: var(--error-state-font-message-color);
+}
+
+.dc-multi-select__empty-state_loading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.dc-multi-select__option {
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  padding: 8px;
+  font: var(--option-font);
+  cursor: default;
+  scroll-margin-top: 4px;
+  scroll-margin-bottom: 4px;
+  border-radius: var(--option-border-radius);
+}
+
+.dc-multi-select__option[aria-selected="true"] {
+  color: var(--option-color-selected);
+  background: var(--option-background-selected);
+}
+
+.dc-multi-select__option [data-icon="check"] {
+  display: none;
+}
+
+.dc-multi-select__option[aria-checked="true"] [data-icon="check"] {
+  display: initial;
+}
+
+.dc-multi-select__option-checkbox {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  color: var(--checkbox-color);
+  background: var(--checkbox-background);
+  border: var(--checkbox-border);
+  border-radius: var(--checkbox-border-radius);
+}
+
+.dc-multi-select__option[aria-checked="true"]
+  .dc-multi-select__option-checkbox {
+  color: var(--checkbox-color-checked);
+  background: var(--checkbox-background-checked);
+  border: var(--checkbox-border-checked);
+}
+
+.dc-multi-select__option-label,
+.dc-multi-select__option-caption {
+  display: block;
+  width: 100%;
+}
+
+.dc-multi-select__option-label {
+  font-weight: 600;
+}
+
+.dc-multi-select__option-caption {
+  font: var(--option-caption-font);
+  color: var(--option-caption-color);
+}
+
+.dc-multi-select__option[aria-checked="true"] .dc-multi-select__option-caption {
+  color: var(--option-caption-color-selected);
+}
+
+.dc-multi-select__list-box {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--dc-overlay-z-index);
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 296px;
+  padding: 4px;
+  margin: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  font-size: var(--font-size);
+  list-style: none;
+  background: var(--listbox-background);
+  border-radius: var(--listbox-border-radius);
+  box-shadow: var(--listbox-shadow);
+}
+
+.dark .dc-multi-select,
+.dark.dc-multi-select {
+  /* Button props */
+  --button-background-hover: var(--dc-neutral-700);
+
+  /* Checkbox props */
+  --checkbox-background: var(--dc-neutral-800);
+  --checkbox-border-color: var(--dc-neutral-600);
+  --checkbox-border-color-checked: rgb(var(--dc-white-rgb) / 10%);
+
+  /* Listbox props */
+  --listbox-background: var(--dc-neutral-800);
+  --listbox-shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
+
+  color-scheme: dark;
+}
+
 .dc-filter-token {
   display: inline-flex;
   align-items: center;

package/dist/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './filtered-search/index.js';
 export * from './form-field/index.js';
 export * from './label/index.js';
 export * from './menu/index.js';
+export * from './multi-select/index.js';
 export * from './nav-list/index.js';
 export * from './password-input/index.js';
 export * from './popover/index.js';
@@ -36,6 +37,6 @@ export * from './tag/index.js';
 export * from './text-input/index.js';
 export * from './textarea/index.js';
 export * from './toast/index.js';
-export * from './token-input/index.js';
 export * from './toaster/index.js';
+export * from './token-input/index.js';
 export * from './tooltip/index.js';

package/dist/components/index.js

@@ -18,6 +18,7 @@ export * from './filtered-search/index.js';
 export * from './form-field/index.js';
 export * from './label/index.js';
 export * from './menu/index.js';
+export * from './multi-select/index.js';
 export * from './nav-list/index.js';
 export * from './password-input/index.js';
 export * from './popover/index.js';
@@ -36,7 +37,7 @@ export * from './tag/index.js';
 export * from './text-input/index.js';
 export * from './textarea/index.js';
 export * from './toast/index.js';
-export * from './token-input/index.js';
 export * from './toaster/index.js';
+export * from './token-input/index.js';
 export * from './tooltip/index.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC"}

package/dist/components/multi-select/icons.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+export declare function ChevronDownIcon(props: ComponentProps<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckIcon(props: ComponentProps<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function XMarkIcon(props: ComponentProps<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/icons.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChevronDownIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, fill: "currentColor", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" }) }));
+}
+export function CheckIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, fill: "currentColor", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" }) }));
+}
+export function XMarkIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, fill: "currentColor", ...props, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }));
+}
+//# sourceMappingURL=icons.js.map

package/dist/components/multi-select/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/components/multi-select/icons.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,eAAe,CAAC,KAA4B;IAC1D,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,cAAc,KACf,KAAK,YAET,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wIAAwI,GAC1I,GACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAA4B;IACpD,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,cAAc,KACf,KAAK,YAET,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,qJAAqJ,GACvJ,GACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAA4B;IACpD,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,cAAc,KACf,KAAK,YAET,eAAM,CAAC,EAAC,oLAAoL,GAAG,GAC3L,CACP,CAAC;AACJ,CAAC"}

package/dist/components/multi-select/index.d.ts

@@ -0,0 +1 @@
+export * from './multi-select.js';

package/dist/components/multi-select/index.js

@@ -0,0 +1,2 @@
+export * from './multi-select.js';
+//# sourceMappingURL=index.js.map

package/dist/components/multi-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/multi-select/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/multi-select/multi-select.css

@@ -0,0 +1,229 @@
+.dc-multi-select {
+  /* Button props */
+  --button-color: var(--dc-text-color-primary);
+  --button-background: none;
+  --button-background-hover: var(--dc-neutral-100);
+  --button-focus-ring-color: var(--dc-focus-ring-color);
+
+  /* Checkbox props */
+  --checkbox-size: 20px;
+  --checkbox-border-radius: 6px;
+  --checkbox-color: var(--dc-text-color-primary);
+  --checkbox-color-checked: var(--dc-white);
+  --checkbox-background: var(--dc-white);
+  --checkbox-background-checked: var(--dc-blue-500);
+  --checkbox-border-color: var(--dc-neutral-300);
+  --checkbox-border-color-checked: rgb(var(--dc-black-rgb) / 10%);
+  --checkbox-border: 1px solid var(--checkbox-border-color);
+  --checkbox-border-checked: 1px solid var(--checkbox-border-color-checked);
+
+  /* Option props */
+  --option-font: var(--dc-text-sm);
+  --option-caption-font: var(--dc-text-xs);
+  --option-color: var(--dc-text-color-primary);
+  --option-color-selected: var(--dc-text-color-primary);
+  --option-caption-color: var(--dc-text-color-secondary);
+  --option-caption-color-selected: var(--dc-text-color-secondary);
+  --option-background: none;
+  --option-background-selected: var(--dc-background-color-3);
+  --option-border-radius: 4px;
+
+  /* Listbox props */
+  --listbox-border-radius: 7px;
+  --listbox-background: var(--dc-white);
+  --listbox-shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 8%),
+    0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%), var(--dc-shadow-lg);
+
+  /* Empty state props */
+  --empty-state-font-message-font: var(--dc-text-sm);
+  --empty-state-font-message-color: var(--dc-text-color-secondary);
+  --error-state-font-message-color: var(--dc-text-color-error);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  color-scheme: light;
+}
+
+.dc-multi-select__input-container {
+  position: relative;
+}
+
+.dc-multi-select__checked-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.dc-multi-select__item {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+.dc-multi-select__item-delete-button {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-left: 4px;
+  border-radius: inherit;
+}
+
+.dc-multi-select__button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  padding: 0;
+  font: inherit;
+  color: var(--button-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--button-background);
+  border: none;
+  border-radius: inherit;
+}
+
+.dc-multi-select__button:hover {
+  background: var(--button-background-hover);
+}
+
+.dc-multi-select__button:focus {
+  outline: none;
+}
+
+.dc-multi-select__button:focus-visible {
+  outline: 2px solid var(--button-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.dc-multi-select__button [data-icon="chevron-down"] {
+  transform-origin: center;
+}
+
+.dc-multi-select__button[aria-expanded="true"] [data-icon="chevron-down"] {
+  transform: rotate(180deg);
+}
+
+.dc-multi-select__empty-state {
+  padding: 8px;
+  font: var(--empty-state-font-message-font);
+  color: var(--empty-state-font-message-color);
+}
+
+.dc-multi-select__empty-state_error {
+  color: var(--error-state-font-message-color);
+}
+
+.dc-multi-select__empty-state_loading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.dc-multi-select__option {
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  padding: 8px;
+  font: var(--option-font);
+  cursor: default;
+  scroll-margin-top: 4px;
+  scroll-margin-bottom: 4px;
+  border-radius: var(--option-border-radius);
+}
+
+.dc-multi-select__option[aria-selected="true"] {
+  color: var(--option-color-selected);
+  background: var(--option-background-selected);
+}
+
+.dc-multi-select__option [data-icon="check"] {
+  display: none;
+}
+
+.dc-multi-select__option[aria-checked="true"] [data-icon="check"] {
+  display: initial;
+}
+
+.dc-multi-select__option-checkbox {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  color: var(--checkbox-color);
+  background: var(--checkbox-background);
+  border: var(--checkbox-border);
+  border-radius: var(--checkbox-border-radius);
+}
+
+.dc-multi-select__option[aria-checked="true"]
+  .dc-multi-select__option-checkbox {
+  color: var(--checkbox-color-checked);
+  background: var(--checkbox-background-checked);
+  border: var(--checkbox-border-checked);
+}
+
+.dc-multi-select__option-label,
+.dc-multi-select__option-caption {
+  display: block;
+  width: 100%;
+}
+
+.dc-multi-select__option-label {
+  font-weight: 600;
+}
+
+.dc-multi-select__option-caption {
+  font: var(--option-caption-font);
+  color: var(--option-caption-color);
+}
+
+.dc-multi-select__option[aria-checked="true"] .dc-multi-select__option-caption {
+  color: var(--option-caption-color-selected);
+}
+
+.dc-multi-select__list-box {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--dc-overlay-z-index);
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 296px;
+  padding: 4px;
+  margin: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  font-size: var(--font-size);
+  list-style: none;
+  background: var(--listbox-background);
+  border-radius: var(--listbox-border-radius);
+  box-shadow: var(--listbox-shadow);
+}
+
+.dark .dc-multi-select,
+.dark.dc-multi-select {
+  /* Button props */
+  --button-background-hover: var(--dc-neutral-700);
+
+  /* Checkbox props */
+  --checkbox-background: var(--dc-neutral-800);
+  --checkbox-border-color: var(--dc-neutral-600);
+  --checkbox-border-color-checked: rgb(var(--dc-white-rgb) / 10%);
+
+  /* Listbox props */
+  --listbox-background: var(--dc-neutral-800);
+  --listbox-shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
+
+  color-scheme: dark;
+}

package/dist/components/multi-select/multi-select.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode, type CSSProperties } from 'react';
+export type MultiSelectSize = 'sm' | 'md' | 'lg';
+export type MultiSelectItem = {
+    id: string | number;
+};
+export type MultiSelectItemFilter<T extends MultiSelectItem> = (searchQuery: string, item: T) => boolean;
+export type MultiSelectItemLabelGetter<T extends MultiSelectItem> = (item: T) => ReactNode;
+export type MultiSelectItemCaptionGetter<T extends MultiSelectItem> = (item: T) => ReactNode;
+export type MultiSelectChangeCheckedItemsHandler<T extends MultiSelectItem> = (items: T[]) => void;
+export type MultiSelectOpenHandler = () => void;
+export type MultiSelectCloseHandler = () => void;
+export type MultiSelectMessages = {
+    noData?: ReactNode;
+    notFound?: ReactNode;
+};
+export declare function MultiSelect<T extends MultiSelectItem>({ id: defaultId, style, className, size, invalid, placeholder, noDataMessage, notFoundMessage, itemsLoadingMessage, items, itemsError, itemsLoading, checkedItems, filterItem, getItemLabel, getItemCaption, onChangeCheckedItems, onOpen, onClose, }: {
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    size?: MultiSelectSize;
+    invalid?: boolean;
+    placeholder?: string;
+    noDataMessage?: ReactNode;
+    notFoundMessage?: ReactNode;
+    itemsLoadingMessage?: ReactNode;
+    items: T[];
+    itemsError?: ReactNode;
+    itemsLoading?: boolean;
+    checkedItems: T[];
+    filterItem: MultiSelectItemFilter<T>;
+    getItemLabel: MultiSelectItemLabelGetter<T>;
+    getItemCaption?: MultiSelectItemCaptionGetter<T>;
+    onChangeCheckedItems: MultiSelectChangeCheckedItemsHandler<T>;
+    onOpen?: MultiSelectOpenHandler;
+    onClose?: MultiSelectCloseHandler;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/multi-select.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, useCallback, } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Spinner } from '../spinner/index.js';
+import { TextInput } from '../text-input/index.js';
+import { Tag } from '../tag/index.js';
+import { IconButton } from '../button/index.js';
+import { CheckIcon, ChevronDownIcon, XMarkIcon } from './icons.js';
+import { getElementBoundingRect } from '../../lib/get-element-bounding-rect.js';
+export function MultiSelect({ id: defaultId, style, className, size = 'md', invalid, placeholder, noDataMessage = 'No data', notFoundMessage = 'Not found', itemsLoadingMessage = 'Loading...', items, itemsError, itemsLoading, checkedItems, filterItem, getItemLabel, getItemCaption, onChangeCheckedItems, onOpen, onClose, }) {
+    const id = useId();
+    const ref = useRef(null);
+    const inputId = defaultId || `${id}multi-select-input`;
+    const buttonId = `${id}multi-select-button`;
+    const listBoxId = `${id}multi-select-list-box`;
+    const getOptionId = useCallback((item) => `${id}multi-select-option-${item.id}`, [id]);
+    const [search, setSearch] = useState('');
+    const [expanded, setExpanded] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(undefined);
+    const checkedItemSet = new Set(checkedItems);
+    const filteredItems = items.filter((item) => filterItem(search, item));
+    const openListBox = () => {
+        if (expanded) {
+            return;
+        }
+        const containerEl = ref.current;
+        if (!containerEl) {
+            return;
+        }
+        const inputEl = document.getElementById(inputId);
+        if (inputEl instanceof HTMLInputElement) {
+            inputEl.focus();
+        }
+        setExpanded(true);
+        if (typeof onOpen === 'function') {
+            onOpen();
+        }
+    };
+    const closeListBox = () => {
+        setExpanded(false);
+        setSelectedItem(undefined);
+        if (typeof onClose === 'function') {
+            onClose();
+        }
+    };
+    const toggleItem = (item) => {
+        const newSelectedItemIdSet = new Set(checkedItemSet);
+        if (newSelectedItemIdSet.has(item)) {
+            newSelectedItemIdSet.delete(item);
+        }
+        else {
+            newSelectedItemIdSet.add(item);
+        }
+        onChangeCheckedItems(Array.from(newSelectedItemIdSet));
+    };
+    const selectItemAndScrollIfNeeded = (item) => {
+        setSelectedItem(item);
+        const containerEl = ref.current;
+        if (containerEl && item) {
+            const optionId = getOptionId(item);
+            const listBoxEl = containerEl.querySelector(`#${listBoxId}`);
+            const optionEl = containerEl.querySelector(`#${optionId}`);
+            if (listBoxEl && optionEl) {
+                const isOptionVisible = isElementVisibleInsideParent(listBoxEl, optionEl);
+                if (!isOptionVisible) {
+                    optionEl.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        }
+    };
+    const handleButtonPress = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (expanded) {
+            closeListBox();
+        }
+        else {
+            openListBox();
+        }
+    };
+    const handleInputClick = () => {
+        openListBox();
+    };
+    const handleInputBlur = () => {
+        closeListBox();
+    };
+    const handleInputChange = (event) => {
+        setSearch(event.target.value);
+        setSelectedItem(undefined);
+        openListBox();
+    };
+    const handleInputKeyDown = (event) => {
+        if (event.ctrlKey || event.shiftKey) {
+            return;
+        }
+        let handled = false;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                if (expanded && selectedItem) {
+                    toggleItem(selectedItem);
+                    handled = true;
+                }
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                openListBox();
+                if (filteredItems.length > 0 && !event.altKey) {
+                    const firstItemIndex = 0;
+                    const lastItemIndex = filteredItems.length - 1;
+                    const selectedItemIndex = filteredItems.findIndex((item) => item === selectedItem);
+                    const newSelectedItem = selectedItemIndex >= 0 && selectedItemIndex < lastItemIndex
+                        ? filteredItems[selectedItemIndex + 1]
+                        : filteredItems[firstItemIndex];
+                    selectItemAndScrollIfNeeded(newSelectedItem);
+                }
+                handled = true;
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                openListBox();
+                if (filteredItems.length > 0 && !event.altKey) {
+                    const firstItemIndex = 0;
+                    const lastItemIndex = filteredItems.length - 1;
+                    const selectedItemIndex = filteredItems.findIndex((item) => item === selectedItem);
+                    const newSelectedItem = selectedItemIndex >= 0 && selectedItemIndex > firstItemIndex
+                        ? filteredItems[selectedItemIndex - 1]
+                        : filteredItems[lastItemIndex];
+                    selectItemAndScrollIfNeeded(newSelectedItem);
+                }
+                handled = true;
+                break;
+            case 'Home':
+                if (expanded && selectedItem && filteredItems.length > 0) {
+                    const firstItem = filteredItems[0];
+                    selectItemAndScrollIfNeeded(firstItem);
+                    handled = true;
+                }
+                break;
+            case 'End':
+                if (expanded && selectedItem && filteredItems.length > 0) {
+                    const lastItem = filteredItems[filteredItems.length - 1];
+                    selectItemAndScrollIfNeeded(lastItem);
+                    handled = true;
+                }
+                break;
+            case 'Esc':
+            case 'Escape':
+                closeListBox();
+                handled = true;
+                break;
+            default:
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    let listBoxContent;
+    if (!expanded) {
+        listBoxContent = null;
+    }
+    else if (itemsLoading) {
+        listBoxContent = (_jsxs("li", { className: "dc-multi-select__empty-state dc-multi-select__empty-state_loading", children: [_jsx(Spinner, { size: "1em" }), " ", itemsLoadingMessage] }));
+    }
+    else if (itemsError) {
+        listBoxContent = (_jsx("li", { className: "dc-multi-select__empty-state dc-multi-select__empty-state_error", children: itemsError }));
+    }
+    else if (items.length === 0) {
+        listBoxContent = (_jsx("li", { className: "dc-multi-select__empty-state", children: noDataMessage }));
+    }
+    else if (filteredItems.length === 0) {
+        listBoxContent = (_jsx("li", { className: "dc-multi-select__empty-state", children: notFoundMessage }));
+    }
+    else {
+        listBoxContent = filteredItems.map((item) => (_jsx(MultiSelectOption, { id: getOptionId(item), item: item, checked: checkedItemSet.has(item), selected: selectedItem === item, getLabel: getItemLabel, getCaption: getItemCaption, onCheck: toggleItem, onSelect: setSelectedItem }, item.id)));
+    }
+    return (_jsxs("div", { ref: ref, style: style, className: classNames('dc-multi-select', className), "data-expanded": expanded, children: [_jsxs("div", { className: "dc-multi-select__input-container", children: [_jsx(TextInput, { id: inputId, fullWidth: true, size: size, placeholder: placeholder, type: "text", role: "combobox", "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedItem ? getOptionId(selectedItem) : undefined, value: search, invalid: invalid, "data-1p-ignore": true, onClick: handleInputClick, onBlur: handleInputBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, slotRight: () => (_jsx("button", { id: buttonId, className: "dc-multi-select__button", type: "button", "aria-expanded": expanded, "aria-controls": listBoxId, tabIndex: -1, onPointerDown: handleButtonPress, children: _jsx(ChevronDownIcon, { "data-icon": "chevron-down", width: 20, height: 20 }) })) }), _jsx("ul", { id: listBoxId, className: "dc-multi-select__list-box", role: "listbox", hidden: !expanded, children: listBoxContent })] }), _jsx("div", { className: "dc-multi-select__checked-items", children: checkedItems.map((item) => (_jsxs(Tag, { className: "dc-multi-select__item", size: "lg", children: [getItemLabel(item), _jsx(IconButton, { className: "dc-multi-select__item-delete-button", buttonStyle: "plain", size: "xs", type: "button", onClick: () => toggleItem(item), children: _jsx(XMarkIcon, { "data-icon": "x-mark", width: 18, height: 18 }) })] }, item.id))) })] }));
+}
+function MultiSelectOption({ id, item, selected, checked, getLabel, getCaption, onCheck, onSelect, }) {
+    const handlePointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onCheck(item);
+    };
+    const handlePointerOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(item);
+    };
+    let caption;
+    if (typeof getCaption === 'function') {
+        caption = getCaption(item);
+    }
+    return (_jsxs("li", { id: id, className: "dc-multi-select__option", role: "option", "aria-checked": checked, "aria-selected": selected, onPointerDown: handlePointerDown, onPointerOver: handlePointerOver, children: [_jsx("div", { className: "dc-multi-select__option-checkbox", children: _jsx(CheckIcon, { "data-icon": "check", width: 16, height: 16 }) }), _jsxs("div", { className: "dc-multi-select__option-body", children: [_jsx("b", { className: "dc-multi-select__option-label", children: getLabel(item) }), caption
+                        ? _jsx("small", { className: "dc-multi-select__option-caption", children: caption })
+                        : null] })] }));
+}
+function isElementVisibleInsideParent(parent, child) {
+    const parentRect = getElementBoundingRect(parent);
+    const childRect = getElementBoundingRect(child);
+    return childRect.top >= parentRect.top && childRect.bottom <= parentRect.bottom;
+}
+//# sourceMappingURL=multi-select.js.map

package/dist/components/multi-select/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.tsx"],"names":[],"mappings":"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"}

package/dist/components/popover/popover.css

@@ -2,8 +2,7 @@
   --font: var(--dc-text-sm);
   --padding: 12px 16px;
   --color: var(--dc-text-color-primary);
-  --background: rgb(var(--dc-white-rgb) / 85%);
-  --background-filter: blur(20px) saturate(180%);
+  --background: var(--dc-background-primary);
   --radius: 8px;
   --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%), 0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%), var(--dc-shadow-lg);
 
@@ -23,8 +22,6 @@
   background: var(--background);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
-  -webkit-backdrop-filter: var(--background-filter);
-          backdrop-filter: var(--background-filter);
 }
 
 .dc-popover__backdrop {
@@ -74,7 +71,6 @@
 .dark .dc-popover,
 .dark.dc-popover {
   --border-color: var(--dc-neutral-600);
-  --background: rgb(var(--dc-neutral-800-rgb) / 85%);
   --shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-lg);
 
   color-scheme: dark;

package/dist/components/table/table.css

@@ -4,8 +4,7 @@
   --border-color: var(--dc-neutral-300);
   --border: 1px solid var(--border-color);
   --background: var(--dc-background-primary);
-  --background-sticky: rgb(var(--dc-white-rgb) / 80%);
-  --backdrop-filter-sticky: blur(20px) saturate(180%);
+  --background-sticky: var(--background);
   --head-background: var(--background);
   --row-background-stripped: var(--dc-neutral-100);
   --row-background-selected: var(--dc-neutral-100);
@@ -79,8 +78,6 @@
   position: sticky;
   z-index: 1;
   background: var(--background-sticky);
-  -webkit-backdrop-filter: var(--backdrop-filter-sticky);
-          backdrop-filter: var(--backdrop-filter-sticky);
 }
 
 .dc-table_sticky_header thead {
@@ -174,7 +171,6 @@
   --color: var(--dc-text-color-primary);
   --border-color: var(--dc-neutral-600);
   --background: var(--dc-background-primary);
-  --background-sticky: rgb(var(--dc-neutral-800-rgb) / 80%);
   --row-background-stripped: var(--dc-neutral-700);
   --row-background-selected: var(--dc-neutral-700);
   --row-background-highlighted: var(--dc-neutral-600);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "4.14.1",
+  "version": "4.16.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {