@konstructio/ui 0.1.2-alpha.37 → 0.1.2-alpha.38

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/dist/components/Dropdown/components/Wrapper.js +71 -66
  2. package/dist/index.d.ts +2 -0
  3. package/dist/package.json +1 -1
  4. package/package.json +1 -1
package/dist/components/Dropdown/components/Wrapper.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as d, jsx as t } from "react/jsx-runtime";
1
+ import { jsxs as m, jsx as r } from "react/jsx-runtime";
2
2
  import { forwardRef as Z, useId as ee, useRef as C, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
3
3
  import { S as ne } from "../../../loader-juvMSJ9L.js";
4
4
  import { Typography as se } from "../../Typography/Typography.js";
@@ -12,27 +12,27 @@ import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
12
12
  const de = [
13
13
  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
14
14
  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
15
- ], xe = ue("search", de), be = Z(
15
+ ], xe = ue("search", de), je = Z(
16
16
  ({
17
- additionalOptions: V,
18
- className: O,
17
+ additionalOptions: b,
18
+ className: z,
19
19
  defaultValue: x,
20
- disabled: a = !1,
21
- error: m,
20
+ disabled: t = !1,
21
+ error: f,
22
22
  iconClassName: R,
23
23
  inputClassName: F,
24
- isLoading: k,
24
+ isLoading: g,
25
25
  isRequired: h,
26
26
  label: v,
27
- labelClassName: T,
28
- listClassName: D,
29
- listItemClassName: E,
30
- listItemSecondRowClassName: M,
31
- name: f,
32
- placeholder: N,
33
- searchable: g = !1,
34
- showSearchIcon: w,
35
- theme: S,
27
+ labelClassName: S,
28
+ listClassName: T,
29
+ listItemClassName: D,
30
+ listItemSecondRowClassName: E,
31
+ name: d,
32
+ placeholder: w,
33
+ searchable: k = !1,
34
+ showSearchIcon: N,
35
+ theme: M,
36
36
  wrapperClassName: W,
37
37
  isInfiniteScrollEnabled: _ = !1,
38
38
  onFetchMoreOptions: $,
@@ -50,104 +50,109 @@ const de = [
50
50
  setSearchTerm: G,
51
51
  setCanFilter: J,
52
52
  toggleOpen: K
53
- } = fe(), e = te(() => n.find(({ value: r }) => r === s), [n, s]), { wrapperRef: Q, wrapperInputRef: j, handleOpen: b } = ce({
53
+ } = fe(), e = te(() => n.find(({ value: a }) => a === s), [n, s]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ce({
54
54
  ulRef: L,
55
55
  inputRef: l,
56
- disabled: a,
56
+ disabled: t,
57
57
  internalValue: e,
58
58
  onBlur: H
59
- }), p = f ? `${I}-${f}` : I;
59
+ }), p = d ? `${I}-${d}` : I;
60
60
  ae(q, () => l.current, [l]), re(() => {
61
61
  if (x && !s) {
62
- const r = n && n.find((u) => u.value === x);
63
- r && c(r.value);
62
+ const a = n && n.find((u) => u.value === x);
63
+ a && c(a.value);
64
64
  }
65
65
  }, [x, n, c, s]);
66
- const X = (r) => {
67
- const u = r.target.value;
66
+ const X = (a) => {
67
+ const u = a.target.value;
68
68
  J(!0), c(""), G(u ?? ""), P?.(u);
69
- const z = n.find(
69
+ const O = n.find(
70
70
  (Y) => Y.value.toLocaleLowerCase() === u.toLocaleLowerCase()
71
71
  );
72
- c(z ? z.value : e?.value ?? "");
72
+ c(O ? O.value : e?.value ?? "");
73
73
  };
74
- return /* @__PURE__ */ d(
74
+ return /* @__PURE__ */ m(
75
75
  "div",
76
76
  {
77
77
  ref: Q,
78
78
  className: o("flex flex-col w-full relative", W),
79
- "data-theme": S,
79
+ "data-theme": M,
80
80
  children: [
81
- v ? /* @__PURE__ */ d(
81
+ v ? /* @__PURE__ */ m(
82
82
  "label",
83
83
  {
84
84
  id: p,
85
- className: o(oe({ className: T })),
85
+ className: o(oe({ className: S })),
86
86
  htmlFor: p,
87
- onClick: () => !a && b(),
87
+ onClick: () => !t && j(),
88
88
  children: [
89
89
  v,
90
- h && /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" })
90
+ h && /* @__PURE__ */ r("span", { className: "text-red-600 ml-1", children: "*" })
91
91
  ]
92
92
  }
93
93
  ) : null,
94
- /* @__PURE__ */ d(
94
+ /* @__PURE__ */ m(
95
95
  "div",
96
96
  {
97
- ref: j,
97
+ ref: V,
98
98
  id: p,
99
99
  className: o(
100
- ie({ className: O, hasError: !!m, disabled: a })
100
+ ie({ className: z, hasError: !!f, disabled: t })
101
101
  ),
102
102
  role: "combobox",
103
- onClick: () => !a && K(!i),
103
+ onClick: () => !t && K(!i),
104
104
  "aria-expanded": i,
105
105
  tabIndex: A.current,
106
106
  "aria-labelledby": p,
107
107
  children: [
108
- /* @__PURE__ */ d("div", { className: "flex gap-2.5 items-center flex-1", children: [
109
- e?.leftIcon && !w && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
110
- w && /* @__PURE__ */ t(xe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
111
- g ? /* @__PURE__ */ t(
108
+ /* @__PURE__ */ m("div", { className: "flex gap-2.5 items-center flex-1", children: [
109
+ e?.leftIcon && !N && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
110
+ N && /* @__PURE__ */ r(xe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
111
+ k ? /* @__PURE__ */ r(
112
112
  "input",
113
113
  {
114
114
  type: "text",
115
115
  value: i ? B : e?.label ?? s ?? "",
116
116
  onChange: X,
117
- placeholder: N,
117
+ placeholder: w,
118
118
  className: o(le({ className: F }), {
119
- "text-red-700 placeholder:text-red-700": !!m
119
+ "text-red-700 placeholder:text-red-700": !!f
120
120
  }),
121
- onClick: (r) => {
122
- r.stopPropagation(), a || b();
121
+ onClick: (a) => {
122
+ a.stopPropagation(), t || j();
123
123
  },
124
- "aria-label": v || N,
124
+ "aria-label": v || w,
125
125
  "aria-labelledby": p,
126
126
  required: h,
127
127
  autoComplete: "off",
128
128
  autoCapitalize: "words",
129
- disabled: a,
129
+ disabled: t,
130
130
  tabIndex: -1,
131
131
  ...y
132
132
  }
133
- ) : /* @__PURE__ */ t(
133
+ ) : /* @__PURE__ */ m(
134
134
  se,
135
135
  {
136
136
  variant: "body2",
137
137
  className: o(
138
- "flex-1 text-zinc-400 text-sm dark:text-slate-400",
138
+ "flex-1 text-zinc-400 text-sm dark:text-slate-400 flex gap-2 items-center",
139
139
  {
140
- "text-red-700": !!m,
140
+ "text-red-700": !!f,
141
141
  "select-none": !e,
142
142
  "text-slate-800 dark:text-slate-50": e,
143
- "text-slate-400/50 dark:text-slate-50/50": a
144
- }
143
+ "text-slate-400/50 dark:text-slate-50/50": t
144
+ },
145
+ e?.wrapperClassNameOnSelectedValue
145
146
  ),
146
- children: e?.label || N
147
+ children: [
148
+ e?.label || w,
149
+ " ",
150
+ e?.showRightComponentOnselectedValue ? e?.rightComponent : null
151
+ ]
147
152
  }
148
153
  )
149
154
  ] }),
150
- k ? /* @__PURE__ */ t(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !w && /* @__PURE__ */ t(
155
+ g ? /* @__PURE__ */ r(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !N && /* @__PURE__ */ r(
151
156
  me,
152
157
  {
153
158
  "data-state": i ? "open" : "closed",
@@ -155,8 +160,8 @@ const de = [
155
160
  "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
156
161
  R,
157
162
  {
158
- "text-red-700": !!m,
159
- "text-slate-400/50 dark:group-focus-within:text-zinc-500": a
163
+ "text-red-700": !!f,
164
+ "text-slate-400/50 dark:group-focus-within:text-zinc-500": t
160
165
  }
161
166
  )
162
167
  }
@@ -164,12 +169,12 @@ const de = [
164
169
  ]
165
170
  }
166
171
  ),
167
- /* @__PURE__ */ t(
172
+ /* @__PURE__ */ r(
168
173
  "input",
169
174
  {
170
175
  ref: l,
171
176
  type: "text",
172
- name: f,
177
+ name: d,
173
178
  className: "hidden",
174
179
  "aria-hidden": "true",
175
180
  required: h,
@@ -178,20 +183,20 @@ const de = [
178
183
  ...y
179
184
  }
180
185
  ),
181
- i && /* @__PURE__ */ t(
186
+ i && /* @__PURE__ */ r(
182
187
  pe,
183
188
  {
184
189
  ref: L,
185
- additionalOptions: V,
186
- className: D,
187
- itemClassName: E,
188
- name: f,
189
- wrapperInputRef: j,
190
+ additionalOptions: b,
191
+ className: T,
192
+ itemClassName: D,
193
+ name: d,
194
+ wrapperInputRef: V,
190
195
  inputRef: l,
191
196
  options: n,
192
- isLoading: !!k,
193
- searchable: g,
194
- listItemSecondRowClassName: M,
197
+ isLoading: !!g,
198
+ searchable: k,
199
+ listItemSecondRowClassName: E,
195
200
  isInfiniteScrollEnabled: _,
196
201
  onFetchMoreOptions: $,
197
202
  noOptionsText: U
@@ -203,5 +208,5 @@ const de = [
203
208
  }
204
209
  );
205
210
  export {
206
- be as Wrapper
211
+ je as Wrapper
207
212
  };
package/dist/index.d.ts CHANGED
@@ -477,8 +477,10 @@ declare type Option_3 = {
477
477
  subLabel?: string | ReactNode;
478
478
  leftIcon?: ReactNode | string;
479
479
  leftIconClassName?: string;
480
+ showRightComponentOnselectedValue?: boolean;
480
481
  rightComponent?: ReactNode | string;
481
482
  rightComponentClassName?: string;
483
+ wrapperClassNameOnSelectedValue?: string;
482
484
  value: string;
483
485
  };
484
486
 
package/dist/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@konstructio/ui",
3
3
  "description": "A set of reusable and customizable React components built for konstruct.io",
4
4
  "private": false,
5
- "version": "0.1.2-alpha.36",
5
+ "version": "0.1.2-alpha.37",
6
6
  "type": "module",
7
7
  "license": "MIT",
8
8
  "main": "dist/index.js",
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@konstructio/ui",
3
3
  "description": "A set of reusable and customizable React components built for konstruct.io",
4
4
  "private": false,
5
- "version": "0.1.2-alpha.37",
5
+ "version": "0.1.2-alpha.38",
6
6
  "type": "module",
7
7
  "license": "MIT",
8
8
  "main": "dist/index.js",