@colisweb/rescript-toolkit 3.3.0 → 3.3.1

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 (4) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/package.json +1 -1
  3. package/playground/components/Playground_Listbox.res +2 -2
  4. package/src/ui/Toolkit__Ui_Listbox.res +14 -10
package/.yarn/install-state.gz CHANGED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colisweb/rescript-toolkit",
3
- "version": "3.3.0",
3
+ "version": "3.3.1",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "clean": "rescript clean",
package/playground/components/Playground_Listbox.res CHANGED
@@ -18,7 +18,7 @@ let make = () => {
18
18
  value: "1",
19
19
  },
20
20
  {
21
- label: "Label2",
21
+ label: "Label2 pretty long",
22
22
  value: "2",
23
23
  },
24
24
  {
@@ -46,7 +46,7 @@ let make = () => {
46
46
  )}
47
47
  </div>
48
48
  </div>
49
- <div>
49
+ <div className="w-32">
50
50
  <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
51
51
  {"Listbox uncontrolled defaultOption selected"->React.string}
52
52
  </Label>
package/src/ui/Toolkit__Ui_Listbox.res CHANGED
@@ -114,14 +114,18 @@ let make = (
114
114
  {props => {
115
115
  <>
116
116
  <Listbox.Button
117
- className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
117
+ className="relative flex flex-row items-center justify-between w-full cursor-default rounded-md font-semibold bg-white py-2 pl-3 pr-4 text-left border border-gray-300">
118
118
  {props => {
119
- switch (props.value, placeholder) {
120
- | (None, Some(p)) => p->React.string
121
- | (Some(Some(selectedOption)), _) => selectedOption.label->React.string
122
-
123
- | _ => React.null
124
- }
119
+ <>
120
+ <span className="table-cell truncate text-left">
121
+ {switch (props.value, placeholder) {
122
+ | (None, Some(p)) => p->React.string
123
+ | (Some(Some(selectedOption)), _) => selectedOption.label->React.string
124
+ | _ => React.null
125
+ }}
126
+ </span>
127
+ <ReactIcons.FaAngleDown size={20} />
128
+ </>
125
129
  }}
126
130
  </Listbox.Button>
127
131
  <Transition
@@ -135,7 +139,7 @@ let make = (
135
139
  leaveTo="transform scale-95 opacity-0">
136
140
  <Listbox.Options
137
141
  static={true}
138
- className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-20">
142
+ className="absolute min-w-[250px] mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-20">
139
143
  {options
140
144
  ->Array.mapWithIndex((i, option) => {
141
145
  <Listbox.Option
@@ -153,7 +157,7 @@ let make = (
153
157
  {props.selected
154
158
  ? <div
155
159
  className={cx([
156
- "w-6 h-6 rounded-full border inline-flex items-center justify-center",
160
+ "w-6 h-6 rounded-full border inline-flex items-center justify-center flex-shrink-0",
157
161
  switch option.disabled {
158
162
  | Some(true) => "bg-gray-100 border-gray-200"
159
163
  | _ => "bg-white border-gray-500"
@@ -163,7 +167,7 @@ let make = (
163
167
  </div>
164
168
  : <div
165
169
  className={cx([
166
- "w-6 h-6 rounded-full border border-gray-500 bg-white",
170
+ "w-6 h-6 rounded-full border border-gray-500 bg-white flex-shrink-0",
167
171
  switch option.disabled {
168
172
  | Some(true) => "border-gray-200"
169
173
  | _ => "bg-white border-gray-500"