soda-heroui 0.11.1 → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/FormSelect.cjs +10 -3
  2. package/dist/components/FormSelect.d.ts +4 -2
  3. package/dist/components/FormSelect.js +11 -4
  4. package/package.json +4 -4
  5. package/src/components/FormSelect.tsx +23 -5
package/dist/components/FormSelect.cjs CHANGED
@@ -33,17 +33,24 @@ const react_namespaceObject = require("@heroui/react");
33
33
  const external_deepsea_tools_namespaceObject = require("deepsea-tools");
34
34
  const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
35
35
  const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
36
- function FormSelect({ field, multiple, emptyValue, component: Select2 = react_namespaceObject.Select, ...rest }) {
36
+ function FormSelect({ field, emptyValue, component: Select2 = react_namespaceObject.Select, selectionMode, labelPlacement, classNames: { base, label, ...restClassNames } = {}, ...rest }) {
37
37
  const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
38
38
  emptyValue ??= context.emptyValue;
39
39
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Select2, {
40
- selectedKeys: (0, external_deepsea_tools_namespaceObject.isNonNullable)(field.state.value) ? multiple ? field.state.value : [
40
+ classNames: {
41
+ base: (0, external_deepsea_tools_namespaceObject.clsx)("outside-top" === labelPlacement && "flex flex-col", base),
42
+ label: (0, external_deepsea_tools_namespaceObject.clsx)("outside-top" === labelPlacement && "pb-2", label),
43
+ ...restClassNames
44
+ },
45
+ selectedKeys: (0, external_deepsea_tools_namespaceObject.isNonNullable)(field.state.value) ? "multiple" === selectionMode ? field.state.value : [
41
46
  field.state.value
42
47
  ] : [],
43
48
  onSelectionChange: (keys)=>{
44
49
  const value = Array.from(keys);
45
- field.handleChange(multiple ? value : value.at(0) ?? (0, external_FormProvider_cjs_namespaceObject.getEmptyValue)(emptyValue));
50
+ field.handleChange("multiple" === selectionMode ? value : value.at(0) ?? (0, external_FormProvider_cjs_namespaceObject.getEmptyValue)(emptyValue));
46
51
  },
52
+ selectionMode: selectionMode,
53
+ labelPlacement: "outside-top" === labelPlacement ? "outside-left" : labelPlacement,
47
54
  ...(0, getFieldProps_cjs_namespaceObject.getFieldProps)(field),
48
55
  ...rest
49
56
  });
package/dist/components/FormSelect.d.ts CHANGED
@@ -5,9 +5,11 @@ import { FieldComponentProps } from "soda-tanstack-form";
5
5
  import { StrictOmit } from "soda-type";
6
6
  import { EmptyValue } from "./FormProvider";
7
7
  export type SelectionMode = "single" | "multiple";
8
- export interface FormSelectProps<Mode extends SelectionMode = "single", Value extends (Mode extends "multiple" ? Key[] : Key) | null | undefined = (Mode extends "multiple" ? Key[] : Key) | null | undefined, RenderItem extends object = object> extends StrictOmit<FieldComponentProps<typeof Select<RenderItem>, Value>, "selectionMode"> {
8
+ export type SelectLabelPlacement = "inside" | "outside" | "outside-left" | "outside-top";
9
+ export interface FormSelectProps<Mode extends SelectionMode = "single", Value extends (Mode extends "multiple" ? Key[] : Key) | null | undefined = (Mode extends "multiple" ? Key[] : Key) | null | undefined, RenderItem extends object = object> extends StrictOmit<FieldComponentProps<typeof Select<RenderItem>, Value>, "selectionMode" | "labelPlacement"> {
10
+ labelPlacement?: SelectLabelPlacement;
9
11
  selectionMode?: Mode;
10
12
  emptyValue?: EmptyValue;
11
13
  component?: <RenderItem extends object>(props: SelectProps<RenderItem>) => ReactNode;
12
14
  }
13
- export declare function FormSelect<Mode extends SelectionMode = "single", Value extends (Mode extends "multiple" ? Key[] : Key) | null | undefined = (Mode extends "multiple" ? Key[] : Key) | null | undefined, RenderItem extends object = object>({ field, multiple, emptyValue, component: Select2, ...rest }: FormSelectProps<Mode, Value, RenderItem>): ReactNode;
15
+ export declare function FormSelect<Mode extends SelectionMode = "single", Value extends (Mode extends "multiple" ? Key[] : Key) | null | undefined = (Mode extends "multiple" ? Key[] : Key) | null | undefined, RenderItem extends object = object>({ field, emptyValue, component: Select2, selectionMode, labelPlacement, classNames: { base, label, ...restClassNames }, ...rest }: FormSelectProps<Mode, Value, RenderItem>): ReactNode;
package/dist/components/FormSelect.js CHANGED
@@ -2,20 +2,27 @@
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useContext } from "react";
4
4
  import { Select } from "@heroui/react";
5
- import { isNonNullable } from "deepsea-tools";
5
+ import { clsx, isNonNullable } from "deepsea-tools";
6
6
  import { getFieldProps } from "../utils/getFieldProps.js";
7
7
  import { FormContext, getEmptyValue } from "./FormProvider.js";
8
- function FormSelect({ field, multiple, emptyValue, component: Select2 = Select, ...rest }) {
8
+ function FormSelect({ field, emptyValue, component: Select2 = Select, selectionMode, labelPlacement, classNames: { base, label, ...restClassNames } = {}, ...rest }) {
9
9
  const context = useContext(FormContext);
10
10
  emptyValue ??= context.emptyValue;
11
11
  return /*#__PURE__*/ jsx(Select2, {
12
- selectedKeys: isNonNullable(field.state.value) ? multiple ? field.state.value : [
12
+ classNames: {
13
+ base: clsx("outside-top" === labelPlacement && "flex flex-col", base),
14
+ label: clsx("outside-top" === labelPlacement && "pb-2", label),
15
+ ...restClassNames
16
+ },
17
+ selectedKeys: isNonNullable(field.state.value) ? "multiple" === selectionMode ? field.state.value : [
13
18
  field.state.value
14
19
  ] : [],
15
20
  onSelectionChange: (keys)=>{
16
21
  const value = Array.from(keys);
17
- field.handleChange(multiple ? value : value.at(0) ?? getEmptyValue(emptyValue));
22
+ field.handleChange("multiple" === selectionMode ? value : value.at(0) ?? getEmptyValue(emptyValue));
18
23
  },
24
+ selectionMode: selectionMode,
25
+ labelPlacement: "outside-top" === labelPlacement ? "outside-left" : labelPlacement,
19
26
  ...getFieldProps(field),
20
27
  ...rest
21
28
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "soda-heroui",
3
- "version": "0.11.1",
3
+ "version": "0.11.2",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "exports": {
@@ -37,10 +37,10 @@
37
37
  "dependencies": {
38
38
  "@internationalized/date": "^3.8.2",
39
39
  "@tanstack/react-form": "^1.19.0",
40
- "soda-tanstack-form": "0.2.5",
41
40
  "deepsea-tools": "5.40.4",
42
- "soda-type": "6.3.1",
43
- "soda-hooks": "6.12.7"
41
+ "soda-hooks": "6.12.7",
42
+ "soda-tanstack-form": "0.2.5",
43
+ "soda-type": "6.3.1"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@ianvs/prettier-plugin-sort-imports": "^4.6.0",
package/src/components/FormSelect.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import { ReactNode, useContext } from "react"
4
4
  import { Select, SelectProps } from "@heroui/react"
5
5
  import { Key } from "@react-types/shared"
6
- import { isNonNullable } from "deepsea-tools"
6
+ import { clsx, isNonNullable } from "deepsea-tools"
7
7
  import { FieldComponentProps } from "soda-tanstack-form"
8
8
  import { StrictOmit } from "soda-type"
9
9
 
@@ -12,11 +12,14 @@ import { EmptyValue, FormContext, getEmptyValue } from "./FormProvider"
12
12
 
13
13
  export type SelectionMode = "single" | "multiple"
14
14
 
15
+ export type SelectLabelPlacement = "inside" | "outside" | "outside-left" | "outside-top"
16
+
15
17
  export interface FormSelectProps<
16
18
  Mode extends SelectionMode = "single",
17
19
  Value extends (Mode extends "multiple" ? Key[] : Key) | null | undefined = (Mode extends "multiple" ? Key[] : Key) | null | undefined,
18
20
  RenderItem extends object = object,
19
- > extends StrictOmit<FieldComponentProps<typeof Select<RenderItem>, Value>, "selectionMode"> {
21
+ > extends StrictOmit<FieldComponentProps<typeof Select<RenderItem>, Value>, "selectionMode" | "labelPlacement"> {
22
+ labelPlacement?: SelectLabelPlacement
20
23
  selectionMode?: Mode
21
24
  emptyValue?: EmptyValue
22
25
  component?: <RenderItem extends object>(props: SelectProps<RenderItem>) => ReactNode
@@ -26,17 +29,32 @@ export function FormSelect<
26
29
  Mode extends SelectionMode = "single",
27
30
  Value extends (Mode extends "multiple" ? Key[] : Key) | null | undefined = (Mode extends "multiple" ? Key[] : Key) | null | undefined,
28
31
  RenderItem extends object = object,
29
- >({ field, multiple, emptyValue, component: Select2 = Select, ...rest }: FormSelectProps<Mode, Value, RenderItem>): ReactNode {
32
+ >({
33
+ field,
34
+ emptyValue,
35
+ component: Select2 = Select,
36
+ selectionMode,
37
+ labelPlacement,
38
+ classNames: { base, label, ...restClassNames } = {},
39
+ ...rest
40
+ }: FormSelectProps<Mode, Value, RenderItem>): ReactNode {
30
41
  const context = useContext(FormContext)
31
42
  emptyValue ??= context.emptyValue
32
43
 
33
44
  return (
34
45
  <Select2<RenderItem>
35
- selectedKeys={isNonNullable(field.state.value) ? (multiple ? (field.state.value as Key[]) : [field.state.value as Key]) : []}
46
+ classNames={{
47
+ base: clsx(labelPlacement === "outside-top" && "flex flex-col", base),
48
+ label: clsx(labelPlacement === "outside-top" && "pb-2", label),
49
+ ...restClassNames,
50
+ }}
51
+ selectedKeys={isNonNullable(field.state.value) ? (selectionMode === "multiple" ? (field.state.value as Key[]) : [field.state.value as Key]) : []}
36
52
  onSelectionChange={keys => {
37
53
  const value = Array.from(keys)
38
- field.handleChange((multiple ? value : (value.at(0) ?? getEmptyValue(emptyValue))) as Value)
54
+ field.handleChange((selectionMode === "multiple" ? value : (value.at(0) ?? getEmptyValue(emptyValue))) as Value)
39
55
  }}
56
+ selectionMode={selectionMode}
57
+ labelPlacement={labelPlacement === "outside-top" ? "outside-left" : labelPlacement}
40
58
  {...getFieldProps(field)}
41
59
  {...rest}
42
60
  />