bianic-ui 2.2.0-beta.0 → 2.2.0-beta.2
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/cjs/index.js +27 -20
- package/dist/cjs/lib.css +1 -1
- package/dist/cjs/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts +2 -1
- package/dist/cjs/types/stories/Form/LiveSearch/LivesearchCustomDropdownExample.stories.d.ts +2 -2
- package/dist/cjs/types/stories/Form/SelectInput/SelectInputCustom.stories.d.ts +1 -1
- package/dist/esm/index.js +27 -20
- package/dist/esm/lib.css +1 -1
- package/dist/esm/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts +2 -1
- package/dist/esm/types/stories/Form/LiveSearch/LivesearchCustomDropdownExample.stories.d.ts +2 -2
- package/dist/esm/types/stories/Form/SelectInput/SelectInputCustom.stories.d.ts +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2172,12 +2172,13 @@ var TextInput = React.forwardRef(function (_a, ref) {
|
|
|
2172
2172
|
if (variant === 'date')
|
|
2173
2173
|
iconElement = React.createElement(TbCalendar, { className: "text-bia-coolgrey", size: 18 });
|
|
2174
2174
|
var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
|
|
2175
|
+
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2175
2176
|
return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black" },
|
|
2176
2177
|
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2177
|
-
React.createElement("div", { className: "relative w-full" },
|
|
2178
|
-
React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
|
|
2178
|
+
React.createElement("div", { className: "relative w-full ".concat(disabledClass) },
|
|
2179
|
+
React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
|
|
2179
2180
|
React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
|
|
2180
|
-
(descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs
|
|
2181
|
+
(descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap text-xs ".concat(descColor) },
|
|
2181
2182
|
React.createElement("span", null, descText),
|
|
2182
2183
|
maxLength && (React.createElement("span", null,
|
|
2183
2184
|
remainWords,
|
|
@@ -2219,10 +2220,10 @@ function Radio(_a) {
|
|
|
2219
2220
|
var validatedSize = validUnion(size, sizeUnion$4);
|
|
2220
2221
|
var _f = sizeConfig$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
|
|
2221
2222
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2222
|
-
React.createElement("div", { className: "
|
|
2223
|
-
React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer
|
|
2224
|
-
React.createElement("div", { className: "check-icon flex
|
|
2225
|
-
React.createElement("label", { htmlFor: id, className: "ml-2
|
|
2223
|
+
React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkSize) },
|
|
2224
|
+
React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-bia-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 checked:disabled:border-bia-blue-disabled", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
|
|
2225
|
+
React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full border-2 border-primary-white text-bia-grey outline-2 outline-bia-blue peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:border-transparent peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled" })),
|
|
2226
|
+
React.createElement("label", { htmlFor: id, className: "ml-2 font-[350] leading-4 ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
|
|
2226
2227
|
}
|
|
2227
2228
|
Radio.defaultProps = {
|
|
2228
2229
|
label: '',
|
|
@@ -2258,11 +2259,12 @@ function TextArea(_a) {
|
|
|
2258
2259
|
var inputRow = rows !== null && rows !== void 0 ? rows : 4;
|
|
2259
2260
|
var inputClass = sizeConfig$a[size].inputClass;
|
|
2260
2261
|
var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
|
|
2262
|
+
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2261
2263
|
return (React.createElement("div", { className: "field-group group/form flex w-full flex-col gap-y-2" },
|
|
2262
2264
|
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2263
|
-
React.createElement("div", { className: "relative h-fit w-full min-w-[250px]" },
|
|
2265
|
+
React.createElement("div", { className: "relative h-fit w-full min-w-[250px] ".concat(disabledClass) },
|
|
2264
2266
|
React.createElement(ResizeIcon, { className: "absolute bottom-[11px] right-[5px]" }),
|
|
2265
|
-
React.createElement("textarea", __assign({ className: "field bianic-text-area w-full rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
|
|
2267
|
+
React.createElement("textarea", __assign({ className: "field bianic-text-area w-full rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
|
|
2266
2268
|
React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
|
|
2267
2269
|
descText && React.createElement("span", null, descText),
|
|
2268
2270
|
maxLength && (React.createElement("span", null,
|
|
@@ -2301,7 +2303,7 @@ function Checkbox(_a) {
|
|
|
2301
2303
|
var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
|
|
2302
2304
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2303
2305
|
React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
|
|
2304
|
-
React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
|
|
2306
|
+
React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
|
|
2305
2307
|
React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-2 peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50" },
|
|
2306
2308
|
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-checked:peer-hover:group-[]:fill-primary-white peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
|
|
2307
2309
|
React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
|
|
@@ -2414,12 +2416,13 @@ function SelectInput(_a) {
|
|
|
2414
2416
|
descColor = 'text-bia-green';
|
|
2415
2417
|
if (!disabled && isExistValidation && !isValid)
|
|
2416
2418
|
descColor = 'text-bia-red';
|
|
2419
|
+
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2417
2420
|
return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col" },
|
|
2418
2421
|
React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
|
|
2419
2422
|
childrenElement(label),
|
|
2420
2423
|
required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
|
|
2421
|
-
React.createElement("div", { className: "group relative w-full" },
|
|
2422
|
-
React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
|
|
2424
|
+
React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
|
|
2425
|
+
React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
|
|
2423
2426
|
React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
|
|
2424
2427
|
children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
|
|
2425
2428
|
var isSelected = JSON.stringify(option) === JSON.stringify(selected);
|
|
@@ -2735,7 +2738,7 @@ var useLiveSearch = function (_a) {
|
|
|
2735
2738
|
};
|
|
2736
2739
|
|
|
2737
2740
|
function LiveSearch(_a) {
|
|
2738
|
-
var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id
|
|
2741
|
+
var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
|
|
2739
2742
|
var inputRef = React.useRef(null);
|
|
2740
2743
|
var _m = useLiveSearch({
|
|
2741
2744
|
value: value,
|
|
@@ -2754,8 +2757,10 @@ function LiveSearch(_a) {
|
|
|
2754
2757
|
descColor = 'text-bia-red';
|
|
2755
2758
|
var filteredOptions = filterOptions(options || [], value.label);
|
|
2756
2759
|
var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
|
|
2757
|
-
|
|
2758
|
-
|
|
2760
|
+
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2761
|
+
return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2" },
|
|
2762
|
+
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2763
|
+
React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
|
|
2759
2764
|
React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
|
|
2760
2765
|
onChangeText(e);
|
|
2761
2766
|
handleInputChange(e);
|
|
@@ -2810,11 +2815,13 @@ var sizeConfig$5 = {
|
|
|
2810
2815
|
function Toggle(_a) {
|
|
2811
2816
|
var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
|
|
2812
2817
|
var _h = sizeConfig$5[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
|
|
2818
|
+
var checkedClass = checked ? 'justify-end' : 'justify-start';
|
|
2819
|
+
var containerClass = "".concat(checkedClass, " ").concat(containerSize);
|
|
2813
2820
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2814
|
-
React.createElement("div", { className: "
|
|
2815
|
-
React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, "
|
|
2816
|
-
React.createElement("div", { className: "
|
|
2817
|
-
React.createElement("label", { htmlFor: id, className: "ml-2
|
|
2821
|
+
React.createElement("div", { className: "relative flex flex-shrink-0 cursor-pointer items-center rounded-full py-[2px] ".concat(containerClass), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
|
|
2822
|
+
React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " checkbox peer absolute h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-grey bg-primary-white opacity-100 checked:border-bia-blue checked:bg-bia-blue hover:border-bia-blue-hover checked:hover:bg-bia-blue-hover focus:outline-none focus:ring-1 focus:ring-bia-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-none disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 peer-hover:border-bia-blue-hover"), type: "checkbox" }),
|
|
2823
|
+
React.createElement("div", { className: "check-icon group peer z-10 m-[2px] flex h-full w-5/12 justify-center rounded-full border-2 border-primary-white bg-bia-grey text-bia-grey outline-2 peer-checked:border-bia-blue peer-checked:bg-primary-white peer-checked:hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-checked:peer-hover:bg-primary-white peer-disabled:cursor-not-allowed peer-disabled:border-none peer-disabled:bg-bia-grey-dark-10 peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90" })),
|
|
2824
|
+
React.createElement("label", { htmlFor: id, className: "text-grey-800 ml-2 font-normal leading-4 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
|
|
2818
2825
|
}
|
|
2819
2826
|
Toggle.defaultProps = {
|
|
2820
2827
|
label: '',
|
|
@@ -3289,7 +3296,7 @@ var DateInputDisplay = React.forwardRef(function (_a, ref) {
|
|
|
3289
3296
|
setIsEditing(false);
|
|
3290
3297
|
setDateString(value);
|
|
3291
3298
|
};
|
|
3292
|
-
var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
|
|
3299
|
+
var input = isEditing || disabled ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, disabled: disabled, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey disabled:cursor-not-allowed", disabled: disabled, onClick: function () {
|
|
3293
3300
|
buttonAction && buttonAction();
|
|
3294
3301
|
} },
|
|
3295
3302
|
React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
|