one-design-next 0.0.97 → 0.0.99

package/dist/chat-list/style/index.css

@@ -90,44 +90,76 @@
   color: var(--odn-color-black-8);
 }
 
+/* 尺寸与 hover 内缩走 Dropdown 的 .odn-dropdown-compact；此处只留筛选项特有的 */
 [data-odn-dropdown-content].odn-chat-list-filter-menu {
-  /* 比默认 Dropdown 小一号：对齐 popup 字号 + Select small 行高 */
-  --odn-font-size: var(--odn-popup-font-size);
-  --odn-line-height: var(--odn-popup-line-height);
-  --odn-popup-control-height: 28px;
-}
-[data-odn-dropdown-content].odn-chat-list-filter-menu [data-odn-dropdown-label] {
-  height: auto;
-  padding: 0 12px 2px;
-}
-[data-odn-dropdown-content].odn-chat-list-filter-menu {
-  /* hover 不通栏：左右各缩 4px，圆角 4px；padding 8px 使文案仍落在 12px */
-}
-[data-odn-dropdown-content].odn-chat-list-filter-menu [data-odn-dropdown-item] {
-  margin: 0 4px;
-  padding-inline: 8px;
-  border-radius: 4px;
+  /* 勾选态图标靠右对齐，标签不参与省略 */
 }
 [data-odn-dropdown-content].odn-chat-list-filter-menu [data-odn-dropdown-item-label] {
   overflow: visible;
 }
-[data-odn-dropdown-content].odn-chat-list-filter-menu {
-  /* 组间线：上下各 8px padding，线画在 content-box，左右内缩 */
+
+[data-odn-chat-list],
+[data-odn-chat-list-body] {
+  scrollbar-width: thin;
+  scrollbar-color: var(--odn-color-black-5) transparent;
+}
+[data-odn-chat-list]::-webkit-scrollbar,
+[data-odn-chat-list-body]::-webkit-scrollbar {
+  width: 3px;
 }
-[data-odn-dropdown-content].odn-chat-list-filter-menu [data-odn-dropdown-separator] {
-  box-sizing: content-box;
-  height: 1px;
-  margin: 0 12px;
-  padding: 8px 0;
+[data-odn-chat-list]::-webkit-scrollbar-thumb,
+[data-odn-chat-list-body]::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
   background-color: var(--odn-color-black-5);
-  background-clip: content-box;
+}
+[data-odn-chat-list]::-webkit-scrollbar-track,
+[data-odn-chat-list-body]::-webkit-scrollbar-track {
+  background: transparent;
+}
+[data-odn-chat-list]::-webkit-scrollbar-thumb:hover,
+[data-odn-chat-list-body]::-webkit-scrollbar-thumb:hover {
+  background-color: var(--odn-color-black-6);
+}
+
+[data-odn-chat-list-scroll] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
 }
 
 [data-odn-chat-list-body] {
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   gap: 8px;
   min-width: 0;
+  min-height: 0;
+  overflow-anchor: none;
+}
+
+[data-odn-chat-list-fade] {
+  position: absolute;
+  inset-inline: 0;
+  z-index: 1;
+  height: 24px;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+[data-odn-chat-list-fade][data-hidden] {
+  opacity: 0;
+}
+
+[data-odn-chat-list-fade=top] {
+  top: 0;
+  background: linear-gradient(to bottom, var(--odn-chat-list-fade-bg, #fff), transparent);
+}
+
+[data-odn-chat-list-fade=bottom] {
+  bottom: 0;
+  background: linear-gradient(to top, var(--odn-chat-list-fade-bg, #fff), transparent);
 }
 
 [data-odn-chat-list-empty] {
@@ -149,7 +181,7 @@
   flex-shrink: 0;
 }
 
-/* 置顶 / 最近分区头：视觉同组标题，无折叠 / 菜单等交互；左缘同标题栏 / ChatItem */
+/* 置顶 / 最近 /「分组」分区头：次级标签（12px / black-9），与 ChatGroup 组头拉开层级 */
 [data-odn-chat-list-pinned-title],
 [data-odn-chat-list-recent-title] {
   padding: 4px 12px 2px;
@@ -167,4 +199,213 @@
   flex-direction: column;
   gap: 4px;
   min-width: 0;
+}
+
+/* 自定义分组：标题栏搜索展开、分组模块 */
+[data-odn-chat-list-grouped] [data-odn-chat-list-scroll] {
+  flex: 1 1 auto;
+}
+
+[data-odn-chat-list-grouped] [data-odn-chat-list-body] {
+  overflow-y: auto;
+  /* overlay 条子落在 padding 里，不压 ChatItem */
+  padding-right: var(--odn-chat-list-scroll-slot, 8px);
+}
+
+[data-odn-chat-list-grouped] [data-odn-chat-list-toolbar] {
+  position: relative;
+  padding-right: var(--odn-chat-list-scroll-slot, 8px);
+}
+
+[data-odn-chat-list-toolbar-idle] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-right: 30px;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 220ms ease 160ms, visibility 0s linear 160ms;
+}
+
+[data-odn-chat-list-search-open] [data-odn-chat-list-toolbar-idle] {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition: opacity 0s, visibility 0s;
+}
+
+[data-odn-chat-list-search-field] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 28px;
+  min-width: 0;
+  overflow: hidden;
+  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-odn-chat-list-search-open] [data-odn-chat-list-search-field] {
+  width: 100%;
+}
+
+[data-odn-chat-list-search-trigger],
+[data-odn-chat-list-icon-btn],
+[data-odn-chat-list-search-close] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--odn-color-black-9);
+  cursor: pointer;
+}
+[data-odn-chat-list-search-trigger]:hover,
+[data-odn-chat-list-icon-btn]:hover,
+[data-odn-chat-list-search-close]:hover {
+  background: var(--odn-color-black-3);
+  color: var(--odn-color-black-12);
+}
+[data-odn-chat-list-search-trigger]:focus-visible,
+[data-odn-chat-list-icon-btn]:focus-visible,
+[data-odn-chat-list-search-close]:focus-visible {
+  outline: none;
+  background: var(--odn-color-black-3);
+  color: var(--odn-color-black-12);
+}
+
+[data-odn-chat-list-icon-btn] {
+  width: 24px;
+  height: 24px;
+  color: var(--odn-color-black-8);
+}
+[data-odn-chat-list-icon-btn]:hover {
+  color: var(--odn-color-black-12);
+}
+
+/* 组头 … 对齐 ChatItem 操作按钮：色阶、展开按下态。hover 底交给 HoverFill。 */
+[data-odn-chat-list-group-menu] {
+  color: var(--odn-color-black-9);
+}
+[data-odn-chat-list-group-menu]:hover, [data-odn-chat-list-group-menu]:focus-visible {
+  color: var(--odn-color-black-12);
+}
+[data-odn-chat-list-group-menu]:active, [data-odn-chat-list-group-menu][data-odn-chat-list-group-menu-open] {
+  background: var(--odn-color-black-5);
+  color: var(--odn-color-black-12);
+}
+
+.odn-chat-list-icon-btn-bg {
+  border-radius: 6px;
+}
+
+[data-odn-chat-list-search-open] [data-odn-chat-list-search-trigger],
+[data-odn-chat-list-search-open] [data-odn-chat-list-search-trigger]:hover {
+  background: transparent;
+  color: var(--odn-color-black-8);
+}
+
+[data-odn-chat-list-search-input] {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: auto;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--odn-color-black-12);
+  font: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  outline: none;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity calc(420ms * 0.6) cubic-bezier(0.22, 1, 0.36, 1);
+}
+[data-odn-chat-list-search-input]::placeholder {
+  color: var(--odn-color-black-7);
+}
+
+[data-odn-chat-list-search-open] [data-odn-chat-list-search-input] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-odn-chat-list-search-close] {
+  flex-shrink: 0;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  opacity: 0;
+  pointer-events: none;
+  color: var(--odn-color-black-8);
+  transition: opacity calc(420ms * 0.6) cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-odn-chat-list-search-open] [data-odn-chat-list-search-close] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-odn-chat-list-search-field],
+  [data-odn-chat-list-search-input],
+  [data-odn-chat-list-search-close] {
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+[data-odn-chat-list-groups] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+[data-odn-chat-list-section-header] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  /* 左缘与标题栏 / ChatItem / 置顶分区头同为 12px */
+  padding: 4px 4px 2px 12px;
+}
+[data-odn-chat-list-section-header] [data-odn-chat-list-icon-btn] {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+[data-odn-chat-list-section-header]:hover [data-odn-chat-list-icon-btn], [data-odn-chat-list-section-header]:has(:focus-visible) [data-odn-chat-list-icon-btn] {
+  opacity: 1;
+}
+
+[data-odn-chat-list-section-title] {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 2px 4px 2px 0;
+  color: var(--odn-color-black-9);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-odn-chat-group-extra] [data-odn-chat-list-icon-btn]:hover,
+[data-odn-chat-group-extra] [data-odn-chat-list-icon-btn]:focus-visible {
+  background: transparent;
 }

package/dist/dropdown/index.d.ts

@@ -26,9 +26,9 @@ declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<i
     closeOnClick?: boolean | undefined;
     onClick?: React.ComponentPropsWithoutRef<typeof Menu.Item>['onClick'];
 } & React.RefAttributes<HTMLElement>>;
-declare function DropdownMenuCheckboxItem({ children, checked, ...props }: React.ComponentProps<typeof Menu.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ children, checked, disabled, ...props }: React.ComponentProps<typeof Menu.CheckboxItem>): React.JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof Menu.RadioGroup>): React.JSX.Element;
-declare function DropdownMenuRadioItem({ children, ...props }: React.ComponentProps<typeof Menu.RadioItem>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ children, disabled, ...props }: React.ComponentProps<typeof Menu.RadioItem>): React.JSX.Element;
 declare function DropdownMenuLabel({ inset, children, ...props }: React.ComponentPropsWithoutRef<typeof Menu.GroupLabel> & {
     inset?: boolean;
 }): React.JSX.Element;
@@ -37,6 +37,7 @@ declare function DropdownMenuShortcut({ ...props }: React.ComponentProps<'span'>
 declare function DropdownMenuSub({ onOpenChange, ...props }: React.ComponentProps<typeof Menu.SubmenuRoot>): React.JSX.Element;
 declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
     inset?: boolean | undefined;
+    icon?: string | undefined;
 } & React.RefAttributes<HTMLElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & {
     children?: React.ReactNode;