@useblu/ocean-react 1.70.0 → 1.71.0

package/index.js

@@ -6675,6 +6675,67 @@ var TextArea = e__default["default"].forwardRef(function (_a, ref) {
 });
 TextArea.displayName = 'TextArea';
 
+var TextListItem = e__default["default"].forwardRef(function (_a, ref) {
+    var title = _a.title, description = _a.description, caption = _a.caption, tagLabel = _a.tagLabel, infoText = _a.infoText, _b = _a.infoTextType, infoTextType = _b === void 0 ? 'neutral' : _b, withAction = _a.withAction, onActionClick = _a.onActionClick, checkbox = _a.checkbox, radio = _a.radio, className = _a.className, rest = __rest$2(_a, ["title", "description", "caption", "tagLabel", "infoText", "infoTextType", "withAction", "onActionClick", "checkbox", "radio", "className"]);
+    var buttonElementRef = e.useRef(null);
+    var divElementRef = e.useRef(null);
+    var _c = e.useState(false), isWide = _c[0], setIsWide = _c[1];
+    e.useEffect(function () {
+        var updateWidth = function () {
+            if (buttonElementRef.current) {
+                var width = buttonElementRef.current.offsetWidth;
+                setIsWide(width >= 992);
+            }
+            if (divElementRef.current) {
+                var width = divElementRef.current.offsetWidth;
+                setIsWide(width >= 992);
+            }
+        };
+        updateWidth();
+        window.addEventListener('resize', updateWidth);
+        return function () {
+            window.removeEventListener('resize', updateWidth);
+        };
+    }, []);
+    var textListitem = e.useMemo(function () { return (e__default["default"].createElement("div", __assign$2({ className: classNames('ods-text-list-item', className, {
+            'ods-text-list-item--with-action': withAction,
+            'ods-text-list-item--wide': isWide,
+            'ods-text-list-item--selectable': checkbox || radio
+        }), ref: ref }, rest),
+        e__default["default"].createElement("div", { className: "ods-text-list-item__default-content" },
+            e__default["default"].createElement("p", { className: "ods-typography ods-typography__paragraph" },
+                title,
+                tagLabel && (e__default["default"].createElement(Tag, { type: "neutral", size: "medium" }, tagLabel))),
+            e__default["default"].createElement("p", { className: "ods-typography ods-typography__description" }, description),
+            caption && (e__default["default"].createElement("p", { className: "ods-typography ods-typography__captionbold" }, caption))),
+        infoText && (e__default["default"].createElement("p", { className: classNames('ods-typography ods-typography__description', 'ods-text-list-item__info-text', "ods-text-list-item__info-text--".concat(infoTextType)) }, infoText)),
+        withAction && e__default["default"].createElement(re, null))); }, [
+        title,
+        description,
+        caption,
+        tagLabel,
+        infoText,
+        infoTextType,
+        withAction,
+        checkbox,
+        radio,
+        className,
+        isWide,
+        ref,
+        rest,
+    ]);
+    if (checkbox) {
+        return (e__default["default"].createElement("div", { className: "ods-text-list-item-selectable", ref: divElementRef },
+            e__default["default"].createElement(Checkbox, __assign$2({}, checkbox, { label: textListitem }))));
+    }
+    if (radio) {
+        return (e__default["default"].createElement("div", { className: "ods-text-list-item-selectable", ref: divElementRef },
+            e__default["default"].createElement(Radio, __assign$2({}, radio, { label: textListitem }))));
+    }
+    return (e__default["default"].createElement("button", { ref: buttonElementRef, onClick: onActionClick, type: "button", className: "ods-text-list-item--button" }, textListitem));
+});
+TextListItem.displayName = 'TextListItem';
+
 var Context = e__default["default"].createContext({});
 
 var Option = e__default["default"].memo(function (option) {
@@ -35804,8 +35865,7 @@ var DatePickerSingle = e__default["default"].forwardRef(function (_a, ref) {
                     label && e__default["default"].createElement("label", { htmlFor: "start-date" }, label),
                     e__default["default"].createElement(Input, { ref: input1Ref, "data-testid": "datepicker-input-1", id: "start-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'start-date'
-                        }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
-                            undefined, maxLength: 10 })),
+                        }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 })),
                 !disabled && showDayPicker && (e__default["default"].createElement("div", { "data-testid": "datepicker-calendar" },
                     e__default["default"].createElement(DayPicker, { mode: "single", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: function (day) { return handleDayClick(day); }, formatters: { formatDay: formatDay }, selected: selectedDay, disabled: disabledDays, defaultMonth: currentMonthToDisplay, components: {
                             Caption: function (_a) {
@@ -36007,14 +36067,12 @@ var DatePickerRange = e__default["default"].forwardRef(function (_a, ref) {
                     labels && labels.from && (e__default["default"].createElement("label", { htmlFor: "start-date" }, labels.from)),
                     e__default["default"].createElement(Input, { ref: input1Ref, "data-testid": "datepicker-input-1", id: "start-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'start-date'
-                        }), name: "start-date", value: values.from, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
-                            undefined, maxLength: 10 })),
+                        }), name: "start-date", value: values.from, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 })),
                 e__default["default"].createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-second-field-wrapper", onClick: function () { return createHandleToggleClick('end-date'); } },
                     labels && labels.to && (e__default["default"].createElement("label", { htmlFor: "end-date" }, labels.to)),
                     e__default["default"].createElement(Input, { ref: input2Ref, "data-testid": "datepicker-input-2", id: "end-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'end-date'
-                        }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
-                            undefined, maxLength: 10 })),
+                        }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 })),
                 !disabled && showDayPicker && (e__default["default"].createElement("div", { "data-testid": "datepicker-calendar" },
                     e__default["default"].createElement(DayPicker, { mode: "range", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: function (day) { return handleDayClick(day); }, onDayMouseEnter: function (day) { return handleDayMouseEnter(day); }, formatters: { formatDay: formatDay }, selected: selectedDays, disabled: disabledDays, defaultMonth: currentMonthToDisplay, components: {
                             Caption: function (_a) {
@@ -48354,6 +48412,7 @@ exports.SubHeader = SubHeader;
 exports.Switch = Switch;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
+exports.TextListItem = TextListItem;
 exports.TokenInput = TokenInput;
 exports.TopBar = TopBar;
 exports.TransactionListItem = TransactionListItem;