update formatting

Author: clarasb

chartlets.js/CHANGES.md

@@ -1,7 +1,7 @@
 ## Version 0.1.4 (in development)
 
-* Add `multiple` property for `Select` component to enable the
-  of multiple elements.
+* Add `multiple` property for `Select` component to enable the selection
+  of multiple elements. The `default` mode is supported at the moment.
 
 ## Version 0.1.3 (from 2025/01/28)
 

chartlets.js/packages/lib/src/plugins/mui/Select.tsx

@@ -8,86 +8,86 @@ import { isString } from "@/utils/isString";
 import { Tooltip } from "./Tooltip";
 
 export type SelectOption =
-	| string
-	| number
-	| [string, string]
-	| [number, string]
-	| { value: string | number; label?: string };
+  | string
+  | number
+  | [string, string]
+  | [number, string]
+  | { value: string | number; label?: string };
 
 interface SelectState extends ComponentState {
-	options?: SelectOption[];
-	multiple?: boolean;
+  options?: SelectOption[];
+  multiple?: boolean;
 }
 
 interface SelectProps extends ComponentProps, SelectState {}
 
 export function Select({
-	type,
-	id,
-	name,
-	value,
-	options,
-	disabled,
-	style,
-	tooltip,
-	label,
-	multiple = false,
-	onChange,
+  type,
+  id,
+  name,
+  value,
+  options,
+  disabled,
+  style,
+  tooltip,
+  label,
+  multiple = false,
+  onChange,
 }: SelectProps) {
-	const handleChange = (event: SelectChangeEvent<unknown>) => {
-		if (id) {
-			let newValue: string | number | (string | number)[] = multiple
-				? (event.target.value as (string | number)[])
-				: (event.target.value as string | number);
+  const handleChange = (event: SelectChangeEvent<unknown>) => {
+    if (id) {
+      let newValue: string | number | (string | number)[] = multiple
+        ? (event.target.value as (string | number)[])
+        : (event.target.value as string | number);
 
-			if (!multiple && typeof value === "number") {
-				newValue = Number.parseInt(newValue as string);
-			}
+      if (!multiple && typeof value === "number") {
+        newValue = Number.parseInt(newValue as string);
+      }
 
-			onChange({
-				componentType: type,
-				id: id,
-				property: "value",
-				value: newValue,
-			});
-		}
-	};
-	return (
-		<Tooltip title={tooltip}>
-			<MuiFormControl variant="filled" size="small" style={style}>
-				{label && <MuiInputLabel id={`${id}-label`}>{label}</MuiInputLabel>}
-				<MuiSelect
-					labelId={`${id}-label`}
-					id={id}
-					name={name}
-					value={value}
-					disabled={disabled}
-					multiple={multiple}
-					onChange={handleChange}>
-					{Array.isArray(options) &&
-						options
-							.map(normalizeSelectOption)
-							.map(([optionValue, optionLabel], index) => (
-								<MuiMenuItem key={index} value={optionValue}>
-									{optionLabel}
-								</MuiMenuItem>
-							))}
-				</MuiSelect>
-			</MuiFormControl>
-		</Tooltip>
-	);
+      onChange({
+        componentType: type,
+        id: id,
+        property: "value",
+        value: newValue,
+      });
+    }
+  };
+  return (
+    <Tooltip title={tooltip}>
+      <MuiFormControl variant="filled" size="small" style={style}>
+        {label && <MuiInputLabel id={`${id}-label`}>{label}</MuiInputLabel>}
+        <MuiSelect
+          labelId={`${id}-label`}
+          id={id}
+          name={name}
+          value={value}
+          disabled={disabled}
+          multiple={multiple}
+          onChange={handleChange}>
+          {Array.isArray(options) &&
+            options
+              .map(normalizeSelectOption)
+              .map(([optionValue, optionLabel], index) => (
+                <MuiMenuItem key={index} value={optionValue}>
+                  {optionLabel}
+                </MuiMenuItem>
+              ))}
+        </MuiSelect>
+      </MuiFormControl>
+    </Tooltip>
+  );
 }
 
 function normalizeSelectOption(
-	option: SelectOption
+  option: SelectOption
 ): [string | number, string] {
-	if (isString(option)) {
-		return [option, option];
-	} else if (typeof option === "number") {
-		return [option, option.toString()];
-	} else if (Array.isArray(option)) {
-		return option;
-	} else {
-		return [option.value, option.label || `${option.value}`];
-	}
+  if (isString(option)) {
+    return [option, option];
+  } else if (typeof option === "number") {
+    return [option, option.toString()];
+  } else if (Array.isArray(option)) {
+    return option;
+  } else {
+    return [option.value, option.label || `${option.value}`];
+  }
 }