@seij/common-ui 0.1.10 → 0.1.11

package/dist/lib/select/InputCombobox.d.ts

@@ -27,6 +27,10 @@ export interface InputComboboxProps<T> {
      * The function to call when the user selects an option from the dropdown.
      */
     onValueChange: (value: string) => void;
+    /**
+     * Called when the user presses Enter inside the combobox input.
+     */
+    onEnter?: () => void;
 }
 /**
  * A text input combobox with a dropdown list of options.
@@ -40,10 +44,11 @@ export interface InputComboboxProps<T> {
  *   noOptionsMessage="No options found"
  *   onValueChangeQuery={(value) => setSearchQuery(value)}
  *   onValueChange={(value) => setSelectedOption(value)}
+ *   onEnter={()=>{}}
  * />
  */
 export declare function InputCombobox<T extends {
     code: string;
     label: string;
-}>({ searchQuery, placeholder, disabled, options, noOptionsMessage, onValueChangeQuery, onValueChange, }: InputComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ searchQuery, placeholder, disabled, options, noOptionsMessage, onValueChangeQuery, onValueChange, onEnter, }: InputComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InputCombobox.d.ts.map

package/dist/lib/select/InputCombobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputCombobox.d.ts","sourceRoot":"","sources":["../../../src/lib/select/InputCombobox.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AACD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACvE,WAAW,EACX,WAAW,EACX,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,GACd,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CA4BvB"}
+{"version":3,"file":"InputCombobox.d.ts","sourceRoot":"","sources":["../../../src/lib/select/InputCombobox.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACvE,WAAW,EACX,WAAW,EACX,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,OAAO,GACR,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CA4CvB"}

package/dist/lib/select/InputCombobox.js

@@ -1,32 +1,40 @@
-import { jsx as s } from "react/jsx-runtime";
-import { Combobox as c, useComboboxFilter as a } from "@fluentui/react-components";
-import { useI18n as x } from "../i18n/i18n.react.js";
-function C({
-  searchQuery: e,
+import { jsx as f } from "react/jsx-runtime";
+import { Combobox as x, useComboboxFilter as C } from "@fluentui/react-components";
+import { useState as d } from "react";
+import "../i18n/i18n.service.js";
+import { useI18n as h } from "../i18n/i18n.react.js";
+function w({
+  searchQuery: t,
   placeholder: r,
   disabled: l,
-  options: i,
+  options: s,
   noOptionsMessage: p,
-  onValueChangeQuery: t,
-  onValueChange: m
+  onValueChangeQuery: e,
+  onValueChange: m,
+  onEnter: a
 }) {
-  const { t: u } = x(), b = u("InputCombobox_noresult");
-  return /* @__PURE__ */ s(
-    c,
+  const { t: u } = h(), [c, n] = d(!1), b = u("InputCombobox_noresult");
+  return /* @__PURE__ */ f(
+    x,
     {
       style: { width: "100%" },
-      value: e,
-      onOptionSelect: (o, n) => {
-        t(n.optionText ?? ""), m(n.optionValue ?? "");
+      value: t,
+      onOptionSelect: (o, i) => {
+        e(i.optionText ?? ""), m(i.optionValue ?? "");
+      },
+      onChange: (o) => e(o.target.value),
+      onCompositionStart: () => n(!0),
+      onCompositionEnd: () => n(!1),
+      onKeyDown: (o) => {
+        o.key === "Enter" && !c && a?.();
       },
-      onChange: (o) => t(o.target.value),
       clearable: !0,
       placeholder: r,
       disabled: l,
       freeform: !0,
-      children: a(
-        e,
-        i.map((o) => ({ children: o.label, value: o.code })),
+      children: C(
+        t,
+        s.map((o) => ({ children: o.label, value: o.code })),
         {
           optionToReactKey: (o) => o.value,
           optionToText: (o) => o.children,
@@ -37,6 +45,6 @@ function C({
   );
 }
 export {
-  C as InputCombobox
+  w as InputCombobox
 };
 //# sourceMappingURL=InputCombobox.js.map

package/dist/lib/select/InputCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCombobox.js","sources":["../../../src/lib/select/InputCombobox.tsx"],"sourcesContent":["import { Combobox, useComboboxFilter } from \"@fluentui/react-components\";\nimport { useI18n } from \"../i18n/i18n.react\";\nexport interface InputComboboxProps<T> {\n  /**\n   * The value of the text input.\n   */\n  searchQuery: string;\n  /**\n   * The placeholder text to display when the input is empty.\n   */\n  placeholder: string;\n  /**\n   * Indicates whether the input is disabled.\n   */\n  disabled: boolean;\n  /**\n   * The list of options to display in the dropdown.\n   */\n  options: T[];\n  /**\n   * The message to display when no option is found.\n   */\n  noOptionsMessage?: string;\n  /**\n   * The function to call when the input value changes.\n   */\n  onValueChangeQuery: (value: string) => void;\n  /**\n   * The function to call when the user selects an option from the dropdown.\n   */\n  onValueChange: (value: string) => void;\n}\n/**\n * A text input combobox with a dropdown list of options.\n * @returns A textbox component with a dropdown list of options.\n * @example\n * <InputCombobox\n *   searchQuery={searchQuery}\n *   placeholder=\"Select an option\"\n *   disabled={false}\n *   options={[{ code: \"1\", label: \"Option 1\" }, { code: \"2\", label: \"Option 2\" }]}\n *   noOptionsMessage=\"No options found\"\n *   onValueChangeQuery={(value) => setSearchQuery(value)}\n *   onValueChange={(value) => setSelectedOption(value)}\n * />\n */\nexport function InputCombobox<T extends { code: string; label: string }>({\n  searchQuery,\n  placeholder,\n  disabled,\n  options,\n  noOptionsMessage,\n  onValueChangeQuery,\n  onValueChange,\n}: InputComboboxProps<T>) {\n  const { t } = useI18n();\n  const noresult = t(\"InputCombobox_noresult\");\n  return (\n    <Combobox\n      style={{ width: \"100%\" }}\n      value={searchQuery}\n      onOptionSelect={(event, data) => {\n        onValueChangeQuery(data.optionText ?? \"\");\n        onValueChange(data.optionValue ?? \"\");\n      }}\n      onChange={(ev) => onValueChangeQuery(ev.target.value)}\n      clearable\n      placeholder={placeholder}\n      disabled={disabled}\n      freeform={true}\n    >\n      {useComboboxFilter(\n        searchQuery,\n        options.map((o) => ({ children: o.label, value: o.code })),\n        {\n          optionToReactKey: (option) => option.value,\n          optionToText: (option) => option.children,\n          noOptionsMessage: noOptionsMessage ?? noresult,\n        },\n      )}\n    </Combobox>\n  );\n}\n"],"names":["InputCombobox","searchQuery","placeholder","disabled","options","noOptionsMessage","onValueChangeQuery","onValueChange","t","useI18n","noresult","jsx","Combobox","event","data","ev","useComboboxFilter","option"],"mappings":";;;AA8CO,SAASA,EAAyD;AAAA,EACvE,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AACF,GAA0B;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAWF,EAAE,wBAAwB;AAC3C,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAO,OAAA;AAAA,MAChB,OAAOX;AAAA,MACP,gBAAgB,CAACY,GAAOC,MAAS;AAC/B,QAAAR,EAAmBQ,EAAK,cAAc,EAAE,GACxCP,EAAcO,EAAK,eAAe,EAAE;AAAA,MACtC;AAAA,MACA,UAAU,CAACC,MAAOT,EAAmBS,EAAG,OAAO,KAAK;AAAA,MACpD,WAAS;AAAA,MACT,aAAAb;AAAA,MACA,UAAAC;AAAA,MACA,UAAU;AAAA,MAET,UAAAa;AAAA,QACCf;AAAA,QACAG,EAAQ,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,OAAO,EAAE,KAAA,EAAO;AAAA,QACzD;AAAA,UACE,kBAAkB,CAACa,MAAWA,EAAO;AAAA,UACrC,cAAc,CAACA,MAAWA,EAAO;AAAA,UACjC,kBAAkBZ,KAAoBK;AAAA,QAAA;AAAA,MACxC;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"InputCombobox.js","sources":["../../../src/lib/select/InputCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxProps, useComboboxFilter } from \"@fluentui/react-components\";\nimport { useState } from \"react\";\nimport { useI18n } from \"../i18n\";\n\nexport interface InputComboboxProps<T> {\n  /**\n   * The value of the text input.\n   */\n  searchQuery: string;\n  /**\n   * The placeholder text to display when the input is empty.\n   */\n  placeholder: string;\n  /**\n   * Indicates whether the input is disabled.\n   */\n  disabled: boolean;\n  /**\n   * The list of options to display in the dropdown.\n   */\n  options: T[];\n  /**\n   * The message to display when no option is found.\n   */\n  noOptionsMessage?: string;\n  /**\n   * The function to call when the input value changes.\n   */\n  onValueChangeQuery: (value: string) => void;\n  /**\n   * The function to call when the user selects an option from the dropdown.\n   */\n  onValueChange: (value: string) => void;\n  /**\n   * Called when the user presses Enter inside the combobox input.\n   */\n  onEnter?: () => void;\n}\n/**\n * A text input combobox with a dropdown list of options.\n * @returns A textbox component with a dropdown list of options.\n * @example\n * <InputCombobox\n *   searchQuery={searchQuery}\n *   placeholder=\"Select an option\"\n *   disabled={false}\n *   options={[{ code: \"1\", label: \"Option 1\" }, { code: \"2\", label: \"Option 2\" }]}\n *   noOptionsMessage=\"No options found\"\n *   onValueChangeQuery={(value) => setSearchQuery(value)}\n *   onValueChange={(value) => setSelectedOption(value)}\n *   onEnter={()=>{}}\n * />\n */\nexport function InputCombobox<T extends { code: string; label: string }>({\n  searchQuery,\n  placeholder,\n  disabled,\n  options,\n  noOptionsMessage,\n  onValueChangeQuery,\n  onValueChange,\n  onEnter,\n}: InputComboboxProps<T>) {\n  const { t } = useI18n();\n\n  // Some keyboards used to compose characters in languages as Japaneses send and event\n  // that tells that the user is composing a character. We must take that in account\n  // when managing the Enter key\n  const [isComposing, setIsComposing] = useState(false);\n\n  const noresult = t(\"InputCombobox_noresult\");\n\n  const handleOptionSelect: ComboboxProps[\"onOptionSelect\"] = (_, data) => {\n    onValueChangeQuery(data.optionText ?? \"\");\n    onValueChange(data.optionValue ?? \"\");\n  };\n\n  return (\n    <Combobox\n      style={{ width: \"100%\" }}\n      value={searchQuery}\n      onOptionSelect={handleOptionSelect}\n      onChange={(ev) => onValueChangeQuery(ev.target.value)}\n      onCompositionStart={() => setIsComposing(true)}\n      onCompositionEnd={() => setIsComposing(false)}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" && !isComposing) {\n          onEnter?.();\n        }\n      }}\n      clearable\n      placeholder={placeholder}\n      disabled={disabled}\n      freeform={true}\n    >\n      {useComboboxFilter(\n        searchQuery,\n        options.map((o) => ({ children: o.label, value: o.code })),\n        {\n          optionToReactKey: (option) => option.value,\n          optionToText: (option) => option.children,\n          noOptionsMessage: noOptionsMessage ?? noresult,\n        },\n      )}\n    </Combobox>\n  );\n}\n"],"names":["InputCombobox","searchQuery","placeholder","disabled","options","noOptionsMessage","onValueChangeQuery","onValueChange","onEnter","t","useI18n","isComposing","setIsComposing","useState","noresult","jsx","Combobox","_","data","ev","event","useComboboxFilter","option"],"mappings":";;;;;AAqDO,SAASA,EAAyD;AAAA,EACvE,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,GAA0B;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAKR,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAWL,EAAE,wBAAwB;AAO3C,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAO,OAAA;AAAA,MAChB,OAAOf;AAAA,MACP,gBATwD,CAACgB,GAAGC,MAAS;AACvE,QAAAZ,EAAmBY,EAAK,cAAc,EAAE,GACxCX,EAAcW,EAAK,eAAe,EAAE;AAAA,MACtC;AAAA,MAOI,UAAU,CAACC,MAAOb,EAAmBa,EAAG,OAAO,KAAK;AAAA,MACpD,oBAAoB,MAAMP,EAAe,EAAI;AAAA,MAC7C,kBAAkB,MAAMA,EAAe,EAAK;AAAA,MAC5C,WAAW,CAACQ,MAAU;AACpB,QAAIA,EAAM,QAAQ,WAAW,CAACT,KAC5BH,IAAA;AAAA,MAEJ;AAAA,MACA,WAAS;AAAA,MACT,aAAAN;AAAA,MACA,UAAAC;AAAA,MACA,UAAU;AAAA,MAET,UAAAkB;AAAA,QACCpB;AAAA,QACAG,EAAQ,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,OAAO,EAAE,KAAA,EAAO;AAAA,QACzD;AAAA,UACE,kBAAkB,CAACkB,MAAWA,EAAO;AAAA,UACrC,cAAc,CAACA,MAAWA,EAAO;AAAA,UACjC,kBAAkBjB,KAAoBS;AAAA,QAAA;AAAA,MACxC;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seij/common-ui",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -8,22 +8,22 @@
     "url": "https://github.com/seij-net/seij-commons-js.git"
   },
   "dependencies": {
-    "@fluentui/react-components": "9.72.9",
-    "@seij/common-ui-icons": "0.1.3",
-    "i18next-browser-languagedetector": "8.2.0",
-    "i18next": "25.7.3",
-    "@seij/common-types": "0.1.3",
-    "date-fns": "4.1.0",
-    "i18next-icu": "2.4.1",
-    "lodash-es": "4.17.22",
-    "rifm": "0.12.1"
+    "@fluentui/react-components": "^9.73.2",
+    "@seij/common-types": "^0.1.5",
+    "@seij/common-ui-icons": "^0.1.4",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next": "^25.7.3",
+    "lodash-es": "^4.17.23",
+    "date-fns": "^4.1.0",
+    "rifm": "^0.12.1",
+    "i18next-icu": "^2.4.1"
   },
   "devDependencies": {
-    "@types/lodash-es": "4.17.12"
+    "@types/lodash-es": "^4.17.12"
   },
   "peerDependencies": {
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "exports": {
     ".": {