bianic-ui 2.2.0-beta.2 → 2.2.0
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 +20 -27
- package/dist/cjs/lib.css +1 -1
- package/dist/cjs/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts +1 -2
- 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 +20 -27
- package/dist/esm/lib.css +1 -1
- package/dist/esm/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts +1 -2
- 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 +45 -7
package/dist/cjs/index.js
CHANGED
|
@@ -2172,13 +2172,12 @@ 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' : '';
|
|
2176
2175
|
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" },
|
|
2177
2176
|
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2178
|
-
React.createElement("div", { className: "relative w-full
|
|
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:
|
|
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)),
|
|
2180
2179
|
React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
|
|
2181
|
-
(descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap
|
|
2180
|
+
(descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
|
|
2182
2181
|
React.createElement("span", null, descText),
|
|
2183
2182
|
maxLength && (React.createElement("span", null,
|
|
2184
2183
|
remainWords,
|
|
@@ -2220,10 +2219,10 @@ function Radio(_a) {
|
|
|
2220
2219
|
var validatedSize = validUnion(size, sizeUnion$4);
|
|
2221
2220
|
var _f = sizeConfig$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
|
|
2222
2221
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2223
|
-
React.createElement("div", { className: "
|
|
2224
|
-
React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "
|
|
2225
|
-
React.createElement("div", { className: "check-icon
|
|
2226
|
-
React.createElement("label", { htmlFor: id, className: "ml-2 font-[350]
|
|
2222
|
+
React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
|
|
2223
|
+
React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
|
|
2224
|
+
React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center border-2 border-primary-white peer-disabled:bg-bia-grey-light-80 peer-disabled:border-transparent peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue rounded-full w-full h-full z-1" })),
|
|
2225
|
+
React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
|
|
2227
2226
|
}
|
|
2228
2227
|
Radio.defaultProps = {
|
|
2229
2228
|
label: '',
|
|
@@ -2259,12 +2258,11 @@ function TextArea(_a) {
|
|
|
2259
2258
|
var inputRow = rows !== null && rows !== void 0 ? rows : 4;
|
|
2260
2259
|
var inputClass = sizeConfig$a[size].inputClass;
|
|
2261
2260
|
var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
|
|
2262
|
-
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2263
2261
|
return (React.createElement("div", { className: "field-group group/form flex w-full flex-col gap-y-2" },
|
|
2264
2262
|
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2265
|
-
React.createElement("div", { className: "relative h-fit w-full min-w-[250px]
|
|
2263
|
+
React.createElement("div", { className: "relative h-fit w-full min-w-[250px]" },
|
|
2266
2264
|
React.createElement(ResizeIcon, { className: "absolute bottom-[11px] right-[5px]" }),
|
|
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:
|
|
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))),
|
|
2268
2266
|
React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
|
|
2269
2267
|
descText && React.createElement("span", null, descText),
|
|
2270
2268
|
maxLength && (React.createElement("span", null,
|
|
@@ -2303,7 +2301,7 @@ function Checkbox(_a) {
|
|
|
2303
2301
|
var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
|
|
2304
2302
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2305
2303
|
React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
|
|
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:
|
|
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)),
|
|
2307
2305
|
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" },
|
|
2308
2306
|
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" },
|
|
2309
2307
|
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" })))),
|
|
@@ -2416,13 +2414,12 @@ function SelectInput(_a) {
|
|
|
2416
2414
|
descColor = 'text-bia-green';
|
|
2417
2415
|
if (!disabled && isExistValidation && !isValid)
|
|
2418
2416
|
descColor = 'text-bia-red';
|
|
2419
|
-
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2420
2417
|
return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col" },
|
|
2421
2418
|
React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
|
|
2422
2419
|
childrenElement(label),
|
|
2423
2420
|
required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
|
|
2424
|
-
React.createElement("div", { className: "group relative w-full
|
|
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:
|
|
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)),
|
|
2426
2423
|
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)),
|
|
2427
2424
|
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) {
|
|
2428
2425
|
var isSelected = JSON.stringify(option) === JSON.stringify(selected);
|
|
@@ -2738,7 +2735,7 @@ var useLiveSearch = function (_a) {
|
|
|
2738
2735
|
};
|
|
2739
2736
|
|
|
2740
2737
|
function LiveSearch(_a) {
|
|
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
|
|
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; _a.label; var _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;
|
|
2742
2739
|
var inputRef = React.useRef(null);
|
|
2743
2740
|
var _m = useLiveSearch({
|
|
2744
2741
|
value: value,
|
|
@@ -2757,10 +2754,8 @@ function LiveSearch(_a) {
|
|
|
2757
2754
|
descColor = 'text-bia-red';
|
|
2758
2755
|
var filteredOptions = filterOptions(options || [], value.label);
|
|
2759
2756
|
var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2763
|
-
React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
|
|
2757
|
+
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 " },
|
|
2758
|
+
React.createElement("div", { className: "group relative w-full" },
|
|
2764
2759
|
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) {
|
|
2765
2760
|
onChangeText(e);
|
|
2766
2761
|
handleInputChange(e);
|
|
@@ -2815,13 +2810,11 @@ var sizeConfig$5 = {
|
|
|
2815
2810
|
function Toggle(_a) {
|
|
2816
2811
|
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;
|
|
2817
2812
|
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);
|
|
2820
2813
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2821
|
-
React.createElement("div", { className: "
|
|
2822
|
-
React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " checkbox
|
|
2823
|
-
React.createElement("div", { className: "check-icon
|
|
2824
|
-
React.createElement("label", { htmlFor: id, className: "
|
|
2814
|
+
React.createElement("div", { className: "".concat(containerSize, " rounded-full py-[2px] flex flex-shrink-0 ").concat(checked ? 'justify-end' : 'justify-start', " items-center relative cursor-pointer"), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
|
|
2815
|
+
React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " peer checkbox appearance-none opacity-100 focus:ring-1 focus:ring-offset-2 focus:ring-bia-blue focus:outline-none rounded-full border-bia-grey checked:border-bia-blue bg-primary-white checked:bg-bia-blue checked:hover:bg-bia-blue-hover cursor-pointer hover:border-bia-blue-hover peer-hover:border-bia-blue-hover disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 disabled:border-none border-2 absolute w-full h-full"), type: "checkbox" }),
|
|
2816
|
+
React.createElement("div", { className: "peer check-icon flex m-[2px] text-bia-grey group justify-center border-2 peer-checked:border-bia-blue border-primary-white peer-checked:hover:bg-primary-white peer-checked:bg-primary-white bg-bia-grey peer-checked:peer-hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-dark-10 peer-disabled:border-none peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90 outline-2 rounded-full w-5/12 h-full z-10" })),
|
|
2817
|
+
React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-normal text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
|
|
2825
2818
|
}
|
|
2826
2819
|
Toggle.defaultProps = {
|
|
2827
2820
|
label: '',
|
|
@@ -3296,7 +3289,7 @@ var DateInputDisplay = React.forwardRef(function (_a, ref) {
|
|
|
3296
3289
|
setIsEditing(false);
|
|
3297
3290
|
setDateString(value);
|
|
3298
3291
|
};
|
|
3299
|
-
var input = isEditing
|
|
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 () {
|
|
3300
3293
|
buttonAction && buttonAction();
|
|
3301
3294
|
} },
|
|
3302
3295
|
React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
|