infinity-ui-elements 1.9.19 → 1.9.21
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.
- package/dist/components/Avatar/Avatar.d.ts +4 -0
- package/dist/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/components/SearchableDropdown/SearchableDropdown.d.ts.map +1 -1
- package/dist/components/SearchableDropdown/SearchableDropdown.stories.d.ts +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/SelectTextField/SelectTextField.d.ts.map +1 -1
- package/dist/index.esm.js +71 -39
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +71 -39
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -59,6 +59,10 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, Varia
|
|
|
59
59
|
* Custom class name for the container (when label or trailingComponent is provided)
|
|
60
60
|
*/
|
|
61
61
|
containerClassName?: string;
|
|
62
|
+
/**
|
|
63
|
+
* Custom class name for the label
|
|
64
|
+
*/
|
|
65
|
+
labelClassName?: string;
|
|
62
66
|
}
|
|
63
67
|
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
64
68
|
export { Avatar, avatarVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AAU9C,QAAA,MAAM,cAAc;;;mFAsBnB,CAAC;AA0BF,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACtE;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,oFAgHX,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/SearchableDropdown/SearchableDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG/E,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1E;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,IAAI,EAAE,sBAAsB,GAAG,SAAS,KACrC,IAAI,CAAC;CACX;AAaD,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"SearchableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/SearchableDropdown/SearchableDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG/E,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1E;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,IAAI,EAAE,sBAAsB,GAAG,SAAS,KACrC,IAAI,CAAC;CACX;AAaD,eAAO,MAAM,kBAAkB,kGAud9B,CAAC"}
|
|
@@ -327,6 +327,7 @@ declare const meta: {
|
|
|
327
327
|
src?: string | undefined | undefined;
|
|
328
328
|
alt?: string | undefined | undefined;
|
|
329
329
|
containerClassName?: string | undefined;
|
|
330
|
+
labelClassName?: string | undefined;
|
|
330
331
|
helperText?: string | undefined;
|
|
331
332
|
validationState?: "none" | "positive" | "negative" | undefined;
|
|
332
333
|
accept?: string | undefined | undefined;
|
|
@@ -339,7 +340,6 @@ declare const meta: {
|
|
|
339
340
|
readOnly?: boolean | undefined | undefined;
|
|
340
341
|
required?: boolean | undefined | undefined;
|
|
341
342
|
errorText?: string | undefined;
|
|
342
|
-
labelClassName?: string | undefined;
|
|
343
343
|
isOptional?: boolean | undefined;
|
|
344
344
|
isRequired?: boolean | undefined;
|
|
345
345
|
infoHeading?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTextField.d.ts","sourceRoot":"","sources":["../../../src/components/SelectTextField/SelectTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectTextField.d.ts","sourceRoot":"","sources":["../../../src/components/SelectTextField/SelectTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,cAAc,EACd,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CACjD;IACD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAChC;AAED,QAAA,MAAM,qBAAqB;;;;mFAyB1B,CAAC;AAEF,eAAO,MAAM,eAAe,+FAiZ3B,CAAC;AAIF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1079,33 +1079,6 @@ const Amount = React.forwardRef(({ value, currency, locale = "en-US", minimumFra
|
|
|
1079
1079
|
});
|
|
1080
1080
|
Amount.displayName = "Amount";
|
|
1081
1081
|
|
|
1082
|
-
// Helper function to get the text utility class name
|
|
1083
|
-
function getTextClassName(variant = "body", size = "medium", weight = "regular", color = "default") {
|
|
1084
|
-
// Build the base class name
|
|
1085
|
-
let baseClass = `text-${variant}`;
|
|
1086
|
-
// Add size
|
|
1087
|
-
if (size) {
|
|
1088
|
-
baseClass += `-${size}`;
|
|
1089
|
-
}
|
|
1090
|
-
// Add weight
|
|
1091
|
-
if (weight) {
|
|
1092
|
-
baseClass += `-${weight}`;
|
|
1093
|
-
}
|
|
1094
|
-
// Add color class separately
|
|
1095
|
-
const colorClass = `text-color-${color}`;
|
|
1096
|
-
return `${baseClass} ${colorClass}`;
|
|
1097
|
-
}
|
|
1098
|
-
const Text = React.forwardRef(({ className, variant = "body", size = "medium", weight = "regular", color = "default", as = "p", children, ...props }, ref) => {
|
|
1099
|
-
const Component = as;
|
|
1100
|
-
const textClass = getTextClassName(variant, size, weight, color);
|
|
1101
|
-
return React.createElement(Component, {
|
|
1102
|
-
className: cn(textClass, className),
|
|
1103
|
-
ref,
|
|
1104
|
-
...props,
|
|
1105
|
-
}, children);
|
|
1106
|
-
});
|
|
1107
|
-
Text.displayName = "Text";
|
|
1108
|
-
|
|
1109
1082
|
const inverseColorClasses = {
|
|
1110
1083
|
a1: "bg-avatar-fill-a1-on-bg text-avatar-fill-a1-bg",
|
|
1111
1084
|
a2: "bg-avatar-fill-a2-on-bg text-avatar-fill-a2-bg",
|
|
@@ -1153,7 +1126,7 @@ const statusVariants = cva("absolute flex items-center justify-center rounded-fu
|
|
|
1153
1126
|
statusColor: "notice",
|
|
1154
1127
|
},
|
|
1155
1128
|
});
|
|
1156
|
-
const Avatar = React.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
|
|
1129
|
+
const Avatar = React.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, labelClassName, ...props }, ref) => {
|
|
1157
1130
|
const [imageError, setImageError] = React.useState(false);
|
|
1158
1131
|
const handleImageError = () => {
|
|
1159
1132
|
setImageError(true);
|
|
@@ -1168,14 +1141,14 @@ const Avatar = React.forwardRef(({ className, appearance = "default", color, siz
|
|
|
1168
1141
|
return "h-4 w-4";
|
|
1169
1142
|
}
|
|
1170
1143
|
};
|
|
1171
|
-
const
|
|
1144
|
+
const getTextClass = () => {
|
|
1172
1145
|
switch (size) {
|
|
1173
1146
|
case "small":
|
|
1174
|
-
return "small";
|
|
1147
|
+
return "text-body-small-medium text-color-default";
|
|
1175
1148
|
case "medium":
|
|
1176
|
-
return "medium";
|
|
1149
|
+
return "text-body-medium-medium text-color-default";
|
|
1177
1150
|
default:
|
|
1178
|
-
return "medium";
|
|
1151
|
+
return "text-body-medium-medium text-color-default";
|
|
1179
1152
|
}
|
|
1180
1153
|
};
|
|
1181
1154
|
const resolvedColor = color ?? "a1";
|
|
@@ -1187,7 +1160,7 @@ const Avatar = React.forwardRef(({ className, appearance = "default", color, siz
|
|
|
1187
1160
|
return jsx("div", { ref: ref, children: avatarElement });
|
|
1188
1161
|
}
|
|
1189
1162
|
// Otherwise, return avatar with label and/or trailing component
|
|
1190
|
-
return (jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-3", containerClassName), children: [avatarElement, label &&
|
|
1163
|
+
return (jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-3", containerClassName), children: [avatarElement, label && jsx("p", { className: cn(getTextClass(), labelClassName), children: label }), trailingComponent && (jsx("span", { className: "ml-auto", children: trailingComponent }))] }));
|
|
1191
1164
|
});
|
|
1192
1165
|
Avatar.displayName = "Avatar";
|
|
1193
1166
|
|
|
@@ -1317,6 +1290,33 @@ const Badge = React.forwardRef(({ className, variant, size, color, showDot = fal
|
|
|
1317
1290
|
});
|
|
1318
1291
|
Badge.displayName = "Badge";
|
|
1319
1292
|
|
|
1293
|
+
// Helper function to get the text utility class name
|
|
1294
|
+
function getTextClassName(variant = "body", size = "medium", weight = "regular", color = "default") {
|
|
1295
|
+
// Build the base class name
|
|
1296
|
+
let baseClass = `text-${variant}`;
|
|
1297
|
+
// Add size
|
|
1298
|
+
if (size) {
|
|
1299
|
+
baseClass += `-${size}`;
|
|
1300
|
+
}
|
|
1301
|
+
// Add weight
|
|
1302
|
+
if (weight) {
|
|
1303
|
+
baseClass += `-${weight}`;
|
|
1304
|
+
}
|
|
1305
|
+
// Add color class separately
|
|
1306
|
+
const colorClass = `text-color-${color}`;
|
|
1307
|
+
return `${baseClass} ${colorClass}`;
|
|
1308
|
+
}
|
|
1309
|
+
const Text = React.forwardRef(({ className, variant = "body", size = "medium", weight = "regular", color = "default", as = "p", children, ...props }, ref) => {
|
|
1310
|
+
const Component = as;
|
|
1311
|
+
const textClass = getTextClassName(variant, size, weight, color);
|
|
1312
|
+
return React.createElement(Component, {
|
|
1313
|
+
className: cn(textClass, className),
|
|
1314
|
+
ref,
|
|
1315
|
+
...props,
|
|
1316
|
+
}, children);
|
|
1317
|
+
});
|
|
1318
|
+
Text.displayName = "Text";
|
|
1319
|
+
|
|
1320
1320
|
const dividerVariants = cva("", {
|
|
1321
1321
|
variants: {
|
|
1322
1322
|
orientation: {
|
|
@@ -3477,10 +3477,22 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
|
|
|
3477
3477
|
const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
|
|
3478
3478
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
3479
3479
|
const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
|
|
3480
|
+
const [isMobile, setIsMobile] = React.useState(false);
|
|
3480
3481
|
const containerRef = React.useRef(null);
|
|
3481
3482
|
const dropdownContainerRef = React.useRef(null);
|
|
3482
3483
|
const inputRef = React.useRef(null);
|
|
3483
3484
|
React.useImperativeHandle(ref, () => inputRef.current);
|
|
3485
|
+
// Detect if we're on mobile (< 768px)
|
|
3486
|
+
React.useEffect(() => {
|
|
3487
|
+
const checkMobile = () => {
|
|
3488
|
+
setIsMobile(window.innerWidth < 768);
|
|
3489
|
+
};
|
|
3490
|
+
// Check on mount
|
|
3491
|
+
checkMobile();
|
|
3492
|
+
// Add resize listener
|
|
3493
|
+
window.addEventListener('resize', checkMobile);
|
|
3494
|
+
return () => window.removeEventListener('resize', checkMobile);
|
|
3495
|
+
}, []);
|
|
3484
3496
|
const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
|
|
3485
3497
|
// Find the selected option
|
|
3486
3498
|
const selectedOption = options.find((opt) => opt.value === value);
|
|
@@ -3637,9 +3649,11 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
|
|
|
3637
3649
|
// Build the suffix: include both the optional suffix and the chevron icon
|
|
3638
3650
|
const chevronIcon = (jsx(Icon, { name: isOpen ? "chevronUp" : "chevronDown", size: 16, className: "shrink-0 transition-colors" }));
|
|
3639
3651
|
const displaySuffix = suffix ? (jsxs(Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
|
|
3640
|
-
|
|
3652
|
+
// Render dropdown menu content
|
|
3653
|
+
const renderDropdownContent = () => (jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
|
|
3654
|
+
return (jsxs("div", { ref: containerRef, className: "relative w-full", children: [jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (isMobile ? (jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
|
|
3641
3655
|
? "top-full mt-1"
|
|
3642
|
-
: "bottom-full mb-1"), children:
|
|
3656
|
+
: "bottom-full mb-1"), children: renderDropdownContent() })))] }));
|
|
3643
3657
|
});
|
|
3644
3658
|
Select.displayName = "Select";
|
|
3645
3659
|
|
|
@@ -4352,14 +4366,18 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
4352
4366
|
? true
|
|
4353
4367
|
: false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), unstyled: isMobile }));
|
|
4354
4368
|
// Mobile: BottomSheet, Desktop: Regular Dropdown
|
|
4355
|
-
const dropdownMenu = showDropdown && (isMobile ? (
|
|
4369
|
+
const dropdownMenu = showDropdown && (isMobile ? (jsxs(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: [jsx("div", { className: "mb-4", children: jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", autoFocus: true, ...textFieldProps }) }), renderDropdownContent()] })) : (jsx("div", { ref: menuRef, style: {
|
|
4356
4370
|
position: "absolute",
|
|
4357
4371
|
top: `${position.top + 8}px`,
|
|
4358
4372
|
left: `${position.left}px`,
|
|
4359
4373
|
width: dropdownWidth === "full" ? `${position.width}px` : "auto",
|
|
4360
4374
|
zIndex: isInsideModal ? 10001 : 9999,
|
|
4361
4375
|
}, children: renderDropdownContent() })));
|
|
4362
|
-
return (jsxs(Fragment, { children: [
|
|
4376
|
+
return (jsxs(Fragment, { children: [jsxs("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: [!isMobile && (jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps })), isMobile && (jsx(TextField, { ref: inputRef, value: searchValue, onFocus: () => {
|
|
4377
|
+
if (showOnFocus && searchValue.length >= minSearchLength) {
|
|
4378
|
+
setIsOpen(true);
|
|
4379
|
+
}
|
|
4380
|
+
}, onClick: () => setIsOpen(true), readOnly: true, containerClassName: "mb-0", ...textFieldProps }))] }), typeof document !== "undefined" &&
|
|
4363
4381
|
dropdownMenu &&
|
|
4364
4382
|
createPortal(dropdownMenu, document.body)] }));
|
|
4365
4383
|
});
|
|
@@ -4537,9 +4555,21 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
|
|
|
4537
4555
|
const [uncontrolledSelectValue, setUncontrolledSelectValue] = React.useState(defaultSelectValue);
|
|
4538
4556
|
const [isSelectOpen, setIsSelectOpen] = React.useState(false);
|
|
4539
4557
|
const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
|
|
4558
|
+
const [isMobile, setIsMobile] = React.useState(false);
|
|
4540
4559
|
const selectRef = React.useRef(null);
|
|
4541
4560
|
const dropdownContainerRef = React.useRef(null);
|
|
4542
4561
|
const componentRef = React.useRef(null);
|
|
4562
|
+
// Detect if we're on mobile (< 768px)
|
|
4563
|
+
React.useEffect(() => {
|
|
4564
|
+
const checkMobile = () => {
|
|
4565
|
+
setIsMobile(window.innerWidth < 768);
|
|
4566
|
+
};
|
|
4567
|
+
// Check on mount
|
|
4568
|
+
checkMobile();
|
|
4569
|
+
// Add resize listener
|
|
4570
|
+
window.addEventListener('resize', checkMobile);
|
|
4571
|
+
return () => window.removeEventListener('resize', checkMobile);
|
|
4572
|
+
}, []);
|
|
4543
4573
|
const textValue = controlledTextValue !== undefined
|
|
4544
4574
|
? controlledTextValue
|
|
4545
4575
|
: uncontrolledTextValue;
|
|
@@ -4687,6 +4717,8 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
|
|
|
4687
4717
|
gap: "gap-3",
|
|
4688
4718
|
},
|
|
4689
4719
|
};
|
|
4720
|
+
// Render dropdown menu content
|
|
4721
|
+
const renderDropdownContent = () => (jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
|
|
4690
4722
|
// Create the select component (prefix or suffix)
|
|
4691
4723
|
const selectComponent = (jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
|
|
4692
4724
|
size,
|
|
@@ -4704,9 +4736,9 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
|
|
|
4704
4736
|
? "text-feedback-ink-positive-intense"
|
|
4705
4737
|
: currentValidationState === "negative"
|
|
4706
4738
|
? "text-feedback-ink-negative-subtle"
|
|
4707
|
-
: "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
|
|
4739
|
+
: "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (isMobile ? (jsx(BottomSheet, { isOpen: isSelectOpen, onClose: () => handleSelectOpenChange(false), title: selectSectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
|
|
4708
4740
|
? "top-[30px] mt-1"
|
|
4709
|
-
: "bottom-full mb-1"), children:
|
|
4741
|
+
: "bottom-full mb-1"), children: renderDropdownContent() })))] }));
|
|
4710
4742
|
return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, ...(position === "prefix"
|
|
4711
4743
|
? { prefix: selectComponent }
|
|
4712
4744
|
: { suffix: selectComponent }), size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
|