react-science 0.37.0 → 1.0.0

package/lib/components/hooks/useSelect.d.ts

@@ -1,8 +1,18 @@
 /// <reference types="react" />
 import { ItemRenderer } from '@blueprintjs/select';
-export declare function useSelect<T extends {
-    label: string;
-}>(): {
+type FilterType<SourceType, Type> = Pick<SourceType, {
+    [K in keyof SourceType]: SourceType[K] extends Type ? K : never;
+}[keyof SourceType]>;
+interface BaseOptions<T> {
+    itemTextKey: keyof FilterType<T, string>;
+    defaultSelectedItem?: T;
+}
+interface RenderOptions<T> {
+    getItemText: (item: T) => string;
+    defaultSelectedItem?: T;
+}
+type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
+export declare function useSelect<T>(options: SelectOptions<T>): {
     value: T | null;
     setValue: import("react").Dispatch<import("react").SetStateAction<T | null>>;
     itemRenderer: ItemRenderer<T>;
@@ -18,4 +28,5 @@ export declare function useSelect<T extends {
     itemPredicate: (query: string, item: T) => boolean;
     itemListPredicate: (query: string, items: T[]) => T[];
 };
+export {};
 //# sourceMappingURL=useSelect.d.ts.map

package/lib/components/hooks/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;;;;;;yBAKhC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAGX,MAAM,SAAS,CAAC,EAAE;EAerD"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,KAAK,UAAU,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CACtC,UAAU,EACV;KACG,CAAC,IAAI,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK;CAChE,CAAC,MAAM,UAAU,CAAC,CACpB,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,KAAK,aAAa,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAsB1D,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;yBAOjC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAKX,MAAM,SAAS,CAAC,EAAE;EAiBrD"}

package/lib/components/hooks/useSelect.js

@@ -4,9 +4,23 @@ exports.useSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@blueprintjs/core");
 const react_1 = require("react");
-function useSelect() {
-    const [value, setValue] = (0, react_1.useState)(null);
-    const itemRenderer = getItemRenderer(value);
+function isAccessLabelByKey(options) {
+    return 'itemTextKey' in options;
+}
+function getLabel(item, options) {
+    const isAccessLByLabelKey = isAccessLabelByKey(options);
+    if (!item || (isAccessLByLabelKey && !options.itemTextKey)) {
+        return null;
+    }
+    if (isAccessLByLabelKey) {
+        return item[options.itemTextKey];
+    }
+    return options.getItemText(item);
+}
+function useSelect(options) {
+    const { defaultSelectedItem = null } = options;
+    const [value, setValue] = (0, react_1.useState)(defaultSelectedItem);
+    const itemRenderer = getItemRenderer(value, options);
     const onItemSelect = setValue;
     const popoverProps = {
         onOpened: (node) => {
@@ -21,10 +35,18 @@ function useSelect() {
         style: { display: 'inline-block' },
     };
     const itemPredicate = (query, item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase());
+        const label = getLabel(item, options);
+        if (!label)
+            return false;
+        return label.toLowerCase().includes(query.toLowerCase());
     };
     const itemListPredicate = (query, items) => {
-        return items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+        return items.filter((item) => {
+            const label = getLabel(item, options);
+            if (!label)
+                return false;
+            return label.toLowerCase().includes(query.toLowerCase());
+        });
     };
     return {
         value,
@@ -38,8 +60,12 @@ function useSelect() {
     };
 }
 exports.useSelect = useSelect;
-function getItemRenderer(value) {
-    const render = ({ label }, { handleClick, handleFocus, modifiers, index }) => ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { active: modifiers.active, disabled: modifiers.disabled, selected: value?.label === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: label }, index));
+function getItemRenderer(value, options) {
+    const selectedLabel = getLabel(value, options);
+    const render = (item, { handleClick, handleFocus, modifiers, index }) => {
+        const label = getLabel(item, options);
+        return ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { active: modifiers.active, disabled: modifiers.disabled, selected: selectedLabel === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: label }, index));
+    };
     return render;
 }
 //# sourceMappingURL=useSelect.js.map

package/lib/components/hooks/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";;;;AAAA,4CAA6C;AAE7C,iCAAiC;AAEjC,SAAgB,SAAS;IACvB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAW,IAAI,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,QAAQ,CAAC;IAC9B,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC,IAAiB,EAAE,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACrB,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;KACF,CAAC;IACF,MAAM,kBAAkB,GAAG;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE;KACnC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,IAAO,EAAE,EAAE;QAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,KAAU,EAAE,EAAE;QACtD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CACvD,CAAC;IACJ,CAAC,CAAC;IACF,OAAO;QACL,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,iBAAiB;KAClB,CAAC;AACJ,CAAC;AAlCD,8BAkCC;AAED,SAAS,eAAe,CAA8B,KAAe;IACnE,MAAM,MAAM,GAAoB,CAC9B,EAAE,KAAK,EAAE,EACT,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAC9C,EAAE,CAAC,CACH,uBAAC,eAAQ,IACP,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,EAEhC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,aAAa,EAAC,YAAY,EAC1B,IAAI,EAAE,KAAK,IAJN,KAAK,CAKV,CACH,CAAC;IACF,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"useSelect.js","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/hooks/useSelect.d.ts

@@ -1,8 +1,18 @@
 /// <reference types="react" />
 import { ItemRenderer } from '@blueprintjs/select';
-export declare function useSelect<T extends {
-    label: string;
-}>(): {
+type FilterType<SourceType, Type> = Pick<SourceType, {
+    [K in keyof SourceType]: SourceType[K] extends Type ? K : never;
+}[keyof SourceType]>;
+interface BaseOptions<T> {
+    itemTextKey: keyof FilterType<T, string>;
+    defaultSelectedItem?: T;
+}
+interface RenderOptions<T> {
+    getItemText: (item: T) => string;
+    defaultSelectedItem?: T;
+}
+type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
+export declare function useSelect<T>(options: SelectOptions<T>): {
     value: T | null;
     setValue: import("react").Dispatch<import("react").SetStateAction<T | null>>;
     itemRenderer: ItemRenderer<T>;
@@ -18,4 +28,5 @@ export declare function useSelect<T extends {
     itemPredicate: (query: string, item: T) => boolean;
     itemListPredicate: (query: string, items: T[]) => T[];
 };
+export {};
 //# sourceMappingURL=useSelect.d.ts.map

package/lib-esm/components/hooks/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;;;;;;yBAKhC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAGX,MAAM,SAAS,CAAC,EAAE;EAerD"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,KAAK,UAAU,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CACtC,UAAU,EACV;KACG,CAAC,IAAI,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK;CAChE,CAAC,MAAM,UAAU,CAAC,CACpB,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,KAAK,aAAa,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAsB1D,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;yBAOjC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAKX,MAAM,SAAS,CAAC,EAAE;EAiBrD"}

package/lib-esm/components/hooks/useSelect.js

@@ -1,9 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MenuItem } from '@blueprintjs/core';
 import { useState } from 'react';
-export function useSelect() {
-    const [value, setValue] = useState(null);
-    const itemRenderer = getItemRenderer(value);
+function isAccessLabelByKey(options) {
+    return 'itemTextKey' in options;
+}
+function getLabel(item, options) {
+    const isAccessLByLabelKey = isAccessLabelByKey(options);
+    if (!item || (isAccessLByLabelKey && !options.itemTextKey)) {
+        return null;
+    }
+    if (isAccessLByLabelKey) {
+        return item[options.itemTextKey];
+    }
+    return options.getItemText(item);
+}
+export function useSelect(options) {
+    const { defaultSelectedItem = null } = options;
+    const [value, setValue] = useState(defaultSelectedItem);
+    const itemRenderer = getItemRenderer(value, options);
     const onItemSelect = setValue;
     const popoverProps = {
         onOpened: (node) => {
@@ -18,10 +32,18 @@ export function useSelect() {
         style: { display: 'inline-block' },
     };
     const itemPredicate = (query, item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase());
+        const label = getLabel(item, options);
+        if (!label)
+            return false;
+        return label.toLowerCase().includes(query.toLowerCase());
     };
     const itemListPredicate = (query, items) => {
-        return items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+        return items.filter((item) => {
+            const label = getLabel(item, options);
+            if (!label)
+                return false;
+            return label.toLowerCase().includes(query.toLowerCase());
+        });
     };
     return {
         value,
@@ -34,8 +56,12 @@ export function useSelect() {
         itemListPredicate,
     };
 }
-function getItemRenderer(value) {
-    const render = ({ label }, { handleClick, handleFocus, modifiers, index }) => (_jsx(MenuItem, { active: modifiers.active, disabled: modifiers.disabled, selected: value?.label === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: label }, index));
+function getItemRenderer(value, options) {
+    const selectedLabel = getLabel(value, options);
+    const render = (item, { handleClick, handleFocus, modifiers, index }) => {
+        const label = getLabel(item, options);
+        return (_jsx(MenuItem, { active: modifiers.active, disabled: modifiers.disabled, selected: selectedLabel === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: label }, index));
+    };
     return render;
 }
 //# sourceMappingURL=useSelect.js.map

package/lib-esm/components/hooks/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,UAAU,SAAS;IACvB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,QAAQ,CAAC;IAC9B,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC,IAAiB,EAAE,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACrB,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;KACF,CAAC;IACF,MAAM,kBAAkB,GAAG;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE;KACnC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,IAAO,EAAE,EAAE;QAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,KAAU,EAAE,EAAE;QACtD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CACvD,CAAC;IACJ,CAAC,CAAC;IACF,OAAO;QACL,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,iBAAiB;KAClB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAA8B,KAAe;IACnE,MAAM,MAAM,GAAoB,CAC9B,EAAE,KAAK,EAAE,EACT,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAC9C,EAAE,CAAC,CACH,KAAC,QAAQ,IACP,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,EAEhC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,aAAa,EAAC,YAAY,EAC1B,IAAI,EAAE,KAAK,IAJN,KAAK,CAKV,CACH,CAAC;IACF,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"useSelect.js","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.37.0",
+  "version": "1.0.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {

package/src/components/hooks/useSelect.tsx

@@ -2,9 +2,50 @@ import { MenuItem } from '@blueprintjs/core';
 import { ItemRenderer } from '@blueprintjs/select';
 import { useState } from 'react';
 
-export function useSelect<T extends { label: string }>() {
-  const [value, setValue] = useState<T | null>(null);
-  const itemRenderer = getItemRenderer(value);
+type FilterType<SourceType, Type> = Pick<
+  SourceType,
+  {
+    [K in keyof SourceType]: SourceType[K] extends Type ? K : never;
+  }[keyof SourceType]
+>;
+
+interface BaseOptions<T> {
+  itemTextKey: keyof FilterType<T, string>;
+  defaultSelectedItem?: T;
+}
+
+interface RenderOptions<T> {
+  getItemText: (item: T) => string;
+  defaultSelectedItem?: T;
+}
+
+type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
+
+function isAccessLabelByKey<T>(
+  options: SelectOptions<T>,
+): options is BaseOptions<T> {
+  return 'itemTextKey' in options;
+}
+
+function getLabel<T>(item: T, options: SelectOptions<T>) {
+  const isAccessLByLabelKey = isAccessLabelByKey(options);
+
+  if (!item || (isAccessLByLabelKey && !options.itemTextKey)) {
+    return null;
+  }
+
+  if (isAccessLByLabelKey) {
+    return item[options.itemTextKey] as string;
+  }
+
+  return options.getItemText(item);
+}
+
+export function useSelect<T>(options: SelectOptions<T>) {
+  const { defaultSelectedItem = null } = options;
+
+  const [value, setValue] = useState<T | null>(defaultSelectedItem);
+  const itemRenderer = getItemRenderer(value as T, options);
   const onItemSelect = setValue;
   const popoverProps = {
     onOpened: (node: HTMLElement) => {
@@ -19,12 +60,16 @@ export function useSelect<T extends { label: string }>() {
     style: { display: 'inline-block' },
   };
   const itemPredicate = (query: string, item: T) => {
-    return item.label.toLowerCase().includes(query.toLowerCase());
+    const label = getLabel(item, options);
+    if (!label) return false;
+    return label.toLowerCase().includes(query.toLowerCase());
   };
   const itemListPredicate = (query: string, items: T[]) => {
-    return items.filter((item) =>
-      item.label.toLowerCase().includes(query.toLowerCase()),
-    );
+    return items.filter((item) => {
+      const label = getLabel(item, options);
+      if (!label) return false;
+      return label.toLowerCase().includes(query.toLowerCase());
+    });
   };
   return {
     value,
@@ -38,21 +83,27 @@ export function useSelect<T extends { label: string }>() {
   };
 }
 
-function getItemRenderer<T extends { label: string }>(value: T | null) {
+function getItemRenderer<T>(value: T, options: SelectOptions<T>) {
+  const selectedLabel = getLabel(value, options);
+
   const render: ItemRenderer<T> = (
-    { label },
+    item,
     { handleClick, handleFocus, modifiers, index },
-  ) => (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      selected={value?.label === label}
-      key={index}
-      onClick={handleClick}
-      onFocus={handleFocus}
-      roleStructure="listoption"
-      text={label}
-    />
-  );
+  ) => {
+    const label = getLabel(item, options);
+    return (
+      <MenuItem
+        active={modifiers.active}
+        disabled={modifiers.disabled}
+        selected={selectedLabel === label}
+        key={index}
+        onClick={handleClick}
+        onFocus={handleFocus}
+        roleStructure="listoption"
+        text={label}
+      />
+    );
+  };
+
   return render;
 }