@colisweb/rescript-toolkit 5.22.0 → 5.23.0

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/ui/Toolkit__Ui_MultiSelect.res +20 -7
  3. package/src/ui/Toolkit__Ui_MultiSelectWithValidation.res +20 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colisweb/rescript-toolkit",
3
- "version": "5.22.0",
3
+ "version": "5.23.0",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "clean": "rescript clean",
package/src/ui/Toolkit__Ui_MultiSelect.res CHANGED
@@ -65,13 +65,26 @@ let make = (
65
65
  </span>
66
66
  </p>
67
67
  | options =>
68
- <div
69
- className="table table-fixed w-full"
70
- title={options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")}>
71
- <span className="table-cell truncate text-left">
72
- {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
73
- </span>
74
- </div>
68
+ <>
69
+ <div
70
+ className="table table-fixed w-full pr-8"
71
+ title={options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")}>
72
+ <span className="table-cell truncate text-left">
73
+ {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
74
+ </span>
75
+ </div>
76
+ <button
77
+ className={"absolute right-1 z-20 bg-info-100 text-info-600 text-sm rounded px-1.5 py-0.5 inline-flex items-center gap-2"}
78
+ onClick={event => {
79
+ event->JsxEventC.Mouse.stopPropagation
80
+ setSelectedOptions(_ => [])
81
+ }}>
82
+ {options->Array.length->React.int}
83
+ <span className={"rounded-full bg-info-600 text-info-100 p-0.5"}>
84
+ <ReactIcons.MdClose size={14} />
85
+ </span>
86
+ </button>
87
+ </>
75
88
  }}>
76
89
  <div className="py-2 pl-2 pr-1">
77
90
  {allowFilter
package/src/ui/Toolkit__Ui_MultiSelectWithValidation.res CHANGED
@@ -140,13 +140,26 @@ let make = (
140
140
  </span>
141
141
  </p>
142
142
  | options =>
143
- <div
144
- className="table table-fixed w-full"
145
- title={options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")}>
146
- <span className="table-cell truncate text-left">
147
- {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
148
- </span>
149
- </div>
143
+ <>
144
+ <div
145
+ className="table table-fixed w-full"
146
+ title={options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")}>
147
+ <span className="table-cell truncate text-left">
148
+ {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
149
+ </span>
150
+ </div>
151
+ <button
152
+ className={"absolute right-1 z-20 bg-info-100 text-info-600 text-sm rounded px-1.5 py-0.5 inline-flex items-center gap-2"}
153
+ onClick={event => {
154
+ event->JsxEventC.Mouse.stopPropagation
155
+ setSelectedOptions(_ => [])
156
+ }}>
157
+ {options->Array.length->React.int}
158
+ <span className={"rounded-full bg-info-600 text-info-100 p-0.5"}>
159
+ <ReactIcons.MdClose size={14} />
160
+ </span>
161
+ </button>
162
+ </>
150
163
  }}>
151
164
  <div className="py-2 pl-2 pr-1 max-h-[300px] overflow-y-scroll">
152
165
  {allowFilter