@laser-ui/components 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.3.0](https://github.com/laser-ui/laser-ui/compare/v2.2.0...v2.3.0) (2025-08-07)
+
+### Features
+
+- **components:** dropdown support theme ([1b45410](https://github.com/laser-ui/laser-ui/commit/1b454104bffd7e1b2b473fe9254afe95ed3d432e))
+
 # [2.2.0](https://github.com/laser-ui/laser-ui/compare/v2.1.3...v2.2.0) (2025-06-23)
 
 ### Bug Fixes

package/dropdown/internal/DropdownList.js

@@ -29,7 +29,7 @@ export function DropdownList(props) {
                 vsRef.current = null;
             };
         }, enable: virtual !== false, listSize: 200 + 32 * 2, listPadding: 4, itemRender: (item, index, props, ancestry, childrenNode) => {
-            const { id: itemId, title: itemTitle, type: itemType, icon: itemIcon, disabled: itemDisabled = false, separator: itemSeparator, children, } = item;
+            const { id: itemId, title: itemTitle, type: itemType, icon: itemIcon, theme: itemTheme, disabled: itemDisabled = false, separator: itemSeparator, children, } = item;
             const id = getItemId(itemId);
             const isFocus = itemId === focusId;
             const popupState = popupIds.find((v) => v.id === itemId);
@@ -129,6 +129,7 @@ export function DropdownList(props) {
                 };
             }
             return (_jsxs(Fragment, { children: [itemSeparator && _jsx(Separator, { style: { margin: '2px 0' } }), itemType === 'item' ? (_jsxs("li", Object.assign({}, styled('dropdown__item', 'dropdown__item--item', {
+                        [`dropdown__item.t-${itemTheme}`]: !itemDisabled && itemTheme,
                         'dropdown__item.is-disabled': itemDisabled,
                     }), { id: id, role: "menuitem", "aria-disabled": itemDisabled, onClick: handleItemClick, children: [focusVisible && isFocus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(itemIcon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: itemIcon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: itemTitle }))] }))) : itemType === 'group' ? (_jsxs(_Fragment, { children: [_jsx("li", Object.assign({}, styled('dropdown__group-title'), { id: id, role: "presentation", children: itemTitle })), _jsx("ul", Object.assign({}, mergeCS(styled('dropdown__group-list'), {
                                 style: {
@@ -152,7 +153,7 @@ export function DropdownList(props) {
                             return () => {
                                 updateSubPosition.current.delete(itemId);
                             };
-                        }, namespace: namespace, styled: styled, id: id, icon: itemIcon, list: _jsx(DropdownList, { namespace: namespace, styled: styled, ulProps: { 'aria-labelledby': id }, list: (children !== null && children !== void 0 ? children : []), ancestryOfSub: currentAncestryOfSub, virtual: virtual, focusVisible: focusVisible, focusId: focusId, popupIds: popupIds, updateSubPosition: updateSubPosition, trigger: trigger, zIndex: zIndex, handleKeyDown: handleKeyDown, getItemId: getItemId, onClick: onClick, onFocusIdsChange: onFocusIdsChange, onPopupIdsChange: onPopupIdsChange, addPopupId: addPopupId, removePopupId: removePopupId, onVisibleChange: onVisibleChange }), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
+                        }, namespace: namespace, styled: styled, id: id, icon: itemIcon, theme: itemTheme, list: _jsx(DropdownList, { namespace: namespace, styled: styled, ulProps: { 'aria-labelledby': id }, list: (children !== null && children !== void 0 ? children : []), ancestryOfSub: currentAncestryOfSub, virtual: virtual, focusVisible: focusVisible, focusId: focusId, popupIds: popupIds, updateSubPosition: updateSubPosition, trigger: trigger, zIndex: zIndex, handleKeyDown: handleKeyDown, getItemId: getItemId, onClick: onClick, onFocusIdsChange: onFocusIdsChange, onPopupIdsChange: onPopupIdsChange, addPopupId: addPopupId, removePopupId: removePopupId, onVisibleChange: onVisibleChange }), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
                             ? zIndex
                             : isNumber(zIndex)
                                 ? zIndex + 1 + ancestryOfSub.length

package/dropdown/internal/DropdownSub.d.ts

@@ -8,6 +8,7 @@ interface DropdownSubProps {
     styled: Styled<typeof CLASSES>;
     id: string;
     icon: React.ReactNode | undefined;
+    theme: 'primary' | 'success' | 'warning' | 'danger' | undefined;
     list: React.ReactNode;
     popupState: boolean | undefined;
     trigger: 'hover' | 'click';

package/dropdown/internal/DropdownSub.js

@@ -11,7 +11,7 @@ import { Transition } from '../../transition';
 import { getHorizontalSidePosition, mergeCS } from '../../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
 export function DropdownSub(props) {
-    const { ref, children, namespace, styled, id, icon, list, popupState, trigger, focus, disabled, zIndex, onVisibleChange } = props;
+    const { ref, children, namespace, styled, id, icon, theme, list, popupState, trigger, focus, disabled, zIndex, onVisibleChange } = props;
     const triggerRef = useRef(null);
     const popupRef = useRef(null);
     const visible = !isUndefined(popupState);
@@ -34,6 +34,7 @@ export function DropdownSub(props) {
             popupRef,
             scroll: false,
         }, onVisibleChange: onVisibleChange, children: (popupProps) => (_jsxs(_Fragment, { children: [_jsxs("li", Object.assign({}, styled('dropdown__item', 'dropdown__item--sub', {
+                    [`dropdown__item.t-${theme}`]: !disabled && theme,
                     'dropdown__item.is-expand': visible,
                     'dropdown__item.is-disabled': disabled,
                 }), { ref: (instance) => {

package/dropdown/types.d.ts

@@ -10,6 +10,7 @@ export interface DropdownItem<ID extends React.Key> {
     title: React.ReactNode;
     type: 'item' | 'group' | 'sub';
     icon?: React.ReactNode;
+    theme?: 'primary' | 'success' | 'warning' | 'danger';
     disabled?: boolean;
     separator?: boolean;
     children?: DropdownItem<ID>[];

package/dropdown/vars.d.ts

@@ -7,6 +7,10 @@ export declare const CLASSES: {
     'dropdown--bottom-left': string;
     'dropdown--bottom-right': string;
     dropdown__item: string;
+    'dropdown__item.t-primary': string;
+    'dropdown__item.t-success': string;
+    'dropdown__item.t-warning': string;
+    'dropdown__item.t-danger': string;
     'dropdown__item--item': string;
     'dropdown__item--sub': string;
     'dropdown__item.is-expand': string;
@@ -15,6 +19,10 @@ export declare const CLASSES: {
     'dropdown__item-content': string;
     'dropdown__group-list': string;
     'dropdown__group-title': string;
+    'dropdown__group-title.t-primary': string;
+    'dropdown__group-title.t-success': string;
+    'dropdown__group-title.t-warning': string;
+    'dropdown__group-title.t-danger': string;
     'dropdown__sub-arrow': string;
     dropdown__list: string;
     dropdown__empty: string;

package/dropdown/vars.js

@@ -7,6 +7,10 @@ export const CLASSES = {
     'dropdown--bottom-left': '^dropdown--bottom-left',
     'dropdown--bottom-right': '^dropdown--bottom-right',
     dropdown__item: '^dropdown__item',
+    'dropdown__item.t-primary': 't-primary',
+    'dropdown__item.t-success': 't-success',
+    'dropdown__item.t-warning': 't-warning',
+    'dropdown__item.t-danger': 't-danger',
     'dropdown__item--item': '^dropdown__item--item',
     'dropdown__item--sub': '^dropdown__item--sub',
     'dropdown__item.is-expand': 'is-expand',
@@ -15,6 +19,10 @@ export const CLASSES = {
     'dropdown__item-content': '^dropdown__item-content',
     'dropdown__group-list': '^dropdown__group-list',
     'dropdown__group-title': '^dropdown__group-title',
+    'dropdown__group-title.t-primary': 't-primary',
+    'dropdown__group-title.t-success': 't-success',
+    'dropdown__group-title.t-warning': 't-warning',
+    'dropdown__group-title.t-danger': 't-danger',
     'dropdown__sub-arrow': '^dropdown__sub-arrow',
     dropdown__list: '^dropdown__list',
     dropdown__empty: '^dropdown__empty',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -37,5 +37,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "be091d302eaa1c5a3fa73cebbcdab245ec8b1e1f"
+  "gitHead": "aff4c4046d630e70c12a57491faed6d84cd21a77"
 }