@sebgroup/green-react 3.1.0 → 3.2.0

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useEffect, useMemo, useRef, useLayoutEffect, forwardRef, useCallback, useId } from 'react';
 import { randomId, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
 import { createComponent } from '@lit/react';
-import { getScopedTagName, GdsDatepicker, GdsDropdown, GdsOption, GdsContextMenu, GdsMenuItem } from '@sebgroup/green-core';
+import { getScopedTagName, GdsDatepicker, GdsContextMenu, GdsMenuItem, GdsMenuHeading, GdsDropdown, GdsOption } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import classNames from 'classnames';
 
@@ -2256,6 +2256,30 @@ $$a({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }
   }
 });
 
+registerTransitionalStyles();
+const ContextMenu = createComponent({
+  tagName: getScopedTagName('gds-context-menu'),
+  elementClass: GdsContextMenu,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click',
+    onUiStateChange: 'gds-ui-state'
+  },
+  react: React
+});
+const MenuItem = createComponent({
+  tagName: getScopedTagName('gds-menu-item'),
+  elementClass: GdsMenuItem,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click'
+  },
+  react: React
+});
+const CoreMenuHeading = createComponent({
+  tagName: getScopedTagName('gds-menu-heading'),
+  elementClass: GdsMenuHeading,
+  react: React
+});
+
 registerTransitionalStyles();
 const CoreDropdown = createComponent({
   tagName: getScopedTagName('gds-dropdown'),
@@ -2329,11 +2353,18 @@ const Dropdown = ({
         "aria-hidden": true
       }, {
         children: (texts === null || texts === void 0 ? void 0 : texts.placeholder) || 'Select'
-      })), options.map(option => jsx(CoreOption, Object.assign({
-        value: option[_useValue]
-      }, {
-        children: option[_display]
-      }), option[_useValue]))]
+      })), options.map(option => {
+        if (option.heading) {
+          return jsx(CoreMenuHeading, {
+            children: option[_display]
+          }, option.label);
+        }
+        return jsx(CoreOption, Object.assign({
+          value: option[_useValue]
+        }, {
+          children: option[_display]
+        }), option[_useValue]);
+      })]
     }))
   }));
 };
@@ -5218,25 +5249,6 @@ const Modal = _a => {
   });
 };
 
-registerTransitionalStyles();
-const ContextMenu = createComponent({
-  tagName: getScopedTagName('gds-context-menu'),
-  elementClass: GdsContextMenu,
-  events: {
-    onMenuItemClick: 'gds-menu-item-click',
-    onUiStateChange: 'gds-ui-state'
-  },
-  react: React
-});
-const MenuItem = createComponent({
-  tagName: getScopedTagName('gds-menu-item'),
-  elementClass: GdsMenuItem,
-  events: {
-    onMenuItemClick: 'gds-menu-item-click'
-  },
-  react: React
-});
-
 var SortDirection;
 (function (SortDirection) {
   SortDirection["ASC"] = "ASC";
@@ -6457,4 +6469,4 @@ const Table = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((_a, ref) =
   }));
 }));
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDatepicker, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, IconButton, InPageWizardStepCard, Input, Link, List$1 as List, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, SortDirection, Stepper, Tab, Table, TableBody, TableCell, TableContext, TableHeader, TableHeaderCell, TableRow, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList, filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols, useTableContext };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDatepicker, CoreDropdown, CoreMenuHeading, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, IconButton, InPageWizardStepCard, Input, Link, List$1 as List, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, SortDirection, Stepper, Tab, Table, TableBody, TableCell, TableContext, TableHeader, TableHeaderCell, TableRow, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList, filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols, useTableContext };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.5.0",
-    "@sebgroup/chlorophyll": "^3.0.2",
+    "@sebgroup/green-core": "^1.6.0",
+    "@sebgroup/chlorophyll": "^3.0.5",
     "@sebgroup/extract": "^3.0.0",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"

package/src/lib/context-menu/context-menu.d.ts

@@ -1,4 +1,4 @@
-import { GdsContextMenu, GdsMenuItem } from '@sebgroup/green-core';
+import { GdsContextMenu, GdsMenuItem, GdsMenuHeading } from '@sebgroup/green-core';
 export declare const ContextMenu: import("@lit/react").ReactWebComponent<GdsContextMenu, {
     onMenuItemClick: string;
     onUiStateChange: string;
@@ -6,3 +6,4 @@ export declare const ContextMenu: import("@lit/react").ReactWebComponent<GdsCont
 export declare const MenuItem: import("@lit/react").ReactWebComponent<GdsMenuItem, {
     onMenuItemClick: string;
 }>;
+export declare const CoreMenuHeading: import("@lit/react").ReactWebComponent<GdsMenuHeading, {}>;

package/src/lib/dropdown/dropdown.d.ts

@@ -38,6 +38,7 @@ export interface DropdownOption {
     label?: string;
     value?: any;
     selected?: boolean;
+    heading?: boolean;
     [key: string]: any;
 }
 export declare const CoreDropdown: import("@lit/react").ReactWebComponent<GdsDropdown<any>, {