@sebgroup/green-react 2.6.1 → 2.6.2

package/index.esm.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useEffect, useRef, useMemo, useLayoutEffect, forwardRef, useCallback } from 'react';
-import { randomId, createDatepicker, months, years, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
-import { getScopedTagName, GdsDropdown, GdsOption } from '@sebgroup/green-core';
+import { randomId, createDatepicker, months, years, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
+import { createComponent } from '@lit/react';
+import { getScopedTagName, GdsDropdown, GdsOption, GdsContextMenu, GdsMenuItem } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import classNames from 'classnames';
 
@@ -774,9 +775,9 @@ var iterators = {};
 var global$c = global$k;
 var isCallable$f = isCallable$l;
 
-var WeakMap$2 = global$c.WeakMap;
+var WeakMap$1 = global$c.WeakMap;
 
-var weakMapBasicDetection = isCallable$f(WeakMap$2) && /native code/.test(String(WeakMap$2));
+var weakMapBasicDetection = isCallable$f(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
 var createPropertyDescriptor$3 = function (bitmap, value) {
   return {
@@ -809,7 +810,7 @@ var hiddenKeys$1 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
 var TypeError$2 = global$b.TypeError;
-var WeakMap$1 = global$b.WeakMap;
+var WeakMap = global$b.WeakMap;
 var set$1, get, has;
 
 var enforce = function (it) {
@@ -826,7 +827,7 @@ var getterFor = function (TYPE) {
 };
 
 if (NATIVE_WEAK_MAP || shared.state) {
-  var store$1 = shared.state || (shared.state = new WeakMap$1());
+  var store$1 = shared.state || (shared.state = new WeakMap());
   /* eslint-disable no-self-assign -- prototype methods protection */
   store$1.get = store$1.get;
   store$1.has = store$1.has;
@@ -2226,15 +2227,8 @@ $$8({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }
   }
 });
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const e=new Set(["children","localName","ref","style","className"]),n=new WeakMap,t=(e,t,l,o,a)=>{const s=a?.[t];void 0===s||l===o?(e[t]=l,null==l&&t in HTMLElement.prototype&&e.removeAttribute(t)):((e,t,l)=>{let o=n.get(e);void 0===o&&n.set(e,o=new Map);let a=o.get(t);void 0!==l?void 0===a?(o.set(t,a={handleEvent:l}),e.addEventListener(t,a)):a.handleEvent=l:void 0!==a&&(o.delete(t),e.removeEventListener(t,a));})(e,s,l);},l=({react:n,tagName:l,elementClass:o,events:a,displayName:s})=>{const c=new Set(Object.keys(a??{})),i=n.forwardRef(((s,i)=>{const r=n.useRef(null),d=n.useRef(null),f={},u={};for(const[n,t]of Object.entries(s))e.has(n)?f["className"===n?"class":n]=t:c.has(n)||n in o.prototype?u[n]=t:f[n]=t;return n.useLayoutEffect((()=>{if(null!==d.current){for(const e in u)t(d.current,e,s[e],r.current?r.current[e]:void 0,a);r.current=s;}})),n.useLayoutEffect((()=>{d.current?.removeAttribute("defer-hydration");}),[]),f.suppressHydrationWarning=!0,n.createElement(l,{...f,ref:n.useCallback((e=>{d.current=e,"function"==typeof i?i(e):null!==i&&(i.current=e);}),[i])})}));return i.displayName=s??o.name,i};
-
 registerTransitionalStyles();
-const CoreDropdown = l({
+const CoreDropdown = createComponent({
   tagName: getScopedTagName('gds-dropdown'),
   elementClass: GdsDropdown,
   events: {
@@ -2242,7 +2236,7 @@ const CoreDropdown = l({
   },
   react: React
 });
-const CoreOption = l({
+const CoreOption = createComponent({
   tagName: getScopedTagName('gds-option'),
   elementClass: GdsOption,
   react: React
@@ -2855,17 +2849,17 @@ var classof$1 = classof$4;
 var getBuiltIn$2 = getBuiltIn$7;
 var inspectSource$1 = inspectSource$3;
 
-var noop$1 = function () { /* empty */ };
+var noop = function () { /* empty */ };
 var empty = [];
 var construct = getBuiltIn$2('Reflect', 'construct');
 var constructorRegExp = /^\s*(?:class|function)\b/;
 var exec$1 = uncurryThis$6(constructorRegExp.exec);
-var INCORRECT_TO_STRING = !constructorRegExp.test(noop$1);
+var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
 
 var isConstructorModern = function isConstructor(argument) {
   if (!isCallable$5(argument)) return false;
   try {
-    construct(noop$1, empty, argument);
+    construct(noop, empty, argument);
     return true;
   } catch (error) {
     return false;
@@ -4929,93 +4923,74 @@ function Slider({
   });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-const useStepper = ({
-  min,
-  max,
-  value: _value = 0,
-  step: _step = 1,
-  id: _id = randomId(),
-  onChange
-}) => {
-  const pStepper = {
-    down: noop,
-    setMax: noop,
-    setMin: noop,
-    setStep: noop,
-    setValue: noop,
-    up: noop
-  };
-  const [stepper, setStepper] = useState(pStepper);
-  const [data, setData] = useState({
-    id: _id,
-    value: _value,
-    min,
-    max,
-    step: _step
-  });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (max !== data.max) stepper.setMax(max);
-  }, [stepper, max]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (min !== data.min) stepper.setMin(min);
-  }, [stepper, min]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (_step !== data.step) stepper.setStep(_step || 1);
-  }, [stepper, _step]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (_value !== data.value) stepper.setValue(_value || 0, false);
-  }, [stepper, _value]);
-  useEffect(() => {
-    setStepper(createStepper({
-      id: _id,
-      value: _value,
-      min,
-      max,
-      step: _step,
-      onChange
-    }, setData));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return [stepper, data];
-};
-
 // TODO: Should be named "Numeric input" instead of stepper?
-function Stepper(_a) {
-  var {
-      label,
-      description,
-      statusMessage,
-      validator
-    } = _a,
-    stepperArgs = __rest(_a, ["label", "description", "statusMessage", "validator"]);
-  const [stepper, data] = useStepper(stepperArgs);
-  const onChangeEvent = e => {
-    stepper.setValue(e.target.valueAsNumber);
+function Stepper({
+  id,
+  label,
+  description,
+  statusMessage,
+  validator,
+  value = 0,
+  onChange = () => undefined,
+  min = Number.MIN_SAFE_INTEGER,
+  max = Number.MAX_SAFE_INTEGER,
+  step = 1
+}) {
+  const [localValue, setLocalValue] = useState(value);
+  const clamp = v => Math.max(min, Math.min(v, max));
+  const onChangeEvent = useCallback(e => {
+    if (isNaN(e.target.valueAsNumber)) return;
+    const value = clamp(e.target.valueAsNumber);
+    setLocalValue(value);
+    onChange(value);
+  }, [onChange]);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const down = () => {
+    if (localValue > min) {
+      const newValue = clamp(localValue - step);
+      setLocalValue(newValue);
+      onChange(newValue);
+    }
+  };
+  const up = () => {
+    if (localValue < max) {
+      const newValue = clamp(localValue + step);
+      setLocalValue(newValue);
+      onChange(newValue);
+    }
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      up();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      down();
+    }
   };
   const PrimitiveStepper = jsxs("div", Object.assign({
     className: `group group-border group-stepper ${validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`
   }, {
     children: [jsx("button", Object.assign({
-      onClick: () => stepper.down()
+      type: "button",
+      onClick: down
     }, {
       children: "-"
     })), jsx("input", {
-      id: data.id,
+      id: id,
       type: "number",
       onChange: onChangeEvent,
       onFocus: ({
         target
       }) => target.select(),
+      onKeyDown: handleKeyDown,
       placeholder: "0",
-      value: data.value
+      value: localValue
     }), jsx("button", Object.assign({
-      onClick: () => stepper.up()
+      type: "button",
+      onClick: up
     }, {
       children: "+"
     }))]
@@ -5025,7 +5000,7 @@ function Stepper(_a) {
     className: "form-group"
   }, {
     children: [label && jsx("label", Object.assign({
-      htmlFor: data.id
+      htmlFor: id
     }, {
       children: label
     })), description && jsx("span", Object.assign({
@@ -5314,4 +5289,23 @@ const Modal = _a => {
   });
 };
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Input, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, Stepper, Tab, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList };
+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
+});
+
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Input, Link, List$1 as List, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, Stepper, Tab, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
@@ -8,7 +8,8 @@
   "dependencies": {
     "@sebgroup/green-core": "^1.2.4",
     "@sebgroup/chlorophyll": "^2.3.0",
-    "@sebgroup/extract": "^2.1.1",
+    "@sebgroup/extract": "^2.1.2",
+    "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",

package/src/index.d.ts

@@ -16,5 +16,6 @@ export * from './lib/slider';
 export * from './lib/stepper/stepper';
 export * from './lib/tabs/tabs';
 export * from './lib/modal/modal';
+export * from './lib/context-menu/context-menu';
 export * from './types';
 export { AlertRibbon as Alert } from './lib/alert-ribbon/alert-ribbon';

package/src/lib/stepper/stepper.d.ts

@@ -1,9 +1,8 @@
-import { StepperArgs } from './hook';
-import { IValidator } from "@sebgroup/extract";
+import { IValidator, StepperArgs } from '@sebgroup/extract';
 export interface StepperProps extends StepperArgs {
     label?: string;
     description?: string;
     statusMessage?: string;
     validator?: IValidator;
 }
-export declare function Stepper({ label, description, statusMessage, validator, ...stepperArgs }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stepper({ id, label, description, statusMessage, validator, value, onChange, min, max, step, }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/stepper/hook.d.ts

@@ -1,3 +0,0 @@
-import { AbstractStepper, StepperArgs, StepperData } from '@sebgroup/extract';
-export { StepperArgs };
-export declare const useStepper: ({ min, max, value, step, id, onChange }: StepperArgs) => [AbstractStepper, StepperData];