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
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
declare const CustomDropdown: ({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps) => React.JSX.Element;
|
|
2
|
+
declare const CustomDropdown: () => React.JSX.Element;
|
|
4
3
|
export default CustomDropdown;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { StoryObj } from
|
|
2
|
-
import React from
|
|
1
|
+
import { StoryObj } from "@storybook/react/*";
|
|
2
|
+
import React from "react";
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: ({ children, ...props }: import("../../../components/Forms/LiveSearch/types").LiveSearchProps) => React.JSX.Element;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: (
|
|
5
|
+
component: () => import("react").JSX.Element;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
8
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -2170,13 +2170,12 @@ var TextInput = forwardRef(function (_a, ref) {
|
|
|
2170
2170
|
if (variant === 'date')
|
|
2171
2171
|
iconElement = React.createElement(TbCalendar, { className: "text-bia-coolgrey", size: 18 });
|
|
2172
2172
|
var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
|
|
2173
|
-
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2174
2173
|
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" },
|
|
2175
2174
|
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2176
|
-
React.createElement("div", { className: "relative w-full
|
|
2177
|
-
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:
|
|
2175
|
+
React.createElement("div", { className: "relative w-full" },
|
|
2176
|
+
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
2177
|
React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
|
|
2179
|
-
(descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap
|
|
2178
|
+
(descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
|
|
2180
2179
|
React.createElement("span", null, descText),
|
|
2181
2180
|
maxLength && (React.createElement("span", null,
|
|
2182
2181
|
remainWords,
|
|
@@ -2218,10 +2217,10 @@ function Radio(_a) {
|
|
|
2218
2217
|
var validatedSize = validUnion(size, sizeUnion$4);
|
|
2219
2218
|
var _f = sizeConfig$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
|
|
2220
2219
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2221
|
-
React.createElement("div", { className: "
|
|
2222
|
-
React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "
|
|
2223
|
-
React.createElement("div", { className: "check-icon
|
|
2224
|
-
React.createElement("label", { htmlFor: id, className: "ml-2 font-[350]
|
|
2220
|
+
React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
|
|
2221
|
+
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 }),
|
|
2222
|
+
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" })),
|
|
2223
|
+
React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
|
|
2225
2224
|
}
|
|
2226
2225
|
Radio.defaultProps = {
|
|
2227
2226
|
label: '',
|
|
@@ -2257,12 +2256,11 @@ function TextArea(_a) {
|
|
|
2257
2256
|
var inputRow = rows !== null && rows !== void 0 ? rows : 4;
|
|
2258
2257
|
var inputClass = sizeConfig$a[size].inputClass;
|
|
2259
2258
|
var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
|
|
2260
|
-
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2261
2259
|
return (React.createElement("div", { className: "field-group group/form flex w-full flex-col gap-y-2" },
|
|
2262
2260
|
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2263
|
-
React.createElement("div", { className: "relative h-fit w-full min-w-[250px]
|
|
2261
|
+
React.createElement("div", { className: "relative h-fit w-full min-w-[250px]" },
|
|
2264
2262
|
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:
|
|
2263
|
+
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))),
|
|
2266
2264
|
React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
|
|
2267
2265
|
descText && React.createElement("span", null, descText),
|
|
2268
2266
|
maxLength && (React.createElement("span", null,
|
|
@@ -2301,7 +2299,7 @@ function Checkbox(_a) {
|
|
|
2301
2299
|
var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
|
|
2302
2300
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2303
2301
|
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:
|
|
2302
|
+
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)),
|
|
2305
2303
|
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
2304
|
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
2305
|
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,13 +2412,12 @@ function SelectInput(_a) {
|
|
|
2414
2412
|
descColor = 'text-bia-green';
|
|
2415
2413
|
if (!disabled && isExistValidation && !isValid)
|
|
2416
2414
|
descColor = 'text-bia-red';
|
|
2417
|
-
var disabledClass = disabled ? 'cursor-not-allowed' : '';
|
|
2418
2415
|
return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col" },
|
|
2419
2416
|
React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
|
|
2420
2417
|
childrenElement(label),
|
|
2421
2418
|
required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
|
|
2422
|
-
React.createElement("div", { className: "group relative w-full
|
|
2423
|
-
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:
|
|
2419
|
+
React.createElement("div", { className: "group relative w-full" },
|
|
2420
|
+
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
2421
|
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)),
|
|
2425
2422
|
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) {
|
|
2426
2423
|
var isSelected = JSON.stringify(option) === JSON.stringify(selected);
|
|
@@ -2736,7 +2733,7 @@ var useLiveSearch = function (_a) {
|
|
|
2736
2733
|
};
|
|
2737
2734
|
|
|
2738
2735
|
function LiveSearch(_a) {
|
|
2739
|
-
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
|
|
2736
|
+
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;
|
|
2740
2737
|
var inputRef = useRef(null);
|
|
2741
2738
|
var _m = useLiveSearch({
|
|
2742
2739
|
value: value,
|
|
@@ -2755,10 +2752,8 @@ function LiveSearch(_a) {
|
|
|
2755
2752
|
descColor = 'text-bia-red';
|
|
2756
2753
|
var filteredOptions = filterOptions(options || [], value.label);
|
|
2757
2754
|
var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
|
|
2761
|
-
React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
|
|
2755
|
+
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 " },
|
|
2756
|
+
React.createElement("div", { className: "group relative w-full" },
|
|
2762
2757
|
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) {
|
|
2763
2758
|
onChangeText(e);
|
|
2764
2759
|
handleInputChange(e);
|
|
@@ -2813,13 +2808,11 @@ var sizeConfig$5 = {
|
|
|
2813
2808
|
function Toggle(_a) {
|
|
2814
2809
|
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;
|
|
2815
2810
|
var _h = sizeConfig$5[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
|
|
2816
|
-
var checkedClass = checked ? 'justify-end' : 'justify-start';
|
|
2817
|
-
var containerClass = "".concat(checkedClass, " ").concat(containerSize);
|
|
2818
2811
|
return (React.createElement("div", { className: "flex items-center" },
|
|
2819
|
-
React.createElement("div", { className: "
|
|
2820
|
-
React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " checkbox
|
|
2821
|
-
React.createElement("div", { className: "check-icon
|
|
2822
|
-
React.createElement("label", { htmlFor: id, className: "
|
|
2812
|
+
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 },
|
|
2813
|
+
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" }),
|
|
2814
|
+
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" })),
|
|
2815
|
+
React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-normal text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
|
|
2823
2816
|
}
|
|
2824
2817
|
Toggle.defaultProps = {
|
|
2825
2818
|
label: '',
|
|
@@ -3294,7 +3287,7 @@ var DateInputDisplay = forwardRef(function (_a, ref) {
|
|
|
3294
3287
|
setIsEditing(false);
|
|
3295
3288
|
setDateString(value);
|
|
3296
3289
|
};
|
|
3297
|
-
var input = isEditing
|
|
3290
|
+
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 () {
|
|
3298
3291
|
buttonAction && buttonAction();
|
|
3299
3292
|
} },
|
|
3300
3293
|
React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
|