draft-components 4.15.0 → 4.17.0

package/css/draft-components.css

@@ -5690,6 +5690,246 @@
 
 /* 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__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.dc-multi-select__chip {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+.dc-multi-select__chip-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-left: 4px;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: default;
+  background: none;
+  border: none;
+  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: 500;
+}
+
+.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,239 @@
+.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__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.dc-multi-select__chip {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+.dc-multi-select__chip-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-left: 4px;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: default;
+  background: none;
+  border: none;
+  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: 500;
+}
+
+.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,41 @@
+import { type ReactNode, type CSSProperties } from 'react';
+export type MultiSelectSize = 'sm' | 'md' | 'lg';
+export type MultiSelectChipTint = 'gray' | 'green' | 'lime' | 'sky' | 'blue' | 'indigo' | 'pink' | 'red' | 'orange' | 'yellow';
+export type MultiSelectChipStyle = 'default' | 'filled' | 'tinted';
+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 MultiSelectSelectedItemIdsChangeHandler<T extends MultiSelectItem> = (ids: T['id'][]) => void;
+export type MultiSelectOpenHandler = () => void;
+export type MultiSelectCloseHandler = () => void;
+export type MultiSelectMessages = {
+    noData?: ReactNode;
+    notFound?: ReactNode;
+};
+export declare function MultiSelect<T extends MultiSelectItem>({ style, className, size, inputId: defaultInputId, inputAriaLabel, chipTint, chipStyle, placeholder, noDataMessage, notFoundMessage, itemsLoadingMessage, items, itemsError, itemsLoading, invalid, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemLabel, getItemCaption, onOpen, onClose, }: {
+    style?: CSSProperties;
+    className?: string;
+    size?: MultiSelectSize;
+    inputId?: string;
+    inputAriaLabel?: string;
+    chipTint?: MultiSelectChipTint;
+    chipStyle?: MultiSelectChipStyle;
+    placeholder?: string;
+    noDataMessage?: ReactNode;
+    notFoundMessage?: ReactNode;
+    itemsLoadingMessage?: ReactNode;
+    items: T[];
+    itemsError?: ReactNode;
+    itemsLoading?: boolean;
+    invalid?: boolean;
+    selectedItemIds: T['id'][];
+    onChangeSelectedItemIds: MultiSelectSelectedItemIdsChangeHandler<T>;
+    filterItem: MultiSelectItemFilter<T>;
+    getItemLabel: MultiSelectItemLabelGetter<T>;
+    getItemCaption?: MultiSelectItemCaptionGetter<T>;
+    onOpen?: MultiSelectOpenHandler;
+    onClose?: MultiSelectCloseHandler;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, } 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 { CheckIcon, ChevronDownIcon, XMarkIcon } from './icons.js';
+import { getElementBoundingRect } from '../../lib/get-element-bounding-rect.js';
+export function MultiSelect({ style, className, size = 'md', inputId: defaultInputId, inputAriaLabel, chipTint = 'blue', chipStyle = 'default', placeholder, noDataMessage = 'No data', notFoundMessage = 'Not found', itemsLoadingMessage = 'Loading...', items, itemsError, itemsLoading, invalid, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemLabel, getItemCaption = () => undefined, onOpen, onClose, }) {
+    const ref = useRef(null);
+    const id = useId();
+    const inputId = defaultInputId || `${id}-multi-select-input`;
+    const buttonId = `${id}-multi-select-button`;
+    const listBoxId = `${id}-multi-select-list-box`;
+    const getOptionId = (itemId) => `${id}-multi-select-option-${itemId}`;
+    const [search, setSearch] = useState('');
+    const [expanded, setExpanded] = useState(false);
+    const [selectedItemId, setSelectedItemId] = useState(undefined);
+    const checkedItemIdSet = new Set(checkedItemIds);
+    const checkedItems = [];
+    const filteredItems = [];
+    for (const item of items) {
+        if (filterItem(search, item)) {
+            filteredItems.push(item);
+        }
+        if (checkedItemIdSet.has(item.id)) {
+            checkedItems.push(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);
+        setSelectedItemId(undefined);
+        if (typeof onClose === 'function') {
+            onClose();
+        }
+    };
+    const toggleItem = (itemId) => {
+        const newCheckedItemIdSet = new Set(checkedItemIdSet);
+        if (newCheckedItemIdSet.has(itemId)) {
+            newCheckedItemIdSet.delete(itemId);
+        }
+        else {
+            newCheckedItemIdSet.add(itemId);
+        }
+        onChangeCheckedItemIds(Array.from(newCheckedItemIdSet));
+    };
+    const selectItemAndScrollIfNeeded = (itemId) => {
+        setSelectedItemId(itemId);
+        const containerEl = ref.current;
+        if (containerEl && itemId) {
+            const optionId = getOptionId(itemId);
+            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);
+        setSelectedItemId(undefined);
+        openListBox();
+    };
+    const handleInputKeyDown = (event) => {
+        if (event.ctrlKey || event.shiftKey) {
+            return;
+        }
+        let handled = false;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                if (expanded && selectedItemId) {
+                    toggleItem(selectedItemId);
+                    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.id === selectedItemId);
+                    const newSelectedItem = selectedItemIndex >= 0 && selectedItemIndex < lastItemIndex
+                        ? filteredItems[selectedItemIndex + 1]
+                        : filteredItems[firstItemIndex];
+                    selectItemAndScrollIfNeeded(newSelectedItem.id);
+                }
+                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.id === selectedItemId);
+                    const newSelectedItem = selectedItemIndex >= 0 && selectedItemIndex > firstItemIndex
+                        ? filteredItems[selectedItemIndex - 1]
+                        : filteredItems[lastItemIndex];
+                    selectItemAndScrollIfNeeded(newSelectedItem.id);
+                }
+                handled = true;
+                break;
+            case 'Home':
+                if (expanded && selectedItemId && filteredItems.length > 0) {
+                    const firstItem = filteredItems[0];
+                    selectItemAndScrollIfNeeded(firstItem.id);
+                    handled = true;
+                }
+                break;
+            case 'End':
+                if (expanded && selectedItemId && filteredItems.length > 0) {
+                    const lastItem = filteredItems[filteredItems.length - 1];
+                    selectItemAndScrollIfNeeded(lastItem.id);
+                    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: item.id, label: getItemLabel(item), caption: getItemCaption(item), optionId: getOptionId(item.id), checked: checkedItemIdSet.has(item.id), selected: selectedItemId === item.id, onCheck: toggleItem, onSelect: setSelectedItemId }, 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-label": inputAriaLabel, "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedItemId ? getOptionId(selectedItemId) : 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 })] }), checkedItems.length > 0 && (_jsx("div", { className: "dc-multi-select__chips", children: checkedItems.map((item) => (_jsx(MultiSelectChip, { itemId: item.id, tint: chipTint, style: chipStyle, onDelete: toggleItem, children: getItemLabel(item) }, item.id))) }))] }));
+}
+function MultiSelectOption({ id, label, caption, optionId, checked, selected, onCheck, onSelect, }) {
+    const handlePointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onCheck(id);
+    };
+    const handlePointerOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(id);
+    };
+    return (_jsxs("li", { id: optionId, 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("span", { className: "dc-multi-select__option-label", children: label }), caption
+                        ? _jsx("small", { className: "dc-multi-select__option-caption", children: caption })
+                        : null] })] }));
+}
+function MultiSelectChip({ tint, style, itemId, children, onDelete, }) {
+    const handleButtonClick = () => {
+        onDelete(itemId);
+    };
+    return (_jsxs(Tag, { className: "dc-multi-select__chip", as: "span", size: "lg", tint: tint, tagStyle: style, children: [children, _jsx("button", { className: "dc-multi-select__chip-button", type: "button", onClick: handleButtonClick, children: _jsx(XMarkIcon, { "data-icon": "x-mark", width: 18, height: 18 }) })] }));
+}
+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/package.json

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