refactor(select): rename to SelectMultiple and SelectSingleNative

Author: adaptive-shield-matrix

lib/input/select/MultiSelect.tsx lib/input/select/SelectMultiple.tsxlib/input/select/MultiSelect.tsx renamed to lib/input/select/SelectMultiple.tsx

@@ -12,15 +12,15 @@ import { classesGridCols3xl } from "~ui/static/container/classesGridCols"
 import { classArr } from "~ui/utils/classArr"
 import { classMerge } from "~ui/utils/classMerge"
 import type { SignalObject } from "~ui/utils/createSignalObject"
-import type { HasId } from "~ui/utils/HasId"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveId } from "~ui/utils/MayHaveId"
 import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
 
 /**
  * https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/src/Checkbox.tsx
  */
-export interface MultiSelectProps extends HasId, MayHaveClass, MayHaveInnerClass, MayHaveChildren {
+export interface SelectMultipleProps extends MayHaveId, MayHaveClass, MayHaveInnerClass, MayHaveChildren {
   buttonProps: CorvuPopoverProps
   textNoEntries?: string
   textAddEntry?: string
@@ -32,7 +32,7 @@ export interface MultiSelectProps extends HasId, MayHaveClass, MayHaveInnerClass
   listOptionClass?: string
 }
 
-export function MultiSelect(p: MultiSelectProps) {
+export function SelectMultiple(p: SelectMultipleProps) {
   const buttonClass = classMerge(p.addEntryClass, p.buttonProps.class)
   const buttonProps = mergeProps(p.buttonProps, {
     icon: mdiPlus,
@@ -110,7 +110,7 @@ function SelectedValue(p: SelectedValueProps) {
   )
 }
 
-interface OptionListProps extends HasId, MayHaveInnerClass {
+interface OptionListProps extends MayHaveId, MayHaveInnerClass {
   valueSignal: SignalObject<string[]>
   getOptions: Accessor<string[]>
   valueText?: (value: string) => string
@@ -147,7 +147,7 @@ function getInnerClass(optionAmount: number, innerClass?: string): string {
   return ""
 }
 
-interface ListOptionProps extends HasId, MultiselectOptionState {
+interface ListOptionProps extends MayHaveId, MultiselectOptionState {
   index: number
   listOptionClass?: string
 }

lib/input/select/NativeSingleSelect.tsx lib/input/select/SelectSingleNative.tsxlib/input/select/NativeSingleSelect.tsx renamed to lib/input/select/SelectSingleNative.tsx

@@ -9,14 +9,14 @@ import type { SignalObject } from "~ui/utils/createSignalObject"
 
 export type StringStringFn = (value: string) => string
 
-export interface NativeSingleSelectProps extends MayHaveClass, MayHaveChildren {
+export interface SelectSingleNativeProps extends MayHaveClass, MayHaveChildren {
   valueSignal: SignalObject<string>
   getOptions: Accessor<string[]>
   valueText?: StringStringFn
   id?: string
 }
 
-export function NativeSingleSelect(p: NativeSingleSelectProps) {
+export function SelectSingleNative(p: SelectSingleNativeProps) {
   return (
     <select
       id={p.id}
@@ -44,7 +44,7 @@ function onChange(
     currentTarget: HTMLSelectElement
     target: HTMLSelectElement
   },
-  p: NativeSingleSelectProps,
+  p: SelectSingleNativeProps,
 ): void {
   p.valueSignal.set(e.currentTarget.value)
 }

src/demos/input/DemoMultiSelect.tsx src/demos/input/DemoSelectMultiple.tsxsrc/demos/input/DemoMultiSelect.tsx renamed to src/demos/input/DemoSelectMultiple.tsx

@@ -1,20 +1,21 @@
-import { MultiSelect } from "~ui/input/select/MultiSelect"
+import { demoGetTextValue } from "@/demos/input/demoGetTextValue"
+import { SelectMultiple } from "~ui/input/select/SelectMultiple"
 import { PageWrapper } from "~ui/static/page/PageWrapper"
 import { createSignalObject } from "~ui/utils/createSignalObject"
 import { arrCreate } from "~utils/arr/arrCreate"
 
 const options100Strings = arrCreate<string>(100, (i) => "" + i)
 const multiValueSignal = createSignalObject<string[]>([])
 
-export function DemoMultiSelect() {
+export function DemoSelectMultiple() {
   return (
     <PageWrapper>
-      <MultiSelect
+      <SelectMultiple
         id="DemoMultiSelect"
         valueSignal={multiValueSignal}
         getOptions={() => options100Strings}
         buttonProps={{}}
-        valueText={(value) => "Option " + value}
+        valueText={demoGetTextValue}
       />
     </PageWrapper>
   )

…c/demos/input/DemoNativeSingleSelect.tsx …c/demos/input/DemoSelectSingleNative.tsxsrc/demos/input/DemoNativeSingleSelect.tsx renamed to src/demos/input/DemoSelectSingleNative.tsx src/demos/input/DemoNativeSingleSelect.tsx renamed to src/demos/input/DemoSelectSingleNative.tsx

@@ -1,19 +1,20 @@
+import { demoGetTextValue } from "@/demos/input/demoGetTextValue"
 import { createMemo, type Accessor } from "solid-js"
-import { NativeSingleSelect } from "~ui/input/select/NativeSingleSelect"
+import { SelectSingleNative } from "~ui/input/select/SelectSingleNative"
 import { PageWrapper } from "~ui/static/page/PageWrapper"
 import { createSignalObject } from "~ui/utils/createSignalObject"
 import { arrCreate } from "~utils/arr/arrCreate"
 
 const options100 = arrCreate<string>(100, (i) => "" + i)
 const singleValueSignal = createSignalObject<string>("")
 
-export function DemoNativeSingleSelect() {
+export function DemoSelectSingleNative() {
   const getOptions: Accessor<string[]> = createMemo(() => options100)
   const valueText = (value: string) => `Option ${value}`
 
   return (
     <PageWrapper>
-      <NativeSingleSelect valueSignal={singleValueSignal} getOptions={getOptions} valueText={valueText} />
+      <SelectSingleNative valueSignal={singleValueSignal} getOptions={getOptions} valueText={demoGetTextValue} />
     </PageWrapper>
   )
 }