draft-components 4.20.0 → 4.21.1

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

@@ -1,210 +1,251 @@
-.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);
+  background: var(--button-background);
+  border: var(--button-border-width) var(--button-border-style)
+    var(--button-border-color);
+  border-radius: var(--button-border-radius);
 }
 
-.dark .dc-search-select-option_highlighted {
-  color: var(--dc-white);
-  background: var(--dc-neutral-600);
+.dc-search-select__button[data-invalid="true"] {
+  --button-border-color: var(--button-border-color-error);
 }
 
-.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);
 
-.dark .dc-search-select-option_selected {
-  color: var(--dc-white);
-  background: var(--dc-blue-500);
+  outline: 1px solid var(--button-focus-ring-color);
 }
 
-.dc-search-select-option__caption {
-  font-size: 80%;
-  opacity: 0.75;
-}
-
-.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);
+.dc-search-select__button-label:first-child {
+  padding-left: var(--button-padding-left);
 }
 
-.dark .dc-search-select-separator__label {
-  color: var(--dc-neutral-400);
-}
-
-.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);
-}
-
-.dc-search-select:focus {
-  outline: none;
-  border-color: var(--focus-ring-color);
-  box-shadow: 0 0 0 1px var(--focus-ring-color);
+  justify-content: center;
+  width: var(--button-slot-width);
 }
 
-.dc-search-select_loading,
-.dc-search-select_disabled {
-  pointer-events: none;
+.dc-search-select__caret {
+  opacity: 0.65;
+  transform: translateY(10%);
 }
 
-.dc-search-select_disabled {
-  opacity: var(--dc-disabled-state-opacity);
+.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__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__input::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
 }
 
-.dc-search-select_invalid {
-  border-color: var(--border-color-error);
+.dc-search-select__input::placeholder {
+  color: inherit;
+  opacity: 0.4;
 }
 
-.dc-search-select_full-width {
-  display: flex;
-  width: 100%;
+.dc-search-select__input:focus {
+  outline: none;
 }
 
-.dc-search-select_size_sm {
-  --font-size: 13px;
-  --height: 32px;
-  --padding-x: 8px;
-  --radius: 6px;
+.dc-search-select__content {
+  font: var(--dc-text-sm);
 }
 
-.dc-search-select_size_lg {
-  --font-size: 15px;
-  --height: 40px;
-  --padding-x: 16px;
-  --radius: 8px;
+.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__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__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__arrow {
-  transform: translateY(5%);
+.dc-search-select__option[aria-selected="true"] {
+  color: var(--option-color-selected);
+  background: var(--option-background-selected);
 }
 
-.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-checked="true"] {
+  color: var(--option-color-checked);
+  background: var(--option-background-checked);
 }
 
-.dc-search-select__textbox {
-  padding: var(--popover-padding);
+.dc-search-select__option-label {
+  font: var(--option-label-font);
+  color: var(--option-label-color);
 }
 
-.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-caption {
+  font: var(--option-caption-font);
+  color: var(--option-caption-color);
 }
 
-.dc-search-select__listbox > [role="option"] + [role="option"] {
-  margin-top: 2px;
+.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);
 }
 
-.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);
-
-  color-scheme: dark;
+.dc-search-select__empty-state_error {
+  color: var(--empty-state-color-error);
 }

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

@@ -1,43 +1,42 @@
-import { type ReactNode } from 'react';
-export type SearchSelectLabelRenderer<Value> = (value: Value) => ReactNode;
-export type SearchSelectOptionsRenderer = (props: {
-    searchQuery: string;
-    searchQueryLowerCased: string;
-}) => ReactNode;
+import { type CSSProperties, type ReactNode } from 'react';
 export type SearchSelectSize = 'sm' | 'md' | 'lg';
-export type SearchSelectProps<T> = {
+export type SearchSelectItem = {
+    id: string | number;
+};
+export type SearchSelectItemFilter<T> = (searchQuery: string, item: T) => boolean;
+export type SearchSelectItemIdGetter<T, R> = (item: T) => R;
+export type SearchSelectItemLabelGetter<T> = (item: T) => ReactNode;
+export type SearchSelectItemCaptionGetter<T> = (item: T) => ReactNode;
+export type SearchSelectRenderButtonLabel<T> = (item: T | null) => ReactNode;
+export type SearchSelectChangeHandler<T> = (id: T) => void;
+export type SearchSelectOpenHandler = () => void;
+export type SearchSelectCloseHandler = () => void;
+export declare function SearchSelect<IdType extends string | number, ItemType = unknown>({ style, className, fullWidth, size, inputId: defaultInputId, inputAriaLabel, inputPlaceholder, noDataMessage, notFoundMessage, itemsLoadingMessage, items, itemsError, itemsLoading, loading, invalid, disabled, readOnly, icon, value, onChange, filterItem, getItemId, getItemLabel, getItemCaption, buttonLabel, onOpen, onClose, }: {
+    style?: CSSProperties;
     className?: string;
-    size?: SearchSelectSize;
     fullWidth?: boolean;
-    invalid?: boolean;
+    size?: SearchSelectSize;
+    inputId?: string;
+    inputAriaLabel?: string;
+    inputPlaceholder?: string;
+    noDataMessage?: ReactNode;
+    notFoundMessage?: ReactNode;
+    itemsLoadingMessage?: ReactNode;
+    items: ItemType[];
+    itemsError?: ReactNode;
+    itemsLoading?: boolean;
     loading?: boolean;
+    invalid?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
-    textboxIcon?: ReactNode;
-    textboxAriaLabel?: string;
-    textboxPlaceholder?: string;
-    labelledBy?: string;
-    displayedValue?: ReactNode | SearchSelectLabelRenderer<T>;
-    children?: ReactNode | SearchSelectOptionsRenderer;
-    value: T;
-    onChange: (value: T) => void;
-};
-export declare function SearchSelect<T>({ className, size, fullWidth, invalid, loading, disabled, readOnly, textboxIcon, textboxAriaLabel, textboxPlaceholder, labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }: SearchSelectProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace SearchSelect {
-    var Option: <T>({ className, value, children, caption, }: {
-        className?: string;
-        value: T;
-        children: ReactNode;
-        caption?: ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-    var Separator: ({ className, children, }: {
-        className?: string;
-        children?: ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-    var ButtonLabel: ({ className, icon, value, children, }: {
-        className?: string;
-        icon?: ReactNode;
-        value: ReactNode;
-        children: ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-}
+    icon?: ReactNode;
+    value: IdType | null;
+    onChange: SearchSelectChangeHandler<IdType>;
+    filterItem: SearchSelectItemFilter<ItemType>;
+    getItemId: SearchSelectItemIdGetter<ItemType, IdType>;
+    getItemLabel: SearchSelectItemLabelGetter<ItemType>;
+    getItemCaption?: SearchSelectItemCaptionGetter<ItemType>;
+    buttonLabel?: SearchSelectRenderButtonLabel<ItemType>;
+    onOpen?: SearchSelectOpenHandler;
+    onClose?: SearchSelectCloseHandler;
+}): import("react/jsx-runtime").JSX.Element;