@smg-automotive/components 25.11.0-dbojovic-vsst-4320-select-menu-migration.1 → 25.11.0-dbojovic-vsst-4320-select-menu-migration.2

package/dist/cjs/components/menu/index.d.ts

@@ -8,6 +8,7 @@ interface MenuItem {
 export interface MenuProps {
     title: string | ReactElement;
     items: MenuItem[];
+    value?: string;
     fontWeightTitle?: MenuTriggerProps['fontWeight'];
     offset?: [number, number];
     menuColor?: MenuTriggerProps['color'];
@@ -16,6 +17,7 @@ export interface MenuProps {
     icon?: ReactElement;
     iconSpacing?: MenuTriggerProps['gap'];
     placement?: Exclude<MenuRootProps['positioning'], undefined>['placement'];
+    showOptionsCheckmark?: boolean;
 }
 export declare const Menu: FC<MenuProps>;
 export {};

package/dist/cjs/components/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAGjB,MAAM,kBAAkB,CAAC;AAI1B,UAAU,QAAQ;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAgE9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAGL,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAGjB,MAAM,kBAAkB,CAAC;AAI1B,UAAU,QAAQ;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAC1E,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAyE9B,CAAC"}

package/dist/cjs/index.js

@@ -1573,6 +1573,8 @@ var content = react$1.defineStyle({
     },
 });
 var item = react$1.defineStyle({
+    display: 'flex',
+    gap: 'sm',
     paddingY: 'md',
     paddingX: 'lg',
     cursor: 'pointer',
@@ -7099,10 +7101,10 @@ var Chip = function (_a) {
 Chip.displayName = 'Chip';
 
 var Menu = function (_a) {
-    var title = _a.title, items = _a.items, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, menuOptionColor = _a.menuOptionColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement;
+    var title = _a.title, items = _a.items, value = _a.value, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, menuOptionColor = _a.menuOptionColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement, _f = _a.showOptionsCheckmark, showOptionsCheckmark = _f === void 0 ? false : _f;
     var recipe = react$1.useSlotRecipe({ key: 'menu' });
     var styles = recipe();
-    var _f = offset[0], mainAxis = _f === void 0 ? 0 : _f, _g = offset[1], crossAxis = _g === void 0 ? 0 : _g;
+    var _g = offset[0], mainAxis = _g === void 0 ? 0 : _g, _h = offset[1], crossAxis = _h === void 0 ? 0 : _h;
     return (React.createElement(react$1.Menu.Root, { positioning: { placement: placement, offset: { mainAxis: mainAxis, crossAxis: crossAxis } } },
         React.createElement(react$1.Menu.Context, null, function (_a) {
             var open = _a.open;
@@ -7116,8 +7118,11 @@ var Menu = function (_a) {
         React.createElement(react$1.Portal, null,
             React.createElement(react$1.Menu.Positioner, null,
                 React.createElement(react$1.Menu.Content, { css: styles.content }, items.map(function (_a) {
-                    var onClick = _a.onClick, text = _a.text, value = _a.value;
-                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: value, onSelect: onClick, css: styles.item }, (menuOptionColor && { color: menuOptionColor })), text));
+                    var onClick = _a.onClick, text = _a.text, itemValue = _a.value;
+                    var optionColor = menuOptionColor || menuColor;
+                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: itemValue, onSelect: onClick, css: styles.item }, (optionColor && { color: optionColor })),
+                        showOptionsCheckmark ? (React.createElement(react$1.Box, { w: "xs", display: "flex", justifyContent: "center" }, itemValue === value ? React.createElement(CheckmarkIcon, null) : null)) : null,
+                        text));
                 }))))));
 };