@fctc/sme-widget-ui 1.0.8 → 1.0.9

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/dist/index.js +38 -22
  2. package/dist/index.mjs +38 -22
  3. package/dist/widgets.d.mts +1 -1
  4. package/dist/widgets.d.ts +1 -1
  5. package/dist/widgets.js +38 -22
  6. package/dist/widgets.mjs +38 -22
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -33568,15 +33568,8 @@ var SelectDropdownField = (props) => {
33568
33568
  value: val[0],
33569
33569
  label: val[1]
33570
33570
  })) : [];
33571
- if (!isForm) {
33572
- const value2 = options2?.find((item) => item?.value === value2)?.label;
33573
- return value2 && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
33574
- "span",
33575
- {
33576
- className: `${props.className} px-2 py-1 rounded border text-xs font-medium leading-[16px]`,
33577
- children: value2
33578
- }
33579
- );
33571
+ if (!isForm && !isEditTable) {
33572
+ return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
33580
33573
  } else {
33581
33574
  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
33582
33575
  Controller,
@@ -33617,20 +33610,43 @@ var SelectDropdownField = (props) => {
33617
33610
  StateManagedSelect$1,
33618
33611
  {
33619
33612
  ...commonProps,
33620
- classNames: isEditTable ? {
33621
- control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
33622
- valueContainer: () => "!m-0 !p-0",
33623
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33624
- input: () => "!m-0 !p-0",
33625
- dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
33626
- clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
33627
- } : {
33628
- control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
33629
- valueContainer: () => "!m-0 !p-0",
33630
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33631
- input: () => "!m-0 !p-0",
33632
- dropdownIndicator: () => "!m-0 !p-0"
33613
+ styles: {
33614
+ control: (base, state) => ({
33615
+ ...base,
33616
+ display: "flex",
33617
+ minHeight: "44px",
33618
+ cursor: readonly ? "not-allowed" : "pointer",
33619
+ backgroundColor: "#f7f7f7",
33620
+ borderRadius: isEditTable ? "0px" : "10px",
33621
+ padding: "4px 0px",
33622
+ border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
33623
+ boxShadow: "none",
33624
+ "&:hover": {
33625
+ borderColor: "var(--primary)"
33626
+ },
33627
+ ...isEditTable && {
33628
+ minWidth: "300px",
33629
+ maxWidth: "300px",
33630
+ borderBottom: "1px solid transparent",
33631
+ background: "transparent"
33632
+ }
33633
+ }),
33634
+ clearIndicator: (base) => ({
33635
+ ...base,
33636
+ padding: "0"
33637
+ }),
33638
+ menuPortal: (base) => ({
33639
+ ...base,
33640
+ zIndex: 9999
33641
+ }),
33642
+ menu: (base) => ({
33643
+ ...base,
33644
+ zIndex: 9999,
33645
+ width: isEditTable ? "300px" : "100%",
33646
+ minWidth: isEditTable ? "300px" : "100%"
33647
+ })
33633
33648
  },
33649
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33634
33650
  components: {
33635
33651
  IndicatorSeparator: () => null,
33636
33652
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(components.DropdownIndicator, { ...props2 })
package/dist/index.mjs CHANGED
@@ -33449,15 +33449,8 @@ var SelectDropdownField = (props) => {
33449
33449
  value: val[0],
33450
33450
  label: val[1]
33451
33451
  })) : [];
33452
- if (!isForm) {
33453
- const value2 = options2?.find((item) => item?.value === value2)?.label;
33454
- return value2 && /* @__PURE__ */ jsx97(
33455
- "span",
33456
- {
33457
- className: `${props.className} px-2 py-1 rounded border text-xs font-medium leading-[16px]`,
33458
- children: value2
33459
- }
33460
- );
33452
+ if (!isForm && !isEditTable) {
33453
+ return /* @__PURE__ */ jsx97("span", { children: options2?.find((item) => item?.value === value)?.label });
33461
33454
  } else {
33462
33455
  return /* @__PURE__ */ jsx97(
33463
33456
  Controller,
@@ -33498,20 +33491,43 @@ var SelectDropdownField = (props) => {
33498
33491
  StateManagedSelect$1,
33499
33492
  {
33500
33493
  ...commonProps,
33501
- classNames: isEditTable ? {
33502
- control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
33503
- valueContainer: () => "!m-0 !p-0",
33504
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33505
- input: () => "!m-0 !p-0",
33506
- dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
33507
- clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
33508
- } : {
33509
- control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
33510
- valueContainer: () => "!m-0 !p-0",
33511
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33512
- input: () => "!m-0 !p-0",
33513
- dropdownIndicator: () => "!m-0 !p-0"
33494
+ styles: {
33495
+ control: (base, state) => ({
33496
+ ...base,
33497
+ display: "flex",
33498
+ minHeight: "44px",
33499
+ cursor: readonly ? "not-allowed" : "pointer",
33500
+ backgroundColor: "#f7f7f7",
33501
+ borderRadius: isEditTable ? "0px" : "10px",
33502
+ padding: "4px 0px",
33503
+ border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
33504
+ boxShadow: "none",
33505
+ "&:hover": {
33506
+ borderColor: "var(--primary)"
33507
+ },
33508
+ ...isEditTable && {
33509
+ minWidth: "300px",
33510
+ maxWidth: "300px",
33511
+ borderBottom: "1px solid transparent",
33512
+ background: "transparent"
33513
+ }
33514
+ }),
33515
+ clearIndicator: (base) => ({
33516
+ ...base,
33517
+ padding: "0"
33518
+ }),
33519
+ menuPortal: (base) => ({
33520
+ ...base,
33521
+ zIndex: 9999
33522
+ }),
33523
+ menu: (base) => ({
33524
+ ...base,
33525
+ zIndex: 9999,
33526
+ width: isEditTable ? "300px" : "100%",
33527
+ minWidth: isEditTable ? "300px" : "100%"
33528
+ })
33514
33529
  },
33530
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33515
33531
  components: {
33516
33532
  IndicatorSeparator: () => null,
33517
33533
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx97(components.DropdownIndicator, { ...props2 })
package/dist/widgets.d.mts CHANGED
@@ -277,7 +277,7 @@ interface ISelectDropdownProps extends IInputFieldProps {
277
277
  selection?: [string | number, string][] | any;
278
278
  }
279
279
 
280
- declare const SelectDropdownField: (props: ISelectDropdownProps) => any;
280
+ declare const SelectDropdownField: (props: ISelectDropdownProps) => JSX.Element;
281
281
 
282
282
  declare const TextAreaField: (props: IInputFieldProps) => JSX.Element;
283
283
 
package/dist/widgets.d.ts CHANGED
@@ -277,7 +277,7 @@ interface ISelectDropdownProps extends IInputFieldProps {
277
277
  selection?: [string | number, string][] | any;
278
278
  }
279
279
 
280
- declare const SelectDropdownField: (props: ISelectDropdownProps) => any;
280
+ declare const SelectDropdownField: (props: ISelectDropdownProps) => JSX.Element;
281
281
 
282
282
  declare const TextAreaField: (props: IInputFieldProps) => JSX.Element;
283
283
 
package/dist/widgets.js CHANGED
@@ -33213,15 +33213,8 @@ var SelectDropdownField = (props) => {
33213
33213
  value: val[0],
33214
33214
  label: val[1]
33215
33215
  })) : [];
33216
- if (!isForm) {
33217
- const value2 = options2?.find((item) => item?.value === value2)?.label;
33218
- return value2 && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
33219
- "span",
33220
- {
33221
- className: `${props.className} px-2 py-1 rounded border text-xs font-medium leading-[16px]`,
33222
- children: value2
33223
- }
33224
- );
33216
+ if (!isForm && !isEditTable) {
33217
+ return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
33225
33218
  } else {
33226
33219
  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
33227
33220
  Controller,
@@ -33262,20 +33255,43 @@ var SelectDropdownField = (props) => {
33262
33255
  StateManagedSelect$1,
33263
33256
  {
33264
33257
  ...commonProps,
33265
- classNames: isEditTable ? {
33266
- control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
33267
- valueContainer: () => "!m-0 !p-0",
33268
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33269
- input: () => "!m-0 !p-0",
33270
- dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
33271
- clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
33272
- } : {
33273
- control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
33274
- valueContainer: () => "!m-0 !p-0",
33275
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33276
- input: () => "!m-0 !p-0",
33277
- dropdownIndicator: () => "!m-0 !p-0"
33258
+ styles: {
33259
+ control: (base, state) => ({
33260
+ ...base,
33261
+ display: "flex",
33262
+ minHeight: "44px",
33263
+ cursor: readonly ? "not-allowed" : "pointer",
33264
+ backgroundColor: "#f7f7f7",
33265
+ borderRadius: isEditTable ? "0px" : "10px",
33266
+ padding: "4px 0px",
33267
+ border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
33268
+ boxShadow: "none",
33269
+ "&:hover": {
33270
+ borderColor: "var(--primary)"
33271
+ },
33272
+ ...isEditTable && {
33273
+ minWidth: "300px",
33274
+ maxWidth: "300px",
33275
+ borderBottom: "1px solid transparent",
33276
+ background: "transparent"
33277
+ }
33278
+ }),
33279
+ clearIndicator: (base) => ({
33280
+ ...base,
33281
+ padding: "0"
33282
+ }),
33283
+ menuPortal: (base) => ({
33284
+ ...base,
33285
+ zIndex: 9999
33286
+ }),
33287
+ menu: (base) => ({
33288
+ ...base,
33289
+ zIndex: 9999,
33290
+ width: isEditTable ? "300px" : "100%",
33291
+ minWidth: isEditTable ? "300px" : "100%"
33292
+ })
33278
33293
  },
33294
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33279
33295
  components: {
33280
33296
  IndicatorSeparator: () => null,
33281
33297
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(components.DropdownIndicator, { ...props2 })
package/dist/widgets.mjs CHANGED
@@ -33151,15 +33151,8 @@ var SelectDropdownField = (props) => {
33151
33151
  value: val[0],
33152
33152
  label: val[1]
33153
33153
  })) : [];
33154
- if (!isForm) {
33155
- const value2 = options2?.find((item) => item?.value === value2)?.label;
33156
- return value2 && /* @__PURE__ */ jsx97(
33157
- "span",
33158
- {
33159
- className: `${props.className} px-2 py-1 rounded border text-xs font-medium leading-[16px]`,
33160
- children: value2
33161
- }
33162
- );
33154
+ if (!isForm && !isEditTable) {
33155
+ return /* @__PURE__ */ jsx97("span", { children: options2?.find((item) => item?.value === value)?.label });
33163
33156
  } else {
33164
33157
  return /* @__PURE__ */ jsx97(
33165
33158
  Controller,
@@ -33200,20 +33193,43 @@ var SelectDropdownField = (props) => {
33200
33193
  StateManagedSelect$1,
33201
33194
  {
33202
33195
  ...commonProps,
33203
- classNames: isEditTable ? {
33204
- control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
33205
- valueContainer: () => "!m-0 !p-0",
33206
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33207
- input: () => "!m-0 !p-0",
33208
- dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
33209
- clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
33210
- } : {
33211
- control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
33212
- valueContainer: () => "!m-0 !p-0",
33213
- singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
33214
- input: () => "!m-0 !p-0",
33215
- dropdownIndicator: () => "!m-0 !p-0"
33196
+ styles: {
33197
+ control: (base, state) => ({
33198
+ ...base,
33199
+ display: "flex",
33200
+ minHeight: "44px",
33201
+ cursor: readonly ? "not-allowed" : "pointer",
33202
+ backgroundColor: "#f7f7f7",
33203
+ borderRadius: isEditTable ? "0px" : "10px",
33204
+ padding: "4px 0px",
33205
+ border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
33206
+ boxShadow: "none",
33207
+ "&:hover": {
33208
+ borderColor: "var(--primary)"
33209
+ },
33210
+ ...isEditTable && {
33211
+ minWidth: "300px",
33212
+ maxWidth: "300px",
33213
+ borderBottom: "1px solid transparent",
33214
+ background: "transparent"
33215
+ }
33216
+ }),
33217
+ clearIndicator: (base) => ({
33218
+ ...base,
33219
+ padding: "0"
33220
+ }),
33221
+ menuPortal: (base) => ({
33222
+ ...base,
33223
+ zIndex: 9999
33224
+ }),
33225
+ menu: (base) => ({
33226
+ ...base,
33227
+ zIndex: 9999,
33228
+ width: isEditTable ? "300px" : "100%",
33229
+ minWidth: isEditTable ? "300px" : "100%"
33230
+ })
33216
33231
  },
33232
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33217
33233
  components: {
33218
33234
  IndicatorSeparator: () => null,
33219
33235
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx97(components.DropdownIndicator, { ...props2 })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",