draft-components 4.20.0 → 4.21.1

package/css/draft-components.css

@@ -3156,215 +3156,256 @@
   color-scheme: dark;
 }
 
-.dc-search-select-button-label {
+.dc-search-select {
+  --button-height: 36px;
+  --button-padding-left: 12px;
+  --button-slot-width: 32px;
+  --button-font-size: 14px;
+  --button-font-weight: 400;
+  --button-line-height: 20px;
+  --button-color: var(--dc-neutral-900);
+  --button-background: var(--dc-white);
+  --button-border-width: 1px;
+  --button-border-style: solid;
+  --button-border-color: var(--dc-neutral-300);
+  --button-border-color-error: var(--dc-red-500);
+  --button-border-radius: 7px;
+  --button-focus-ring-color: var(--dc-focus-ring-color);
+  --popup-min-width: 240px;
+  --popup-max-width: 720px;
+  --popup-offset: 4px;
+  --popup-color: var(--dc-neutral-900);
+  --popup-background: var(--dc-white);
+  --popup-border-width: 1px;
+  --popup-border-style: solid;
+  --popup-border-color: var(--dc-neutral-300);
+  --popup-border-radius: 7px;
+  --popup-shadow:
+    0 2px 4px 0 rgb(var(--dc-neutral-950-rgb) / 5%),
+    0 2px 10px 0 rgb(var(--dc-neutral-950-rgb) / 10%);
+  --input-padding: 8px 12px;
+  --input-font-size: 14px;
+  --input-font-weight: 400;
+  --input-line-height: 1;
+  --input-border-width: 1px;
+  --input-border-style: solid;
+  --input-border-color: var(--dc-neutral-300);
+  --list-box-max-height: 256px;
+  --list-box-padding: 4px;
+  --option-padding: 4px 8px;
+  --option-font: var(--dc-text-sm);
+  --option-scroll-margin-block: 4px;
+  --option-scroll-border-radius: 4px;
+  --option-color: var(--dc-neutral-900);
+  --option-background: none;
+  --option-color-selected: var(--dc-neutral-950);
+  --option-background-selected: rgb(var(--dc-neutral-950-rgb) / 12%);
+  --option-color-checked: var(--dc-white);
+  --option-background-checked: var(--dc-blue-500);
+  --option-label-font: 600 var(--dc-text-sm);
+  --option-label-color: inherit;
+  --option-caption-font: var(--dc-text-sm);
+  --option-caption-color: inherit;
+  --empty-state-padding: 16px;
+  --empty-state-font: var(--dc-text-sm);
+  --empty-state-text-align: center;
+  --empty-state-color: var(--dc-neutral-600);
+  --empty-state-color-error: var(--dc-red-600);
+
+  position: relative;
+  box-sizing: border-box;
   display: inline-flex;
-  gap: 0.5em;
-  align-items: center;
+  font-family: var(--dc-primary-font);
+  color-scheme: light;
 }
 
-.dc-search-select-button-label > b {
-  font-weight: 700;
+.dc-search-select_full-width {
+  display: flex;
+  width: 100%;
 }
 
-.dc-search-select-option {
+.dc-search-select__button {
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 28px;
-  padding: 4px 8px;
-  font-size: 14px;
-  line-height: 1.25;
-  color: inherit;
+  align-items: center;
+  width: 100%;
+  height: var(--button-height);
+  padding: 0;
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  color: var(--button-color);
+  text-align: left;
   cursor: default;
-  border-radius: 5px;
-}
-
-.dc-search-select-option_highlighted {
-  color: var(--dc-neutral-900);
-  background: var(--dc-neutral-300);
-}
-
-.dark .dc-search-select-option_highlighted {
-  color: var(--dc-white);
-  background: var(--dc-neutral-600);
+  background: var(--button-background);
+  border: var(--button-border-width) var(--button-border-style)
+    var(--button-border-color);
+  border-radius: var(--button-border-radius);
 }
 
-.dc-search-select-option_selected {
-  color: var(--dc-white);
-  background: var(--dc-blue-500);
+.dc-search-select__button[data-invalid="true"] {
+  --button-border-color: var(--button-border-color-error);
 }
 
-.dark .dc-search-select-option_selected {
-  color: var(--dc-white);
-  background: var(--dc-blue-500);
-}
+.dc-search-select__button:focus,
+.dc-search-select__button[aria-expanded="true"] {
+  --button-border-color: var(--button-focus-ring-color);
 
-.dc-search-select-option__caption {
-  font-size: 80%;
-  opacity: 0.75;
+  outline: 1px solid var(--button-focus-ring-color);
 }
 
-.dc-search-select-separator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 8px 0;
+.dc-search-select__button:disabled {
+  opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-search-select-separator::before,
-.dc-search-select-separator::after {
-  display: block;
-  height: 1px;
-  content: "";
-  background: var(--dc-neutral-300);
+.dc-search-select__button_size_sm {
+  --button-font-size: 13px;
+  --button-height: 32px;
+  --button-padding-left: 8px;
+  --button-slot-width: 28px;
+  --button-border-radius: 6px;
 }
 
-.dc-search-select-separator::before {
-  flex-shrink: 0;
-  width: 12px;
+.dc-search-select__button_size_lg {
+  --button-font-size: 15px;
+  --button-height: 40px;
+  --button-padding-left: 16px;
+  --button-slot-width: 40px;
+  --button-border-radius: 8px;
 }
 
-.dc-search-select-separator::after {
+.dc-search-select__button-label {
   flex-grow: 1;
 }
 
-.dark .dc-search-select-separator::before,
-.dark .dc-search-select-separator::after {
-  background: var(--dc-neutral-600);
-}
-
-.dc-search-select-separator__label {
-  padding: 0 8px;
-  font-size: 12px;
-  color: var(--dc-neutral-500);
-}
-
-.dark .dc-search-select-separator__label {
-  color: var(--dc-neutral-400);
+.dc-search-select__button-label:first-child {
+  padding-left: var(--button-padding-left);
 }
 
-.dc-search-select {
-  --font-size: 14px;
-  --color: var(--dc-black-950);
-  --height: 36px;
-  --padding-x: 12px;
-  --radius: 7px;
-  --border-color: var(--dc-neutral-300);
-  --border-color-error: var(--dc-red-500);
-  --background: var(--dc-white);
-  --focus-ring-color: var(--dc-focus-ring-color);
-
-  position: relative;
-  box-sizing: border-box;
+.dc-search-select__button-slot {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
-  max-width: 100%;
-  height: var(--height);
-  padding: 0 var(--padding-x);
-  padding-right: calc(var(--height) + 0.15em);
-  font-family: var(--dc-primary-font);
-  font-size: var(--font-size);
-  font-weight: 400;
-  line-height: 1.25;
-  vertical-align: middle;
-  color: var(--color);
-  color-scheme: light;
-  background: var(--background);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
+  justify-content: center;
+  width: var(--button-slot-width);
 }
 
-.dc-search-select:focus {
-  outline: none;
-  border-color: var(--focus-ring-color);
-  box-shadow: 0 0 0 1px var(--focus-ring-color);
+.dc-search-select__caret {
+  opacity: 0.65;
+  transform: translateY(10%);
 }
 
-.dc-search-select_loading,
-.dc-search-select_disabled {
-  pointer-events: none;
+.dc-search-select__popup {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--dc-overlay-z-index);
+  width: 100%;
+  min-width: var(--popup-min-width);
+  max-width: var(--popup-max-width);
+  margin-top: var(--popup-offset);
+  overflow: hidden;
+  color: var(--popup-color);
+  background: var(--popup-background);
+  border: var(--popup-border-width) var(--popup-border-style)
+    var(--popup-border-color);
+  border-radius: var(--popup-border-radius);
+  box-shadow: var(--popup-shadow);
 }
 
-.dc-search-select_disabled {
-  opacity: var(--dc-disabled-state-opacity);
+.dc-search-select__input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--input-padding);
+  margin: 0;
+  font-family: inherit;
+  font-size: var(--input-font-size);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  border-bottom: var(--input-border-width) var(--input-border-style)
+    var(--input-border-color);
 }
 
-.dc-search-select_invalid {
-  border-color: var(--border-color-error);
+.dc-search-select__input::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
 }
 
-.dc-search-select_full-width {
-  display: flex;
-  width: 100%;
+.dc-search-select__input::placeholder {
+  color: inherit;
+  opacity: 0.4;
 }
 
-.dc-search-select_size_sm {
-  --font-size: 13px;
-  --height: 32px;
-  --padding-x: 8px;
-  --radius: 6px;
+.dc-search-select__input:focus {
+  outline: none;
 }
 
-.dc-search-select_size_lg {
-  --font-size: 15px;
-  --height: 40px;
-  --padding-x: 16px;
-  --radius: 8px;
+.dc-search-select__content {
+  font: var(--dc-text-sm);
 }
 
-.dc-search-select__slot-right {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: var(--height);
-  height: var(--height);
-  pointer-events: none;
+.dc-search-select__list-box {
+  box-sizing: border-box;
+  display: grid;
+  max-height: var(--list-box-max-height);
+  padding: var(--list-box-padding);
+  margin: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  contain: content;
+  list-style: none;
+  scrollbar-width: thin;
 }
 
-.dc-search-select__arrow {
-  transform: translateY(5%);
+.dc-search-select__option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: var(--option-padding);
+  font: var(--option-font);
+  color: var(--option-color);
+  cursor: default;
+  scroll-margin-top: var(--option-scroll-margin-block);
+  scroll-margin-bottom: var(--option-scroll-margin-block);
+  background: var(--option-background);
+  border-radius: var(--option-scroll-border-radius);
 }
 
-.dc-search-select__popover {
-  --popover-padding: 8px;
-  --popover-radius: 8px;
-
-  padding: 0;
-  padding-bottom: var(--popover-padding);
-  border-radius: var(--popover-radius);
+.dc-search-select__option[aria-selected="true"] {
+  color: var(--option-color-selected);
+  background: var(--option-background-selected);
 }
 
-.dc-search-select__textbox {
-  padding: var(--popover-padding);
+.dc-search-select__option[aria-checked="true"] {
+  color: var(--option-color-checked);
+  background: var(--option-background-checked);
 }
 
-.dc-search-select__listbox {
-  max-height: 352px;
-  padding: 0 var(--popover-padding);
-  margin: 0;
-  overflow-y: auto;
-  list-style: none;
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
+.dc-search-select__option-label {
+  font: var(--option-label-font);
+  color: var(--option-label-color);
 }
 
-.dc-search-select__listbox > [role="option"] + [role="option"] {
-  margin-top: 2px;
+.dc-search-select__option-caption {
+  font: var(--option-caption-font);
+  color: var(--option-caption-color);
 }
 
-.dark .dc-search-select,
-.dark.dc-search-select {
-  --color: var(--dc-white);
-  --border-color: var(--dc-neutral-600);
-  --border-color-error: var(--dc-red-400);
-  --background: var(--dc-neutral-800);
+.dc-search-select__empty-state {
+  box-sizing: border-box;
+  padding: var(--empty-state-padding);
+  font: var(--empty-state-font);
+  color: var(--empty-state-color);
+  text-align: var(--empty-state-text-align);
+}
 
-  color-scheme: dark;
+.dc-search-select__empty-state_error {
+  color: var(--empty-state-color-error);
 }
 
 .dc-switch {

package/dist/components/dialog/dialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
-import { useRefCallback } from '../../hooks/use-ref-callback.js';
+import { useCallbackRef } from '../../hooks/use-callback-ref.js';
 import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
 import { useLockBodyScroll } from '../../hooks/use-lock-body-scroll.js';
 import { useFocusTrap } from '../../hooks/use-focus-trap.js';
@@ -17,12 +17,12 @@ export function Dialog(props) {
     const defaultId = useId();
     const modalRef = useRef(null);
     const backdropRef = useRef(null);
-    const close = useRefCallback(() => {
+    const close = useCallbackRef(() => {
         if (typeof onClose === 'function') {
             onClose();
         }
     });
-    const unmount = useRefCallback(() => {
+    const unmount = useCallbackRef(() => {
         setIsMounted(false);
         if (typeof onUnmount === 'function') {
             onUnmount();

package/dist/components/menu/menu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useId, useState, } from 'react';
 import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
 import { KeyboardKey } from '../../lib/keyboard-key.js';
-import { useRefCallback } from '../../hooks/use-ref-callback.js';
+import { useCallbackRef } from '../../hooks/use-callback-ref.js';
 import { Popover } from '../popover/index.js';
 import { MenuItem } from './menu-item.js';
 import { MenuSeparator } from './menu-separator.js';
@@ -11,13 +11,13 @@ export function Menu({ defaultIsOpen = false, shouldRenderBackdrop = false, plac
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
-    const open = useRefCallback(() => {
+    const open = useCallbackRef(() => {
         setIsOpen(true);
         if (typeof onOpen === 'function') {
             onOpen();
         }
     });
-    const close = useRefCallback(() => {
+    const close = useCallbackRef(() => {
         setIsOpen(false);
         if (typeof onClose === 'function') {
             onClose();

package/dist/components/popover/popover.js

@@ -4,7 +4,7 @@ import { observeElementMove } from '../../lib/observe-element-move.js';
 import { observeElementChange } from '../../lib/observe-element-change.js';
 import { calcElementPosition } from '../../lib/calc-element-position.js';
 import { deleteKeys } from '../../lib/helpers.js';
-import { useRefCallback } from '../../hooks/use-ref-callback.js';
+import { useCallbackRef } from '../../hooks/use-callback-ref.js';
 import { useFocusTrap } from '../../hooks/use-focus-trap.js';
 import { useLockBodyScroll } from '../../hooks/use-lock-body-scroll.js';
 import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
@@ -24,12 +24,12 @@ export function Popover({ className, role = 'dialog', 'aria-modal': ariaModal =
     else {
         anchorRef = defaultAnchorRef;
     }
-    const close = useRefCallback(() => {
+    const close = useCallbackRef(() => {
         if (typeof onClose === 'function') {
             onClose();
         }
     });
-    const unmount = useRefCallback(() => {
+    const unmount = useCallbackRef(() => {
         setIsMounted(false);
         if (typeof onUnmount === 'function') {
             onUnmount();