pentatrion-design 1.2.3 → 1.2.4

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 (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/components/fields/input-button/index.d.mts +1 -1
  3. package/dist/components/fields/input-button/index.d.mts.map +1 -1
  4. package/dist/components/fields/input-button/index.mjs +87 -76
  5. package/dist/components/fields/input-button/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/fields/input-button/InputButton.tsx +2 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.2.4
2
+
3
+ ### Patch Changes
4
+
5
+ - fix a11y InputButton
6
+
1
7
  ## 1.2.3
2
8
 
3
9
  ### Patch Changes
package/dist/components/fields/input-button/index.d.mts CHANGED
@@ -15,7 +15,7 @@ interface InputButtonProps extends Omit<ComponentPropsWithRef<"div">, "prefix" |
15
15
  onFocus?: FocusEventHandler<HTMLDivElement>;
16
16
  onBlur?: FocusEventHandler<HTMLDivElement>;
17
17
  }
18
- declare function InputButton({ variant, color, disabled, prefix, className, readOnly, size, flexibleWidth, label, placeholder, onClick, onFocus, onBlur, ...rest }: InputButtonProps): import("react").JSX.Element;
18
+ declare function InputButton({ id, variant, color, disabled, prefix, className, readOnly, size, flexibleWidth, label, placeholder, onClick, onFocus, onBlur, ...rest }: InputButtonProps): import("react").JSX.Element;
19
19
  //#endregion
20
20
  export { InputButton };
21
21
  //# sourceMappingURL=index.d.mts.map
package/dist/components/fields/input-button/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/fields/input-button/InputButton.tsx"],"mappings":";;;UAYiB,yBAAyB,KACxC;EAGA;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR;EACA;EAEA;EACA;EACA,UAAU,kBAAkB;EAC5B,UAAU,kBAAkB;EAC5B,SAAS,kBAAkB;;iBAEb,cACd,SACA,OACA,UACA,QACA,WACA,UACA,MACA,eACA,OACA,aACA,SACA,SACA,WACG,QACF,mCAAgB,IAAA"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/fields/input-button/InputButton.tsx"],"mappings":";;;UAYiB,yBAAyB,KACxC;EAGA;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR;EACA;EAEA;EACA;EACA,UAAU,kBAAkB;EAC5B,UAAU,kBAAkB;EAC5B,SAAS,kBAAkB;;iBAEb,cACd,IACA,SACA,OACA,UACA,QACA,WACA,UACA,MACA,eACA,OACA,aACA,SACA,SACA,WACG,QACF,mCAAgB,IAAA"}
package/dist/components/fields/input-button/index.mjs CHANGED
@@ -6,8 +6,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
6
6
  import clsx from "clsx";
7
7
  //#region src/components/fields/input-button/InputButton.tsx
8
8
  function InputButton(t0) {
9
- const $ = c(43);
9
+ const $ = c(47);
10
10
  let className;
11
+ let id;
11
12
  let label;
12
13
  let onBlur;
13
14
  let onClick;
@@ -22,37 +23,39 @@ function InputButton(t0) {
22
23
  let t6;
23
24
  let t7;
24
25
  if ($[0] !== t0) {
25
- ({variant: t1, color: t2, disabled: t3, prefix, className, readOnly: t4, size: t5, flexibleWidth: t6, label, placeholder: t7, onClick, onFocus, onBlur, ...rest} = t0);
26
+ ({id, variant: t1, color: t2, disabled: t3, prefix, className, readOnly: t4, size: t5, flexibleWidth: t6, label, placeholder: t7, onClick, onFocus, onBlur, ...rest} = t0);
26
27
  $[0] = t0;
27
28
  $[1] = className;
28
- $[2] = label;
29
- $[3] = onBlur;
30
- $[4] = onClick;
31
- $[5] = onFocus;
32
- $[6] = prefix;
33
- $[7] = rest;
34
- $[8] = t1;
35
- $[9] = t2;
36
- $[10] = t3;
37
- $[11] = t4;
38
- $[12] = t5;
39
- $[13] = t6;
40
- $[14] = t7;
29
+ $[2] = id;
30
+ $[3] = label;
31
+ $[4] = onBlur;
32
+ $[5] = onClick;
33
+ $[6] = onFocus;
34
+ $[7] = prefix;
35
+ $[8] = rest;
36
+ $[9] = t1;
37
+ $[10] = t2;
38
+ $[11] = t3;
39
+ $[12] = t4;
40
+ $[13] = t5;
41
+ $[14] = t6;
42
+ $[15] = t7;
41
43
  } else {
42
44
  className = $[1];
43
- label = $[2];
44
- onBlur = $[3];
45
- onClick = $[4];
46
- onFocus = $[5];
47
- prefix = $[6];
48
- rest = $[7];
49
- t1 = $[8];
50
- t2 = $[9];
51
- t3 = $[10];
52
- t4 = $[11];
53
- t5 = $[12];
54
- t6 = $[13];
55
- t7 = $[14];
45
+ id = $[2];
46
+ label = $[3];
47
+ onBlur = $[4];
48
+ onClick = $[5];
49
+ onFocus = $[6];
50
+ prefix = $[7];
51
+ rest = $[8];
52
+ t1 = $[9];
53
+ t2 = $[10];
54
+ t3 = $[11];
55
+ t4 = $[12];
56
+ t5 = $[13];
57
+ t6 = $[14];
58
+ t7 = $[15];
56
59
  }
57
60
  const variant = t1 === void 0 ? "normal" : t1;
58
61
  const color = t2 === void 0 ? "yellow" : t2;
@@ -62,7 +65,7 @@ function InputButton(t0) {
62
65
  const flexibleWidth = t6 === void 0 ? true : t6;
63
66
  const placeholder = t7 === void 0 ? "" : t7;
64
67
  let t8;
65
- if ($[15] !== disabled) {
68
+ if ($[16] !== disabled) {
66
69
  t8 = (event) => {
67
70
  if (disabled) return;
68
71
  if (event.key === "Enter" || event.key === " ") {
@@ -70,51 +73,57 @@ function InputButton(t0) {
70
73
  event.currentTarget.click();
71
74
  }
72
75
  };
73
- $[15] = disabled;
74
- $[16] = t8;
75
- } else t8 = $[16];
76
+ $[16] = disabled;
77
+ $[17] = t8;
78
+ } else t8 = $[17];
76
79
  const handleKeyDown = t8;
77
80
  const t9 = disabled ? -1 : 0;
78
81
  const t10 = sizeVariant[size];
79
82
  let t11;
80
- if ($[17] !== className || $[18] !== t10) {
83
+ if ($[18] !== className || $[19] !== t10) {
81
84
  t11 = clsx("w-full cursor-pointer", inputConfig.container, t10, className);
82
- $[17] = className;
83
- $[18] = t10;
84
- $[19] = t11;
85
- } else t11 = $[19];
85
+ $[18] = className;
86
+ $[19] = t10;
87
+ $[20] = t11;
88
+ } else t11 = $[20];
86
89
  let t12;
87
- if ($[20] !== prefix) {
90
+ if ($[21] !== prefix) {
88
91
  t12 = prefix && /* @__PURE__ */ jsx("div", {
89
92
  className: clsx(["flex-center relative", typeof prefix === "string" && "text-gray-6 mx-2 select-none"]),
90
93
  children: prefix
91
94
  });
92
- $[20] = prefix;
93
- $[21] = t12;
94
- } else t12 = $[21];
95
+ $[21] = prefix;
96
+ $[22] = t12;
97
+ } else t12 = $[22];
95
98
  const t13 = flexibleWidth && "w-0";
96
99
  const t14 = !label && "text-gray-5";
97
100
  let t15;
98
- if ($[22] !== t13 || $[23] !== t14) {
101
+ if ($[23] !== t13 || $[24] !== t14) {
99
102
  t15 = clsx("flex flex-1 items-center truncate px-2", t13, t14);
100
- $[22] = t13;
101
- $[23] = t14;
102
- $[24] = t15;
103
- } else t15 = $[24];
103
+ $[23] = t13;
104
+ $[24] = t14;
105
+ $[25] = t15;
106
+ } else t15 = $[25];
104
107
  const t16 = label || placeholder;
105
108
  let t17;
106
- if ($[25] !== t15 || $[26] !== t16) {
109
+ if ($[26] !== t15 || $[27] !== t16) {
107
110
  t17 = /* @__PURE__ */ jsx("div", {
108
111
  className: t15,
109
112
  children: t16
110
113
  });
111
- $[25] = t15;
112
- $[26] = t16;
113
- $[27] = t17;
114
- } else t17 = $[27];
114
+ $[26] = t15;
115
+ $[27] = t16;
116
+ $[28] = t17;
117
+ } else t17 = $[28];
115
118
  let t18;
116
- if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
117
- t18 = /* @__PURE__ */ jsx(Button, {
119
+ if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
120
+ t18 = /* @__PURE__ */ jsx("i", { className: "fe-angle-down" });
121
+ $[29] = t18;
122
+ } else t18 = $[29];
123
+ let t19;
124
+ if ($[30] !== id) {
125
+ t19 = /* @__PURE__ */ jsx(Button, {
126
+ id,
118
127
  color: "gray",
119
128
  withRipple: false,
120
129
  icon: true,
@@ -122,13 +131,14 @@ function InputButton(t0) {
122
131
  focusable: false,
123
132
  type: "button",
124
133
  size: "input",
125
- children: /* @__PURE__ */ jsx("i", { className: "fe-angle-down" })
134
+ children: t18
126
135
  });
127
- $[28] = t18;
128
- } else t18 = $[28];
129
- let t19;
130
- if ($[29] !== color || $[30] !== disabled || $[31] !== handleKeyDown || $[32] !== onBlur || $[33] !== onClick || $[34] !== onFocus || $[35] !== readOnly || $[36] !== rest || $[37] !== t11 || $[38] !== t12 || $[39] !== t17 || $[40] !== t9 || $[41] !== variant) {
131
- t19 = /* @__PURE__ */ jsx("div", {
136
+ $[30] = id;
137
+ $[31] = t19;
138
+ } else t19 = $[31];
139
+ let t20;
140
+ if ($[32] !== color || $[33] !== disabled || $[34] !== handleKeyDown || $[35] !== onBlur || $[36] !== onClick || $[37] !== onFocus || $[38] !== readOnly || $[39] !== rest || $[40] !== t11 || $[41] !== t12 || $[42] !== t17 || $[43] !== t19 || $[44] !== t9 || $[45] !== variant) {
141
+ t20 = /* @__PURE__ */ jsx("div", {
132
142
  className: "w-full",
133
143
  children: /* @__PURE__ */ jsxs("div", {
134
144
  role: "button",
@@ -146,26 +156,27 @@ function InputButton(t0) {
146
156
  children: [
147
157
  t12,
148
158
  t17,
149
- t18
159
+ t19
150
160
  ]
151
161
  })
152
162
  });
153
- $[29] = color;
154
- $[30] = disabled;
155
- $[31] = handleKeyDown;
156
- $[32] = onBlur;
157
- $[33] = onClick;
158
- $[34] = onFocus;
159
- $[35] = readOnly;
160
- $[36] = rest;
161
- $[37] = t11;
162
- $[38] = t12;
163
- $[39] = t17;
164
- $[40] = t9;
165
- $[41] = variant;
166
- $[42] = t19;
167
- } else t19 = $[42];
168
- return t19;
163
+ $[32] = color;
164
+ $[33] = disabled;
165
+ $[34] = handleKeyDown;
166
+ $[35] = onBlur;
167
+ $[36] = onClick;
168
+ $[37] = onFocus;
169
+ $[38] = readOnly;
170
+ $[39] = rest;
171
+ $[40] = t11;
172
+ $[41] = t12;
173
+ $[42] = t17;
174
+ $[43] = t19;
175
+ $[44] = t9;
176
+ $[45] = variant;
177
+ $[46] = t20;
178
+ } else t20 = $[46];
179
+ return t20;
169
180
  }
170
181
  //#endregion
171
182
  export { InputButton };
package/dist/components/fields/input-button/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":["clsx","ComponentPropsWithRef","FocusEventHandler","KeyboardEventHandler","MouseEventHandler","ReactNode","ThemeColor","inputConfig","sizeVariant","Button","InputButtonProps","Omit","label","variant","disabled","prefix","color","size","flexibleWidth","readOnly","placeholder","onClick","HTMLDivElement","onFocus","onBlur","InputButton","t0","$","_c","className","rest","t1","t2","t3","t4","t5","t6","t7","undefined","t8","event","key","preventDefault","currentTarget","click","handleKeyDown","t9","t10","t11","container","t12","t13","t14","t15","t16","t17","t18","Symbol","for","t19"],"sources":["../../../../src/components/fields/input-button/InputButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n ComponentPropsWithRef,\n FocusEventHandler,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport { ThemeColor } from \"../../../types\";\nimport { inputConfig, sizeVariant } from \"../text/Input\";\nimport { Button } from \"../../button\";\n\nexport interface InputButtonProps extends Omit<\n ComponentPropsWithRef<\"div\">,\n \"prefix\" | \"size\" | \"onClick\" | \"onFocus\" | \"onBlur\"\n> {\n label?: string;\n variant?: \"normal\" | \"ghost\";\n disabled?: boolean;\n prefix?: ReactNode;\n color?: ThemeColor;\n size?: \"small\" | \"medium\" | \"large\" | \"custom\";\n flexibleWidth?: boolean;\n\n readOnly?: boolean;\n placeholder?: string;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n onBlur?: FocusEventHandler<HTMLDivElement>;\n}\nexport function InputButton({\n variant = \"normal\",\n color = \"yellow\",\n disabled = false,\n prefix,\n className,\n readOnly = false,\n size = \"medium\",\n flexibleWidth = true,\n label,\n placeholder = \"\",\n onClick,\n onFocus,\n onBlur,\n ...rest\n}: InputButtonProps) {\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n if (disabled) return;\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n return (\n <div className=\"w-full\">\n <div\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n data-color={color}\n data-variant={variant}\n className={clsx(\n \"w-full cursor-pointer\",\n inputConfig.container,\n sizeVariant[size],\n className,\n )}\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {prefix && (\n <div\n className={clsx([\n \"flex-center relative\",\n typeof prefix === \"string\" && \"text-gray-6 mx-2 select-none\",\n ])}\n >\n {prefix}\n </div>\n )}\n <div\n className={clsx(\n \"flex flex-1 items-center truncate px-2\",\n flexibleWidth && \"w-0\",\n !label && \"text-gray-5\",\n )}\n >\n {label || placeholder}\n </div>\n <Button\n color=\"gray\"\n withRipple={false}\n icon\n variant=\"text\"\n focusable={false}\n type=\"button\"\n size=\"input\"\n >\n <i className=\"fe-angle-down\"></i>\n </Button>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;AA8BA,SAAOyB,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAjB;CAAA,IAAAY;CAAA,IAAAH;CAAA,IAAAE;CAAA,IAAAR;CAAA,IAAAe;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAb,SAAAkB,IAAAf,OAAAgB,IAAAlB,UAAAmB,IAAAlB,QAAAc,WAAAV,UAAAe,IAAAjB,MAAAkB,IAAAjB,eAAAkB,IAAAxB,OAAAQ,aAAAiB,IAAAhB,SAAAE,SAAAC,WAAAM,QAAAJ;EAeTC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAf;EAAAe,EAAA,KAAAH;EAAAG,EAAA,KAAAN;EAAAM,EAAA,KAAAJ;EAAAI,EAAA,KAAAZ;EAAAY,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAA;EAAAR,YAAAF,EAAA;EAAAf,QAAAe,EAAA;EAAAH,SAAAG,EAAA;EAAAN,UAAAM,EAAA;EAAAJ,UAAAI,EAAA;EAAAZ,SAAAY,EAAA;EAAAG,OAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAS,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAdjB,MAAAd,UAAAkB,OAAAO,KAAAA,IAAA,WAAAP;CACA,MAAAf,QAAAgB,OAAAM,KAAAA,IAAA,WAAAN;CACA,MAAAlB,WAAAmB,OAAAK,KAAAA,IAAA,QAAAL;CAGA,MAAAd,WAAAe,OAAAI,KAAAA,IAAA,QAAAJ;CACA,MAAAjB,OAAAkB,OAAAG,KAAAA,IAAA,WAAAH;CACA,MAAAjB,gBAAAkB,OAAAE,KAAAA,IAAA,OAAAF;CAEA,MAAAhB,cAAAiB,OAAAC,KAAAA,IAAA,KAAAD;CAAgB,IAAAE;CAAA,IAAAZ,EAAA,QAAAb,UAAA;EAM4CyB,MAAAC,UAAA;GAC1D,IAAI1B,UAAQ;GACZ,IAAI0B,MAAKC,QAAS,WAAWD,MAAKC,QAAS,KAAG;IAC5CD,MAAKE,eAAgB;IACrBF,MAAKG,cAAcC,MAAO;GAAC;EAC5B;EACFjB,EAAA,MAAAb;EAAAa,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAND,MAAAkB,gBAA4DN;CAY5C,MAAAO,KAAAhC,WAAA,KAAA;CAQR,MAAAiC,MAAAvC,YAAYS;CAAK,IAAA+B;CAAA,IAAArB,EAAA,QAAAE,aAAAF,EAAA,QAAAoB,KAAA;EAHRC,MAAAhD,KACT,yBACAO,YAAW0C,WACXF,KACAlB,SACF;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,MAAArB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,QAAAZ,QAAA;EAOAmC,MAAAnC,UACC,oBAAA,OAAA;GACa,WAAAf,KAAK,CACd,wBACA,OAAOe,WAAW,YAAlB,8BAA4D,CAC7D;GAEAA,UAAAA;EACG,CAAA;EACPY,EAAA,MAAAZ;EAAAY,EAAA,MAAAuB;CAAA,OAAAA,MAAAvB,EAAA;CAIG,MAAAwB,MAAAjC,iBAAA;CACA,MAAAkC,MAAA,CAACxC,SAAD;CAAuB,IAAAyC;CAAA,IAAA1B,EAAA,QAAAwB,OAAAxB,EAAA,QAAAyB,KAAA;EAHdC,MAAArD,KACT,0CACAmD,KACAC,GACF;EAACzB,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAEA,MAAA2B,MAAA1C,SAAAQ;CAAoB,IAAAmC;CAAA,IAAA5B,EAAA,QAAA0B,OAAA1B,EAAA,QAAA2B,KAAA;EAPvBC,MAAA,oBAAA,OAAA;GACa,WAAAF;GAMVC,UAAAA;EACG,CAAA;EAAA3B,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;EAAA3B,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,IAAA6B;CAAA,IAAA7B,EAAA,QAAA8B,OAAAC,IAAA,2BAAA,GAAA;EACNF,MAAA,oBAAC,QAAD;GACQ,OAAA;GACM,YAAA;GACZ,MAAA;GACQ,SAAA;GACG,WAAA;GACN,MAAA;GACA,MAAA;GAEL,UAAA,oBAAA,KAAA,EAAa,WAAA,gBAAe,CAAA;EATvB,CAAA;EAUE7B,EAAA,MAAA6B;CAAA,OAAAA,MAAA7B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAX,SAAAW,EAAA,QAAAb,YAAAa,EAAA,QAAAkB,iBAAAlB,EAAA,QAAAH,UAAAG,EAAA,QAAAN,WAAAM,EAAA,QAAAJ,WAAAI,EAAA,QAAAR,YAAAQ,EAAA,QAAAG,QAAAH,EAAA,QAAAqB,OAAArB,EAAA,QAAAuB,OAAAvB,EAAA,QAAA4B,OAAA5B,EAAA,QAAAmB,MAAAnB,EAAA,QAAAd,SAAA;EAjDb8C,MAAA,oBAAA,OAAA;GAAe,WAAA;GACb,UAAA,qBAAA,OAAA;IACO,MAAA;IACK,UAAAb;IACKhC,iBAAAA;IACAK,iBAAAA;IACHH,cAAAA;IACEH,gBAAAA;IACH,WAAAmC;IAMF3B;IACAE;IACDC;IACGqB,WAAAA;IAAa,GACpBf;IAjBN,UAAA;KAmBGoB;KAUDK;KASAC;IAWI;;EACF,CAAA;EAAA7B,EAAA,MAAAX;EAAAW,EAAA,MAAAb;EAAAa,EAAA,MAAAkB;EAAAlB,EAAA,MAAAH;EAAAG,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAR;EAAAQ,EAAA,MAAAG;EAAAH,EAAA,MAAAqB;EAAArB,EAAA,MAAAuB;EAAAvB,EAAA,MAAA4B;EAAA5B,EAAA,MAAAmB;EAAAnB,EAAA,MAAAd;EAAAc,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,OAnDNgC;AAmDM"}
1
+ {"version":3,"file":"index.mjs","names":["clsx","ComponentPropsWithRef","FocusEventHandler","KeyboardEventHandler","MouseEventHandler","ReactNode","ThemeColor","inputConfig","sizeVariant","Button","InputButtonProps","Omit","label","variant","disabled","prefix","color","size","flexibleWidth","readOnly","placeholder","onClick","HTMLDivElement","onFocus","onBlur","InputButton","t0","$","_c","className","id","rest","t1","t2","t3","t4","t5","t6","t7","undefined","t8","event","key","preventDefault","currentTarget","click","handleKeyDown","t9","t10","t11","container","t12","t13","t14","t15","t16","t17","t18","Symbol","for","t19","t20"],"sources":["../../../../src/components/fields/input-button/InputButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n ComponentPropsWithRef,\n FocusEventHandler,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport { ThemeColor } from \"../../../types\";\nimport { inputConfig, sizeVariant } from \"../text/Input\";\nimport { Button } from \"../../button\";\n\nexport interface InputButtonProps extends Omit<\n ComponentPropsWithRef<\"div\">,\n \"prefix\" | \"size\" | \"onClick\" | \"onFocus\" | \"onBlur\"\n> {\n label?: string;\n variant?: \"normal\" | \"ghost\";\n disabled?: boolean;\n prefix?: ReactNode;\n color?: ThemeColor;\n size?: \"small\" | \"medium\" | \"large\" | \"custom\";\n flexibleWidth?: boolean;\n\n readOnly?: boolean;\n placeholder?: string;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n onBlur?: FocusEventHandler<HTMLDivElement>;\n}\nexport function InputButton({\n id,\n variant = \"normal\",\n color = \"yellow\",\n disabled = false,\n prefix,\n className,\n readOnly = false,\n size = \"medium\",\n flexibleWidth = true,\n label,\n placeholder = \"\",\n onClick,\n onFocus,\n onBlur,\n ...rest\n}: InputButtonProps) {\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n if (disabled) return;\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n return (\n <div className=\"w-full\">\n <div\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n data-color={color}\n data-variant={variant}\n className={clsx(\n \"w-full cursor-pointer\",\n inputConfig.container,\n sizeVariant[size],\n className,\n )}\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {prefix && (\n <div\n className={clsx([\n \"flex-center relative\",\n typeof prefix === \"string\" && \"text-gray-6 mx-2 select-none\",\n ])}\n >\n {prefix}\n </div>\n )}\n <div\n className={clsx(\n \"flex flex-1 items-center truncate px-2\",\n flexibleWidth && \"w-0\",\n !label && \"text-gray-5\",\n )}\n >\n {label || placeholder}\n </div>\n <Button\n id={id}\n color=\"gray\"\n withRipple={false}\n icon\n variant=\"text\"\n focusable={false}\n type=\"button\"\n size=\"input\"\n >\n <i className=\"fe-angle-down\"></i>\n </Button>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pentatrion-design",
3
- "version": "1.2.3",
3
+ "version": "1.2.4",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "Hugues Tavernier",
package/src/components/fields/input-button/InputButton.tsx CHANGED
@@ -29,6 +29,7 @@ export interface InputButtonProps extends Omit<
29
29
  onBlur?: FocusEventHandler<HTMLDivElement>;
30
30
  }
31
31
  export function InputButton({
32
+ id,
32
33
  variant = "normal",
33
34
  color = "yellow",
34
35
  disabled = false,
@@ -51,7 +52,6 @@ export function InputButton({
51
52
  event.currentTarget.click();
52
53
  }
53
54
  };
54
-
55
55
  return (
56
56
  <div className="w-full">
57
57
  <div
@@ -93,6 +93,7 @@ export function InputButton({
93
93
  {label || placeholder}
94
94
  </div>
95
95
  <Button
96
+ id={id}
96
97
  color="gray"
97
98
  withRipple={false}
98
99
  icon