@sebgroup/green-react 3.21.0 → 3.23.0

package/index.js

@@ -306,7 +306,7 @@ export { Times } from './src/lib/icons/times.js';
 export { InfoCircle } from './src/lib/icons/infoCircle.js';
 export { Edit } from './src/lib/icons/edit.js';
 export { Breadcrumb, BreadcrumbItem } from './src/lib/breadcrumb/breadcrumb.js';
-export { CoreSegementedControl, CoreSegment, Segment, SegmentedControl } from './src/lib/segmented-control/segmented-control.js';
+export { GdsSegementedControl, GdsSegment, Segment, SegmentedControl } from './src/lib/segmented-control/segmented-control.js';
 import './_rollupPluginBabelHelpers.js';
 import 'react/jsx-runtime';
 import 'react';

package/package.json

@@ -2,14 +2,14 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.21.0",
+  "version": "3.23.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
     "@sebgroup/green-core": "^1.48.1",
-    "@sebgroup/chlorophyll": "^3.6.8",
+    "@sebgroup/chlorophyll": "^3.6.10",
     "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2",

package/src/core/dropdown/index.d.ts

@@ -1,5 +1,6 @@
 import { GdsDropdown } from "@sebgroup/green-core/components/dropdown/dropdown.js";
 declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsDropdown<any>, {
+    onInput: string;
     onChange: string;
     onGdsUiState: string;
     onGdsElementDisconnected: string;

package/src/core/dropdown/index.js

@@ -10,6 +10,7 @@ var reactWrapper = createComponent({
   elementClass: GdsDropdown,
   react: React,
   events: {
+    onInput: "input",
     onChange: "change",
     onGdsUiState: "gds-ui-state",
     onGdsElementDisconnected: "gds-element-disconnected"

package/src/core/input/index.d.ts

@@ -1,5 +1,6 @@
 import { GdsInput } from "@sebgroup/green-core/components/input/input.js";
 declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsInput, {
+    onGdsInputCleared: string;
     onGdsElementDisconnected: string;
 }>;
 export default reactWrapper;

package/src/core/input/index.js

@@ -10,6 +10,7 @@ var reactWrapper = createComponent({
   elementClass: GdsInput,
   react: React,
   events: {
+    onGdsInputCleared: "gds-input-cleared",
     onGdsElementDisconnected: "gds-element-disconnected"
   },
   displayName: "GdsInput"

package/src/core/textarea/index.d.ts

@@ -1,5 +1,6 @@
 import { GdsTextarea } from "@sebgroup/green-core/components/textarea/textarea.js";
 declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsTextarea, {
+    onGdsInputCleared: string;
     onGdsElementDisconnected: string;
 }>;
 export default reactWrapper;

package/src/core/textarea/index.js

@@ -10,6 +10,7 @@ var reactWrapper = createComponent({
   elementClass: GdsTextarea,
   react: React,
   events: {
+    onGdsInputCleared: "gds-input-cleared",
     onGdsElementDisconnected: "gds-element-disconnected"
   },
   displayName: "GdsTextarea"

package/src/index.js

@@ -306,7 +306,7 @@ export { Times } from './lib/icons/times.js';
 export { InfoCircle } from './lib/icons/infoCircle.js';
 export { Edit } from './lib/icons/edit.js';
 export { Breadcrumb, BreadcrumbItem } from './lib/breadcrumb/breadcrumb.js';
-export { CoreSegementedControl, CoreSegment, Segment, SegmentedControl } from './lib/segmented-control/segmented-control.js';
+export { GdsSegementedControl, GdsSegment, Segment, SegmentedControl } from './lib/segmented-control/segmented-control.js';
 import '../_rollupPluginBabelHelpers.js';
 import 'react/jsx-runtime';
 import 'react';

package/src/lib/datepicker/datepicker.js

@@ -25,9 +25,10 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     showWeeks = _a.showWeeks,
     testId = _a.testId,
     validator = _a.validator,
+    size = _a.size,
     selectedDate = _a.selectedDate,
     currentDate = _a.currentDate,
-    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "validator", "selectedDate", "currentDate"]);
+    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "validator", "size", "selectedDate", "currentDate"]);
   if (currentDate && !value) value = currentDate;
   if (selectedDate && !value) value = selectedDate;
   var min = minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
@@ -56,7 +57,8 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       showWeekNumbers: showWeeks,
       onchange: onChangeHandler,
       value: value,
-      ref: _ref
+      ref: _ref,
+      size: size === 'small' ? 'small' : 'large'
     }, props))
   });
 });

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

@@ -58,6 +58,7 @@ export declare const CoreDropdown: import("@lit/react").ReactWebComponent<GdsDro
 export declare const CoreOption: import("@lit/react").ReactWebComponent<GdsOption, {}>;
 export interface DropdownProps extends DropdownArgs {
     onChange?: OnChange;
+    required?: boolean;
 }
-export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, syncPopoverWidth, disableMobileStyles, onGdsUiState, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, syncPopoverWidth, disableMobileStyles, onGdsUiState, required, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/src/lib/dropdown/dropdown.js

@@ -43,7 +43,8 @@ var Dropdown = function Dropdown(_a) {
     syncPopoverWidth = _a.syncPopoverWidth,
     disableMobileStyles = _a.disableMobileStyles,
     _onGdsUiState = _a.onGdsUiState,
-    props = __rest(_a, ["compareWith", "display", "id", "informationLabel", "label", "multiSelect", "onChange", "options", "searchFilter", "searchable", "texts", "useValue", "validator", "value", "syncPopoverWidth", "disableMobileStyles", "onGdsUiState"]);
+    required = _a.required,
+    props = __rest(_a, ["compareWith", "display", "id", "informationLabel", "label", "multiSelect", "onChange", "options", "searchFilter", "searchable", "texts", "useValue", "validator", "value", "syncPopoverWidth", "disableMobileStyles", "onGdsUiState", "required"]);
   var handleOnChange = function handleOnChange(e) {
     if ('value' in e.detail) {
       onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
@@ -78,6 +79,7 @@ var Dropdown = function Dropdown(_a) {
       hideLabel: props.hideLabel,
       maxHeight: props.maxHeight,
       disableMobileStyles: disableMobileStyles,
+      required: required,
       onGdsUiState: function onGdsUiState(e) {
         return _onGdsUiState === null || _onGdsUiState === void 0 ? void 0 : _onGdsUiState(e);
       },

package/src/lib/form/useInput.d.ts

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, RefObject } from 'react';
-declare const useInput: (props: InputHTMLAttributes<HTMLInputElement>, onChanges?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined, onChangeInput?: ((value: string) => string) | undefined) => React.InputHTMLAttributes<HTMLInputElement> & {
+declare const useInput: (props: InputHTMLAttributes<HTMLInputElement>, onChanges?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChangeInput?: (value: string) => string) => InputHTMLAttributes<HTMLInputElement> & {
     ref: RefObject<HTMLInputElement>;
 };
 export default useInput;

package/src/lib/segmented-control/index.js

@@ -1,4 +1,4 @@
-export { CoreSegementedControl, CoreSegment, Segment, SegmentedControl } from './segmented-control.js';
+export { GdsSegementedControl, GdsSegment, Segment, SegmentedControl } from './segmented-control.js';
 import '../../../_tslib.js';
 import 'react/jsx-runtime';
 import 'react';

package/src/lib/segmented-control/segmented-control.d.ts

@@ -1,13 +1,12 @@
 import React, { ReactNode } from 'react';
-import { GdsSegmentedControl } from '@sebgroup/green-core/components/segmented-control/index.js';
-import { GdsSegment } from '@sebgroup/green-core/components/segmented-control/segment/index.js';
-export declare const CoreSegementedControl: import("@lit/react").ReactWebComponent<GdsSegmentedControl<any>, {
+import { GdsSegmentedControl as CoreSegmentedControl } from '@sebgroup/green-core/components/segmented-control/index.js';
+import { GdsSegment as CoreSegment } from '@sebgroup/green-core/components/segmented-control/segment/index.js';
+export declare const GdsSegementedControl: import("@lit/react").ReactWebComponent<CoreSegmentedControl<any>, {
     onchange: string;
 }>;
-export declare const CoreSegment: import("@lit/react").ReactWebComponent<GdsSegment<any>, {}>;
+export declare const GdsSegment: import("@lit/react").ReactWebComponent<CoreSegment<any>, {}>;
 export interface SegmentedControlProps {
     value?: string;
-    segMinWidth?: number;
     size?: 'small' | 'medium';
     onChange?: (event: Event) => void;
     className?: string;
@@ -18,7 +17,13 @@ export interface SegmentProps {
     className?: string;
     disabled?: boolean;
     children?: ReactNode | ReactNode[];
+    width?: string;
+    'min-Width'?: string;
+    'max-Width'?: string;
+    /** @deprecated */
+    segMinWidth?: number;
 }
-declare const SegmentedControl: React.FC<SegmentedControlProps>;
-declare const Segment: React.FC<SegmentProps>;
-export { SegmentedControl, Segment };
+/** @deprecated - Use `GdsSegmentedControl` instead */
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;
+/** @deprecated - Use `GdsSegmented` instead */
+export declare const Segment: React.FC<SegmentProps>;

package/src/lib/segmented-control/segmented-control.js

@@ -4,12 +4,12 @@ import React__default from 'react';
 import { createComponent } from '@lit/react';
 import classNames from 'classnames';
 import { GdsSegmentedControl } from '@sebgroup/green-core/components/segmented-control/index.js';
-import { GdsSegment } from '@sebgroup/green-core/components/segmented-control/segment/index.js';
+import { GdsSegment as GdsSegment$1 } from '@sebgroup/green-core/components/segmented-control/segment/index.js';
 import { getScopedTagName } from '@sebgroup/green-core/scoping';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 
 registerTransitionalStyles();
-var CoreSegementedControl = createComponent({
+var GdsSegementedControl = createComponent({
   tagName: getScopedTagName('gds-segmented-control'),
   elementClass: GdsSegmentedControl,
   events: {
@@ -17,26 +17,31 @@ var CoreSegementedControl = createComponent({
   },
   react: React__default
 });
-var CoreSegment = createComponent({
+var GdsSegment = createComponent({
   tagName: getScopedTagName('gds-segment'),
-  elementClass: GdsSegment,
+  elementClass: GdsSegment$1,
   react: React__default
 });
+/** @deprecated - Use `GdsSegmentedControl` instead */
 var SegmentedControl = function SegmentedControl(_a) {
   var onChange = _a.onChange,
     className = _a.className,
     props = __rest(_a, ["onChange", "className"]);
-  return jsx(CoreSegementedControl, Object.assign({
+  return jsx(GdsSegementedControl, Object.assign({
     onchange: onChange,
     className: classNames(className)
   }, props));
 };
+/** @deprecated - Use `GdsSegmented` instead */
 var Segment = function Segment(_a) {
+  var _b;
   var className = _a.className,
     props = __rest(_a, ["className"]);
-  return jsx(CoreSegment, Object.assign({
+  return jsx(GdsSegment, Object.assign({
     className: classNames(className)
-  }, props));
+  }, props, {
+    "min-width": props['min-Width'] || ((_b = props.segMinWidth) === null || _b === void 0 ? void 0 : _b.toString())
+  }));
 };
 
-export { CoreSegementedControl, CoreSegment, Segment, SegmentedControl };
+export { GdsSegementedControl, GdsSegment, Segment, SegmentedControl };