@smg-automotive/components 25.10.0-gallery-header-v3-migrate.1 → 25.10.0-talamcol-menu.1

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

@@ -18,7 +18,6 @@ export * from './energyLabel';
 export * from './errorPage';
 export * from './flex';
 export * from './fullHeight';
-export * from './galleryHeader';
 export * from './grid';
 export * from './heading';
 export * from './icons';
@@ -27,6 +26,7 @@ export * from './layout';
 export * from './link';
 export * from './list';
 export * from './chip';
+export * from './menu';
 export * from './missingImage';
 export * from './mobileOnlyAccordion';
 export * from './navigation/footer';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

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

@@ -0,0 +1,21 @@
+import { FC, JSX, ReactElement } from 'react';
+import { MenuRootProps, MenuTriggerProps } from '@chakra-ui/react';
+interface MenuItem {
+    text: JSX.Element | string;
+    value: string;
+    onClick: () => void;
+}
+export interface MenuProps {
+    title: string | ReactElement;
+    items: MenuItem[];
+    fontWeightTitle?: MenuTriggerProps['fontWeight'];
+    offset?: [number, number];
+    menuColor?: MenuTriggerProps['color'];
+    showChevron?: boolean;
+    icon?: ReactElement;
+    iconSpacing?: MenuTriggerProps['gap'];
+    placement?: Exclude<MenuRootProps['positioning'], undefined>['placement'];
+}
+export declare const Menu: FC<MenuProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,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,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,CA0D9B,CAAC"}

package/dist/cjs/index.js

@@ -1383,6 +1383,66 @@ var numberInputRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var maximumScrollbarWidth = 20;
+var content = react$1.defineStyle({
+    '--max-width': "calc(100vw - ".concat(maximumScrollbarWidth, "px)"),
+    bg: 'white',
+    boxShadow: 'sm',
+    color: 'inherit',
+    minW: '4xl',
+    maxW: 'var(--max-width)',
+    py: 'xxs',
+    zIndex: 'dropdown',
+    borderRadius: 'sm',
+    border: '1px',
+    borderColor: 'gray.200',
+    cursor: 'pointer',
+    _focusVisible: {
+        outline: 'none',
+    },
+});
+var item = react$1.defineStyle({
+    paddingY: 'md',
+    paddingX: 'lg',
+    cursor: 'pointer',
+    _focus: {
+        bg: 'gray.100',
+    },
+    _focusVisible: {
+        outline: 'none',
+    },
+    _active: {
+        bg: 'blue.100',
+    },
+    _expanded: {
+        bg: 'gray.100',
+    },
+    _hover: {
+        bg: 'gray.100',
+    },
+    _disabled: {
+        opacity: '40',
+        cursor: 'notAllowed',
+    },
+});
+var trigger = react$1.defineStyle({
+    display: 'inline-flex',
+    padding: '0',
+    cursor: 'pointer',
+    _focusVisible: {
+        outline: 'none',
+    },
+});
+var menuRecipe = react$1.defineSlotRecipe({
+    slots: ['content', 'item', 'trigger'],
+    className: 'chakra-menu',
+    base: {
+        content: content,
+        item: item,
+        trigger: trigger,
+    },
+});
+
 var markedTextRecipe = react$1.defineSlotRecipe({
     className: 'chakra-marked-text',
     slots: ['container', 'text', 'mark'],
@@ -1470,56 +1530,6 @@ var listRecipe = react$1.defineSlotRecipe({
     },
 });
 
-var baseStyleContainer = react$1.defineStyle({
-    color: 'white',
-    px: '2xl',
-    py: 'lg',
-    position: {
-        base: 'fixed',
-        md: 'static',
-    },
-    top: '0',
-    left: '0',
-    right: '0',
-    zIndex: 'docked',
-});
-var baseStyleGrid = react$1.defineStyle({
-    alignItems: 'center',
-});
-var baseStyleChildrenContainer = react$1.defineStyle({
-// This will be shown only above md breakpoint
-});
-var baseStyleCountContainer = react$1.defineStyle({
-    textAlign: {
-        base: 'left',
-        md: 'center',
-    },
-});
-var baseStyleCloseContainer = react$1.defineStyle({
-    textAlign: 'right',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-});
-var slots$1 = [
-    'container',
-    'grid',
-    'childrenContainer',
-    'countContainer',
-    'closeContainer',
-];
-var galleryHeaderRecipe = react$1.defineSlotRecipe({
-    slots: slots$1,
-    className: 'chakra-gallery-header',
-    base: {
-        container: baseStyleContainer,
-        grid: baseStyleGrid,
-        childrenContainer: baseStyleChildrenContainer,
-        countContainer: baseStyleCountContainer,
-        closeContainer: baseStyleCloseContainer,
-    },
-});
-
 var fieldSlotRecipe = react$1.defineSlotRecipe({
     className: 'chakra-field',
     slots: [
@@ -2246,7 +2256,6 @@ var slotRecipes = {
     breadcrumbs: breadcrumbsRecipe,
     card: cardRecipe,
     energyLabel: energyLabelRecipe,
-    galleryHeader: galleryHeaderRecipe,
     list: listRecipe,
     markedText: markedTextRecipe,
     dialog: dialogRecipe,
@@ -2266,6 +2275,7 @@ var slotRecipes = {
     numberInput: numberInputRecipe,
     radio: radioRecipe,
     pagination: paginationRecipe,
+    menu: menuRecipe,
 };
 
 var textareaRecipe = react$1.defineRecipe({
@@ -6332,36 +6342,6 @@ var FullHeight = function (_a) {
     return (React.createElement(react$1.Box, { minHeight: "screen-height", height: "screen-height" }, children));
 };
 
-var Link$1 = function (_a) {
-    var isExternal = _a.isExternal, target = _a.target, rel = _a.rel, props = __rest(_a, ["isExternal", "target", "rel"]);
-    return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
-};
-
-var GalleryHeader = function (_a) {
-    var currentSlide = _a.currentSlide, slidesCount = _a.slidesCount, onClose = _a.onClose, language = _a.language, children = _a.children;
-    var recipe = react$1.useSlotRecipe({ key: 'galleryHeader' });
-    var styles = recipe();
-    return (React.createElement(TranslationProvider, { language: language, scopes: ['galleryHeader'] },
-        React.createElement(i18nPkg.I18nContext.Consumer, null, function (_a) {
-            var t = _a.t;
-            return (React.createElement(react$1.Box, { css: styles.container },
-                React.createElement(react$1.Box, { css: styles.grid },
-                    React.createElement(SimpleGrid, { columns: {
-                            base: 2,
-                            md: 3,
-                        }, alignItems: "center" },
-                        React.createElement(react$1.Box, { hideBelow: "md", css: styles.childrenContainer }, children),
-                        React.createElement(react$1.Box, { css: styles.countContainer },
-                            React.createElement(react$1.Box, null, t('galleryHeader.imageCount', {
-                                x: currentSlide,
-                                of: slidesCount,
-                            }))),
-                        React.createElement(react$1.Box, { css: styles.closeContainer },
-                            React.createElement(Link$1, { "aria-label": "Close gallery", onClick: function () { return onClose(); } },
-                                React.createElement(CloseIcon, { color: "white" })))))));
-        })));
-};
-
 var Grid = react$1.Grid;
 Grid.displayName = 'Grid';
 var GridItem = react$1.GridItem;
@@ -6472,6 +6452,11 @@ var SingleColumnCenteredLayout = function (_a) {
             React.createElement(react$1.Box, null, content))));
 };
 
+var Link$1 = function (_a) {
+    var isExternal = _a.isExternal, target = _a.target, rel = _a.rel, props = __rest(_a, ["isExternal", "target", "rel"]);
+    return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
+};
+
 var isRenderable = function (value) {
     return (typeof value === 'string' ||
         typeof value === 'number' ||
@@ -6565,6 +6550,27 @@ 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, _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 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;
+    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;
+            return (React.createElement(react$1.Menu.Trigger, { css: styles.trigger, gap: iconSpacing, fontWeight: fontWeightTitle, color: open ? 'blue.700' : menuColor },
+                icon,
+                title,
+                showChevron ? (React.createElement(ChevronDownSmallIcon, { transition: "transform", transform: open ? 'rotate(180deg)' : 'rotate(0deg)' })) : null));
+        }),
+        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 }, (menuColor && { color: menuColor })), text));
+                }))))));
+};
+
 var MobileOnlyAccordion = function (props) {
     var children = props.children, restProps = __rest(props, ["children"]);
     return React.createElement(Accordion, __assign({}, restProps), children);
@@ -8021,7 +8027,6 @@ exports.Footer = Footer$1;
 exports.FormControlSection = FormControlSection;
 exports.ForwardIcon = ForwardIcon;
 exports.FullHeight = FullHeight;
-exports.GalleryHeader = GalleryHeader;
 exports.GarageIcon = GarageIcon;
 exports.GasStationIcon = GasStationIcon;
 exports.GlobeIcon = GlobeIcon;
@@ -8061,6 +8066,7 @@ exports.LogoutIcon = LogoutIcon;
 exports.MagnifierIcon = MagnifierIcon;
 exports.MagnifierLargeIcon = MagnifierLargeIcon;
 exports.MarkedText = MarkedText;
+exports.Menu = Menu;
 exports.MessageIcon = MessageIcon;
 exports.MiniVanIcon = MiniVanIcon;
 exports.MinusIcon = MinusIcon;