@douglasneuroinformatics/libui 2.0.9 → 2.1.0

package/dist/components/Form/NumberField/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAExF,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAEtG,eAAO,MAAM,WAAW,UAAW,gBAAgB,sBAMlD,CAAC"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAErF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAExF,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAEtG,eAAO,MAAM,WAAW,UAAW,gBAAgB,sBAOlD,CAAC"}

package/dist/components/Form/NumberField/NumberField.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { match } from 'ts-pattern';
 import { NumberFieldInput } from './NumberFieldInput.js';
 import { NumberFieldRadio } from './NumberFieldRadio.js';
+import { NumberFieldSelect } from './NumberFieldSelect.js';
 import { NumberFieldSlider } from './NumberFieldSlider.js';
 export const NumberField = (props) => {
     return match(props)
         .with({ variant: 'input' }, (props) => React.createElement(NumberFieldInput, { ...props }))
         .with({ variant: 'slider' }, (props) => React.createElement(NumberFieldSlider, { ...props }))
         .with({ variant: 'radio' }, (props) => React.createElement(NumberFieldRadio, { ...props }))
+        .with({ variant: 'select' }, (props) => React.createElement(NumberFieldSelect, { ...props }))
         .exhaustive();
 };

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts

@@ -3,7 +3,7 @@ import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types'
 import type { Simplify } from 'type-fest';
 import type { BaseFieldComponentProps } from '../types.js';
 export type NumberFieldRadioProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
-    variant: 'radio';
+    options: object;
 }>>;
 export declare const NumberFieldRadio: ({ description, error, label, name, options, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
 //# sourceMappingURL=NumberFieldRadio.d.ts.map

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,kEAQ1B,qBAAqB,sBAiCvB,CAAC"}
+{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAChF,CAAC;AAEF,eAAO,MAAM,gBAAgB,kEAQ1B,qBAAqB,sBAiCvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import { type BaseFieldComponentProps } from '../types.js';
+export type NumberFieldSelectProps<T extends number = number> = Simplify<BaseFieldComponentProps<T> & Extract<NumberFormField<T>, {
+    options: object;
+}>>;
+export declare const NumberFieldSelect: <T extends number = number>({ description, error, label, name, options, setValue, value }: NumberFieldSelectProps<T>) => React.JSX.Element;
+//# sourceMappingURL=NumberFieldSelect.d.ts.map

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CACtE,uBAAuB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC9E,CAAC;AAEF,eAAO,MAAM,iBAAiB,6FAQ3B,uBAAuB,CAAC,CAAC,sBAuB3B,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSelect.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Label } from '../../Label/Label.js';
+import { Select } from '../../Select/Select.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import {} from '../types.js';
+export const NumberFieldSelect = ({ description, error, label, name, options, setValue, value }) => {
+    return (React.createElement(FieldGroup, null,
+        React.createElement(FieldGroup.Row, null,
+            React.createElement(Label, null, label),
+            React.createElement(FieldGroup.Description, { description: description })),
+        React.createElement(Select, { name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseFloat(value)) },
+            React.createElement(Select.Trigger, { "data-cy": `${name}-select-trigger`, "data-testid": `${name}-select-trigger` },
+                React.createElement(Select.Value, null)),
+            React.createElement(Select.Content, { "data-cy": `${name}-select-content`, "data-testid": `${name}-select-content` }, Object.keys(options).map((option) => (React.createElement(Select.Item, { key: option, value: option }, options[option]))))),
+        React.createElement(FieldGroup.Error, { error: error })));
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "packageManager": "pnpm@8.15.3",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.6.8",
+    "@douglasneuroinformatics/libui-form-types": "^0.7.0",
     "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.1.3",

package/src/components/Form/NumberField/NumberField.tsx

@@ -4,6 +4,7 @@ import { match } from 'ts-pattern';
 
 import { NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput.js';
 import { NumberFieldRadio, type NumberFieldRadioProps } from './NumberFieldRadio.js';
+import { NumberFieldSelect } from './NumberFieldSelect.js';
 import { NumberFieldSlider, type NumberFieldSliderProps } from './NumberFieldSlider.js';
 
 export type NumberFieldProps = NumberFieldInputProps | NumberFieldRadioProps | NumberFieldSliderProps;
@@ -13,5 +14,6 @@ export const NumberField = (props: NumberFieldProps) => {
     .with({ variant: 'input' }, (props) => <NumberFieldInput {...props} />)
     .with({ variant: 'slider' }, (props) => <NumberFieldSlider {...props} />)
     .with({ variant: 'radio' }, (props) => <NumberFieldRadio {...props} />)
+    .with({ variant: 'select' }, (props) => <NumberFieldSelect {...props} />)
     .exhaustive();
 };

package/src/components/Form/NumberField/NumberFieldRadio.tsx

@@ -11,7 +11,7 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 import type { BaseFieldComponentProps } from '../types.js';
 
 export type NumberFieldRadioProps = Simplify<
-  BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'radio' }>
+  BaseFieldComponentProps<number> & Extract<NumberFormField, { options: object }>
 >;
 
 export const NumberFieldRadio = ({

package/src/components/Form/NumberField/NumberFieldSelect.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Label } from '../../Label/Label.js';
+import { Select } from '../../Select/Select.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { type BaseFieldComponentProps } from '../types.js';
+
+export type NumberFieldSelectProps<T extends number = number> = Simplify<
+  BaseFieldComponentProps<T> & Extract<NumberFormField<T>, { options: object }>
+>;
+
+export const NumberFieldSelect = <T extends number = number>({
+  description,
+  error,
+  label,
+  name,
+  options,
+  setValue,
+  value
+}: NumberFieldSelectProps<T>) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <Select name={name} value={value?.toString() ?? ''} onValueChange={(value) => setValue(parseFloat(value) as T)}>
+        <Select.Trigger data-cy={`${name}-select-trigger`} data-testid={`${name}-select-trigger`}>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>
+          {Object.keys(options).map((option) => (
+            <Select.Item key={option} value={option}>
+              {/** option needs to be type number, but no sense converting it when it is coerced right back anyways */}
+              {options[option as any as T]}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};