@useblu/ocean-react 1.119.0 → 1.123.0

package/index.js

@@ -282,12 +282,6 @@ var Tag = e.forwardRef(function (_a, ref) {
 });
 Tag.displayName = 'Tag';
 
-var List = e.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    return (e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-list', className) }, rest), children));
-});
-List.displayName = 'List';
-
 var SubHeader = e.forwardRef(function (_a, ref) {
     var children = _a.children, subtitle = _a.subtitle, className = _a.className, rest = __rest$1(_a, ["children", "subtitle", "className"]);
     return (e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-sub-header', className) }, rest),
@@ -296,6 +290,12 @@ var SubHeader = e.forwardRef(function (_a, ref) {
 });
 SubHeader.displayName = 'SubHeader';
 
+var List = e.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
+    return (e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-list', className) }, rest), children));
+});
+List.displayName = 'List';
+
 var TransactionListItem = e.forwardRef(function (_a, ref) {
     var children = _a.children, level2 = _a.level2, level3 = _a.level3, level4 = _a.level4, icon = _a.icon, value = _a.value, positive = _a.positive, tags = _a.tags, time = _a.time, subItens = _a.subItens, className = _a.className, withChevron = _a.withChevron, readOnly = _a.readOnly, isLoading = _a.isLoading, rest = __rest$1(_a, ["children", "level2", "level3", "level4", "icon", "value", "positive", "tags", "time", "subItens", "className", "withChevron", "readOnly", "isLoading"]);
     return (e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-transaction-list-item', { 'ods-transaction-list-item--chevron': withChevron }, { 'ods-transaction-list-item--readonly': readOnly }, { 'ods-transaction-list-item--isloading': isLoading }, className) }, rest),
@@ -469,7 +469,9 @@ Badge.displayName = 'Badge';
 
 var Header = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, count = _a.count, tag = _a.tag;
-    return (e.createElement("div", { className: "ods-card-group__header" },
+    return (e.createElement("div", { className: classNames('ods-card-group__header', {
+            'ods-card-group__header--without-subtitle': !subtitle,
+        }) },
         e.createElement("div", { className: "ods-card-group__header--content" },
             e.createElement("div", { className: "container-line" },
                 e.createElement("p", { className: "ods-typography ods-typography__heading4" }, title),
@@ -493,9 +495,7 @@ var CardGroup = e.forwardRef(function (_a, ref) {
     var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, count = _a.count, tag = _a.tag, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionCount", "actionClick", "count", "tag", "children", "variant"]);
     return (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-group", className: classNames('ods-card-group', "ods-card-group--".concat(variant)) }),
         (title || subtitle) && (e.createElement(Header, { title: title, subtitle: subtitle, count: count, tag: tag })),
-        children && variant !== 'header' && (e.createElement(e.Fragment, null,
-            (title || subtitle) && e.createElement("hr", { className: "ods-divider" }),
-            e.createElement("div", null, children))),
+        children && variant !== 'header' && e.createElement("div", null, children),
         actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionCount: actionCount, actionClick: actionClick }))));
 });
 CardGroup.displayName = 'CardGroup';
@@ -5118,6 +5118,59 @@ var Carousel = function (_a) {
         e.createElement(Slider, __assign$1({}, settings), e.Children.toArray(children).map(function (child, index) { return (e.createElement("div", { key: index }, child)); }))));
 };
 
+var ContextualMenuItem = function (_a) {
+    var _b;
+    var label = _a.label, value = _a.value, icon = _a.icon, onClick = _a.onClick, type = _a.type, disabled = _a.disabled, blocked = _a.blocked, tag = _a.tag, id = _a.id, selectedValue = _a.selectedValue;
+    var handleClick = function (e) {
+        e.stopPropagation();
+        onClick();
+    };
+    var isSelected = selectedValue === value;
+    return (e.createElement("button", { type: "button", onClick: handleClick, disabled: disabled, id: id, className: classNames('ods-contextual-menu__item__button', "ods-contextual-menu__item__button--".concat(type), (_b = {},
+            _b["ods-contextual-menu__item__button--".concat(type, "-selected")] = isSelected,
+            _b['ods-contextual-menu__item__button--blocked'] = blocked,
+            _b['ods-contextual-menu__item__button--with-icon'] = icon,
+            _b)) },
+        icon && (e.createElement("span", { className: classNames('ods-contextual-menu__item__button__icon', "ods-contextual-menu__item__button__icon--".concat(type), {
+                'ods-contextual-menu__item__button__icon--disabled': disabled,
+                'ods-contextual-menu__item__button__icon--blocked': blocked,
+            }) }, icon)),
+        e.createElement("div", { className: "ods-contextual-menu__item__button__content" },
+            e.createElement("p", { className: "ods-typography ods-typography__description" }, label),
+            blocked && e.createElement(At, { size: 16 }),
+            tag && e.createElement(Tag, __assign$1({ size: "small", setIconOff: true }, tag)))));
+};
+
+function IconButtonBase(_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, component = _a.component, rest = __rest$1(_a, ["children", "className", "size", "disabled", "component"]);
+    return e.createElement(component || 'button', __assign$1({ ref: ref, className: classNames('ods-icon-btn', "ods-icon-btn--".concat(size), disabled && 'ods-icon-btn--disabled', className) }, rest), children);
+}
+var IconButton = e.forwardRef(IconButtonBase);
+
+var ContextualMenu = function (_a) {
+    var items = _a.items, open = _a.open, onOpenChange = _a.onOpenChange, onSelect = _a.onSelect, selectedValue = _a.selectedValue, className = _a.className;
+    var handleClose = function () {
+        onOpenChange(false);
+    };
+    return (e.createElement(e.Fragment, null,
+        e.createElement("div", { className: classNames('ods-contextual-menu__overlay', {
+                'ods-contextual-menu__overlay--after-open': open,
+                'ods-contextual-menu__overlay--before-close': !open,
+            }), onClick: handleClose, "aria-hidden": "true", "data-testid": "contextual-menu-overlay" }),
+        e.createElement("ul", { className: classNames('ods-contextual-menu', className, {
+                'ods-contextual-menu--after-open': open,
+                'ods-contextual-menu--before-close': !open,
+            }) },
+            e.createElement("li", { className: "ods-contextual-menu__header" },
+                e.createElement(IconButton, { size: "sm", onClick: handleClose, "aria-label": "Fechar menu" },
+                    e.createElement(Wa, null))),
+            items.map(function (item, index) { return (e.createElement("li", { key: item.id || item.value || index, className: "ods-contextual-menu__item" },
+                e.createElement(ContextualMenuItem, __assign$1({}, item, { onClick: function () {
+                        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
+                        onOpenChange(false);
+                    }, selectedValue: selectedValue })))); }))));
+};
+
 function useInputFilled(_a) {
     var value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange;
     var _b = e.useState(Boolean(value || defaultValue)), filled = _b[0], setFilled = _b[1];
@@ -8800,12 +8853,6 @@ var Divider = e.forwardRef(function (_a, ref) {
 });
 Divider.displayName = 'Divider';
 
-function IconButtonBase(_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, component = _a.component, rest = __rest$1(_a, ["children", "className", "size", "disabled", "component"]);
-    return e.createElement(component || 'button', __assign$1({ ref: ref, className: classNames('ods-icon-btn', "ods-icon-btn--".concat(size), disabled && 'ods-icon-btn--disabled', className) }, rest), children);
-}
-var IconButton = e.forwardRef(IconButtonBase);
-
 var Search = e.forwardRef(function (_a, ref) {
     var className = _a.className, id = _a.id, disabled = _a.disabled, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, onChange = _a.onChange, rest = __rest$1(_a, ["className", "id", "disabled", "value", "defaultValue", "placeholder", "onChange"]);
     var _b = useInputFilled({
@@ -46975,14 +47022,18 @@ var Shortcut = function (_a) {
 
 var CardListItem = e.forwardRef(function (_a, ref) {
     var title = _a.title, description = _a.description, caption = _a.caption, leadingIcon = _a.leadingIcon, actionIcon = _a.actionIcon, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, onClick = _a.onClick, loading = _a.loading, tag = _a.tag, rest = __rest$1(_a, ["title", "description", "caption", "leadingIcon", "actionIcon", "size", "disabled", "fullWidth", "onClick", "loading", "tag"]);
-    return loading ? (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--full-width': fullWidth }, {
-            'ods-card-list-item--loading': loading,
-        }) }),
-        e.createElement("div", { className: "ods-card-list-item__circle" }),
-        e.createElement("div", { className: "ods-card-list-item__lines" },
-            e.createElement("div", { className: "ods-card-list-item__lines__line1" }),
-            e.createElement("div", { className: "ods-card-list-item__lines__line2" }),
-            size === 'medium' && (e.createElement("div", { className: "ods-card-list-item__lines__line3" }))))) : (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--disabled': disabled }, { 'ods-card-list-item--full-width': fullWidth }), onClick: function () {
+    var tagElement = typeof tag === 'string' ? (e.createElement(Tag, { variant: "highlight", type: "important" }, tag)) : (e.createElement(Tag, __assign$1({}, tag)));
+    if (loading) {
+        return (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--full-width': fullWidth }, {
+                'ods-card-list-item--loading': loading,
+            }) }),
+            e.createElement("div", { className: "ods-card-list-item__circle" }),
+            e.createElement("div", { className: "ods-card-list-item__lines" },
+                e.createElement("div", { className: "ods-card-list-item__lines__line1" }),
+                e.createElement("div", { className: "ods-card-list-item__lines__line2" }),
+                size === 'medium' && (e.createElement("div", { className: "ods-card-list-item__lines__line3" })))));
+    }
+    return (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--disabled': disabled }, { 'ods-card-list-item--full-width': fullWidth }), onClick: function () {
             if (!disabled && onClick)
                 onClick();
         } }),
@@ -46992,49 +47043,94 @@ var CardListItem = e.forwardRef(function (_a, ref) {
             description && (e.createElement("div", { className: "ods-card-list-item__content__description" }, description)),
             caption && size === 'medium' && (e.createElement("div", { className: "ods-card-list-item__content__caption" }, caption))),
         e.createElement("div", { className: "ods-card-list-item__wrapper" },
-            tag && (e.createElement(Tag, { variant: "highlight", type: "important" }, tag)),
+            tag && tagElement,
             actionIcon && (e.createElement("div", { className: "ods-card-list-item__action" }, actionIcon)))));
 });
 CardListItem.displayName = 'CardListItem';
 
-var Options = function (_a) {
-    var options = _a.options, selectedOptions = _a.selectedOptions, clearLabel = _a.clearLabel, filterLabel = _a.filterLabel, multiChoice = _a.multiChoice, onSelect = _a.onSelect, filterOptions = _a.filterOptions, clearOptions = _a.clearOptions;
-    var columns = multiChoice ? Math.ceil(options.length / 5) : 1;
-    var isMultiArray = Array.isArray(selectedOptions);
-    return (e.createElement("div", { className: "ods-chips__options", "data-testid": "ods-chips-option" },
-        e.createElement("div", { className: classNames('ods-chips__options--content', "ods-chips__options--content--columns-".concat(columns)) }, options.map(function (_a) {
-            var label = _a.label, value = _a.value;
-            if (multiChoice && isMultiArray) {
-                var isSelected_1 = selectedOptions.some(function (option) { return option.value === value; });
-                return (e.createElement("div", { key: value, className: classNames('ods-chips__options--option', 'ods-chips__options--option-container', {
-                        'ods-chips__options--option--selected': isSelected_1,
-                    }) },
-                    e.createElement(Checkbox, { checked: isSelected_1, id: "chips-option-".concat(value), onClick: function () { return onSelect(label, value); }, readOnly: true, label: label })));
+var MultipleChoiceOptions = function (_a) {
+    var options = _a.options, selectedOptions = _a.selectedOptions, clearLabel = _a.clearLabel, filterLabel = _a.filterLabel, multiChoice = _a.multiChoice, onSelect = _a.onSelect, clearOptions = _a.clearOptions, filterOptions = _a.filterOptions, headerOptions = _a.headerOptions, selectionIsOpen = _a.selectionIsOpen, handleContextMenuOpenChange = _a.handleContextMenuOpenChange, selectAllOptions = _a.selectAllOptions;
+    var isMobile = useMedia$1('(max-width: 768px)');
+    var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+    var selectedValues = selectedArray.map(function (option) { return option.value; });
+    var allOptionsSelected = selectedValues.length === options.length && options.length > 0;
+    var someOptionsSelected = selectedValues.length > 0 && selectedValues.length < options.length;
+    var handleSelectAllOptions = function () {
+        if (!Array.isArray(selectedOptions)) {
+            return;
+        }
+        if (allOptionsSelected) {
+            selectedArray.forEach(function (_a) {
+                var label = _a.label, value = _a.value;
+                onSelect(label, value);
+            });
+            return;
+        }
+        options.forEach(function (option) {
+            if (!selectedValues.includes(option.value)) {
+                onSelect(option.label, option.value);
             }
-            var isSelected = !multiChoice && !isMultiArray && selectedOptions.value === value;
-            return (e.createElement("button", { key: value, type: "button", value: value, onClick: function () { return onSelect(label, value); }, className: classNames('ods-chips__options--option', {
-                    'ods-chips__options--option--selected': isSelected,
-                }) }, label));
-        })),
-        multiChoice && (e.createElement("div", { className: "ods-chips__options--footer" },
-            e.createElement("button", { type: "button", onClick: clearOptions, className: "ods-btn ods-btn--sm ods-btn--text" }, clearLabel),
-            e.createElement("button", { type: "button", onClick: filterOptions, className: "ods-btn ods-btn--sm ods-btn--primary" }, filterLabel)))));
+        });
+    };
+    if (!multiChoice) {
+        return null;
+    }
+    var isMultiArray = Array.isArray(selectedOptions);
+    var contextualOverlayClasses = classNames('ods-contextual-menu__overlay', {
+        'ods-contextual-menu__overlay--after-open': selectionIsOpen,
+        'ods-contextual-menu__overlay--before-close': !selectionIsOpen,
+    });
+    var responsivePrimaryBtnClasses = isMobile
+        ? 'ods-btn ods-btn--md ods-btn--primary'
+        : 'ods-btn ods-btn--sm ods-btn--primary';
+    var responsiveSecondaryBtnClasses = isMobile
+        ? 'ods-btn ods-btn--md ods-btn--secondary'
+        : 'ods-btn ods-btn--sm ods-btn--secondary';
+    return (e.createElement(e.Fragment, null,
+        e.createElement("div", { className: contextualOverlayClasses, onClick: function () { return handleContextMenuOpenChange(false); }, "aria-hidden": "true", "data-testid": "ods-chips-multiselect-overlay" }),
+        e.createElement("div", { className: "ods-chips__options", "data-testid": "ods-chips-option" },
+            e.createElement("div", { className: "ods-chips__options__responsive-header" },
+                e.createElement(IconButton, { size: "sm", onClick: function () { return handleContextMenuOpenChange(false); }, "aria-label": "Fechar menu" },
+                    e.createElement(Wa, null))),
+            selectAllOptions && (e.createElement("div", { className: "ods-chips__options__select-all" },
+                e.createElement(ListSelectable, { status: "highlight", type: "text", title: "Selecionar todos", checkbox: {
+                        id: 'select-all',
+                        checked: allOptionsSelected || someOptionsSelected,
+                        indeterminate: someOptionsSelected,
+                        onChange: function () { return handleSelectAllOptions(); },
+                    }, platform: isMobile ? 'app' : 'web' }))),
+            headerOptions && (e.createElement("div", { className: "ods-chips__options__header" }, headerOptions)),
+            options.map(function (_a, index) {
+                var label = _a.label, value = _a.value, indicator = _a.indicator, disabled = _a.disabled, indeterminate = _a.indeterminate;
+                var isSelected = Array.isArray(selectedOptions)
+                    ? selectedOptions.some(function (option) { return option.value === value; })
+                    : selectedOptions.value === value;
+                return (e.createElement("div", { key: value },
+                    e.createElement(ListSelectable, { inverted: true, indicator: indicator, type: "text", title: label, showDivider: index !== options.length - 1, platform: isMobile ? 'app' : 'web', checkbox: {
+                            id: "chips-option-".concat(value),
+                            checked: isSelected,
+                            onClick: function () { return onSelect(label, value); },
+                            readOnly: true,
+                            disabled: disabled,
+                            indeterminate: indeterminate || false,
+                        } })));
+            }),
+            e.createElement("div", { className: "ods-chips__options--footer" },
+                e.createElement("button", { type: "button", onClick: clearOptions, className: responsiveSecondaryBtnClasses, disabled: !isMultiArray || selectedOptions.length === 0 }, clearLabel),
+                e.createElement("button", { type: "button", onClick: filterOptions, className: responsivePrimaryBtnClasses }, filterLabel)))));
 };
 
-var Chips = function (_a) {
-    var label = _a.label, icon = _a.icon, disabled = _a.disabled, defaultValue = _a.defaultValue, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.multiChoice, multiChoice = _c === void 0 ? false : _c, _d = _a.clearLabel, clearLabel = _d === void 0 ? 'Limpar' : _d, _e = _a.filterLabel, filterLabel = _e === void 0 ? 'Filtrar' : _e, initialCounter = _a.initialCounter, actived = _a.actived, selectedValue = _a.selectedValue, onClick = _a.onClick, onChange = _a.onChange, onClose = _a.onClose, onConfirm = _a.onConfirm, onClean = _a.onClean;
+var shouldDefaultToEmpty = function (defaultValue, multiChoice) { return Boolean(defaultValue) || Boolean(multiChoice); };
+var useChip = function (_a) {
+    var defaultValue = _a.defaultValue, _b = _a.multiChoice, multiChoice = _b === void 0 ? false : _b, onChange = _a.onChange, onClean = _a.onClean, onConfirm = _a.onConfirm, onClose = _a.onClose, onClick = _a.onClick, _c = _a.options, options = _c === void 0 ? [] : _c, selectedValue = _a.selectedValue;
     var wrapperRef = e.useRef(null);
-    var _f = e.useState(0), counter = _f[0], setCounter = _f[1];
-    var _g = e.useState(false), selectionIsOpen = _g[0], setSelectionIsOpen = _g[1];
-    var _h = e.useState(defaultValue || multiChoice ? [] : { label: '', value: '' }), selectedOptions = _h[0], setSelectedOptions = _h[1];
-    function handleClickOutside(event) {
-        var target = event.target;
-        if (wrapperRef.current && !wrapperRef.current.contains(target)) {
-            setSelectionIsOpen(false);
-            if (onClose && selectionIsOpen)
-                onClose();
-        }
-    }
+    var _d = e.useState(0), counter = _d[0], setCounter = _d[1];
+    var _e = e.useState(false), selectionIsOpen = _e[0], setSelectionIsOpen = _e[1];
+    var _f = e.useState(function () {
+        return shouldDefaultToEmpty(defaultValue, multiChoice)
+            ? []
+            : { label: '', value: '' };
+    }), selectedOptions = _f[0], setSelectedOptions = _f[1];
     e.useEffect(function () {
         if (selectedValue && selectedValue !== selectedOptions) {
             setSelectedOptions(selectedValue);
@@ -47044,84 +47140,166 @@ var Chips = function (_a) {
         }
     }, [selectedValue]);
     e.useEffect(function () {
+        var handleClickOutside = function (event) {
+            var target = event.target;
+            if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+                setSelectionIsOpen(false);
+                if (onClose && selectionIsOpen) {
+                    onClose();
+                }
+            }
+        };
         document.addEventListener('mousedown', handleClickOutside);
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [wrapperRef, selectionIsOpen]);
-    var handleClickChips = function () {
-        if (options && (options === null || options === void 0 ? void 0 : options.length) > 0) {
-            setSelectionIsOpen(!selectionIsOpen);
+    }, [onClose, selectionIsOpen]);
+    var handleClickChips = e.useCallback(function () {
+        if (options.length > 0) {
+            setSelectionIsOpen(function (prev) { return !prev; });
         }
         if (onClick) {
             onClick();
         }
-    };
-    var handleSelectOption = function (labelProp, value) {
+    }, [options.length, onClick]);
+    var handleSelectOption = e.useCallback(function (labelProp, value) {
         if (!multiChoice) {
-            setSelectedOptions({ label: labelProp, value: value });
+            var nextSelection = { label: labelProp, value: value };
+            setSelectedOptions(nextSelection);
             setSelectionIsOpen(false);
-            if (onClose)
-                onClose();
             if (onChange) {
-                onChange({ label: labelProp, value: value });
+                onChange(nextSelection);
             }
             return;
         }
-        if (Array.isArray(selectedOptions)) {
-            var copyOptions = __spreadArray$1([], selectedOptions, true);
-            if (selectedOptions.find(function (option) { return option.value === value; })) {
+        setSelectedOptions(function (prev) {
+            if (!Array.isArray(prev)) {
+                return prev;
+            }
+            var copyOptions = __spreadArray$1([], prev, true);
+            if (copyOptions.find(function (option) { return option.value === value; })) {
                 copyOptions = copyOptions.filter(function (option) { return option.value !== value; });
             }
             else {
-                copyOptions.push({ label: labelProp, value: value });
+                var matchedOption = options.find(function (option) { return option.value === value; });
+                copyOptions.push(matchedOption !== null && matchedOption !== void 0 ? matchedOption : { label: labelProp, value: value });
             }
             setCounter(copyOptions.length);
-            setSelectedOptions(copyOptions);
             if (onChange) {
                 onChange(copyOptions);
             }
-        }
-    };
-    var displayValue = function () {
-        if (!Array.isArray(selectedOptions)) {
-            return selectedOptions.value ? selectedOptions.label : label;
-        }
-        return label;
-    };
-    var clearOptions = function () {
+            return copyOptions;
+        });
+    }, [multiChoice, onChange, options]);
+    var clearOptions = e.useCallback(function () {
         setSelectedOptions([]);
         setCounter(0);
         setSelectionIsOpen(false);
-        if (onChange)
+        if (onChange) {
             onChange([]);
-        if (onClean)
+        }
+        if (onClean) {
             onClean();
-        if (onClose)
+        }
+        if (onClose) {
             onClose();
-    };
-    var filterOptions = function () {
+        }
+    }, [onChange, onClean, onClose]);
+    var filterOptions = e.useCallback(function () {
         setSelectionIsOpen(false);
-        if (onConfirm)
+        if (onConfirm) {
             onConfirm(selectedOptions);
-        if (onClose)
+        }
+        if (onClose) {
+            onClose();
+        }
+    }, [onConfirm, onClose, selectedOptions]);
+    var handleContextMenuOpenChange = e.useCallback(function (open) {
+        if (!open && selectionIsOpen && onClose) {
             onClose();
+        }
+        setSelectionIsOpen(open);
+    }, [onClose, selectionIsOpen]);
+    return {
+        clearOptions: clearOptions,
+        counter: counter,
+        filterOptions: filterOptions,
+        handleClickChips: handleClickChips,
+        handleContextMenuOpenChange: handleContextMenuOpenChange,
+        handleSelectOption: handleSelectOption,
+        selectionIsOpen: selectionIsOpen,
+        selectedOptions: selectedOptions,
+        wrapperRef: wrapperRef,
     };
+};
+
+var Chips = function (_a) {
+    var label = _a.label, icon = _a.icon, disabled = _a.disabled, defaultValue = _a.defaultValue, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.multiChoice, multiChoice = _c === void 0 ? false : _c, _d = _a.clearLabel, clearLabel = _d === void 0 ? 'Limpar' : _d, _e = _a.filterLabel, filterLabel = _e === void 0 ? 'Filtrar' : _e, initialCounter = _a.initialCounter, actived = _a.actived, selectedValue = _a.selectedValue, onClick = _a.onClick, onChange = _a.onChange, onClose = _a.onClose, onConfirm = _a.onConfirm, onClean = _a.onClean, headerOptions = _a.headerOptions, _f = _a.selectAllOptions, selectAllOptions = _f === void 0 ? false : _f;
+    var _g = useChip({
+        defaultValue: defaultValue,
+        multiChoice: multiChoice,
+        onChange: onChange,
+        onClean: onClean,
+        onConfirm: onConfirm,
+        onClose: onClose,
+        onClick: onClick,
+        options: options,
+        selectedValue: selectedValue,
+    }), clearOptions = _g.clearOptions, counter = _g.counter, filterOptions = _g.filterOptions, handleClickChips = _g.handleClickChips, handleContextMenuOpenChange = _g.handleContextMenuOpenChange, handleSelectOption = _g.handleSelectOption, selectedOptions = _g.selectedOptions, selectionIsOpen = _g.selectionIsOpen, wrapperRef = _g.wrapperRef;
+    var displayValue = function () {
+        if (!Array.isArray(selectedOptions)) {
+            return selectedOptions.value ? selectedOptions.label : label;
+        }
+        return label;
+    };
+    var contextualMenuItems = e.useMemo(function () {
+        return multiChoice
+            ? []
+            : options.map(function (_a) {
+                var optionLabel = _a.label, value = _a.value, indicator = _a.indicator, optionDisabled = _a.disabled, tag = _a.tag;
+                return ({
+                    label: optionLabel,
+                    value: value,
+                    icon: indicator,
+                    disabled: optionDisabled,
+                    tag: tag,
+                    id: "chips-option-".concat(value),
+                    type: 'neutral',
+                });
+            });
+    }, [multiChoice, options]);
+    var handleContextualMenuSelect = function (value) {
+        var option = options.find(function (item) { return item.value === value; });
+        if (option) {
+            handleSelectOption(option.label, option.value);
+        }
+    };
+    var contextualMenuSelectedValue = !Array.isArray(selectedOptions) && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.value)
+        ? selectedOptions.value
+        : undefined;
+    var hasOptions = options && (options === null || options === void 0 ? void 0 : options.length) > 0;
+    var shouldRenderOptions = selectionIsOpen && hasOptions;
+    var renderOptions = function () {
+        if (multiChoice) {
+            return (e.createElement(MultipleChoiceOptions, { options: options, onSelect: handleSelectOption, selectedOptions: selectedOptions, clearLabel: clearLabel, filterLabel: filterLabel, multiChoice: multiChoice, clearOptions: clearOptions, filterOptions: filterOptions, headerOptions: headerOptions, selectionIsOpen: selectionIsOpen, handleContextMenuOpenChange: handleContextMenuOpenChange, selectAllOptions: selectAllOptions }));
+        }
+        return (e.createElement(ContextualMenu, { items: contextualMenuItems, open: selectionIsOpen, onOpenChange: handleContextMenuOpenChange, onSelect: handleContextualMenuSelect, selectedValue: contextualMenuSelectedValue, className: "ods-chips__contextual-menu" }));
+    };
+    var badgeCount = initialCounter !== null && initialCounter !== void 0 ? initialCounter : counter;
     return (e.createElement("div", { className: "ods-chips", ref: wrapperRef },
         e.createElement("button", { type: "button", onClick: handleClickChips, disabled: disabled, className: classNames('ods-chips__button', {
                 'ods-chips__button--disabled': disabled,
-                'ods-chips__button--active': selectionIsOpen ||
-                    (Array.isArray(selectedOptions)
-                        ? selectedOptions.length > 0
-                        : selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.value) ||
-                    actived,
+                'ods-chips__button--no-options': !hasOptions,
+                'ods-chips__button--active': (Array.isArray(selectedOptions)
+                    ? selectedOptions.length > 0
+                    : selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.value) || actived,
             }) },
             icon || undefined,
             e.createElement("p", { className: "ods-chips__label" }, displayValue()),
-            (counter > 0 || initialCounter) && (e.createElement(Badge, { color: "brand", className: "ods-chips__badge" }, initialCounter !== null && initialCounter !== void 0 ? initialCounter : counter)),
-            options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !selectionIsOpen && e.createElement(ee, null),
-            options && (options === null || options === void 0 ? void 0 : options.length) > 0 && selectionIsOpen && e.createElement(ae, null)),
-        selectionIsOpen && options && (e.createElement(Options, { options: options, onSelect: handleSelectOption, selectedOptions: selectedOptions, clearLabel: clearLabel, filterLabel: filterLabel, multiChoice: multiChoice, clearOptions: clearOptions, filterOptions: filterOptions }))));
+            badgeCount > 0 && (e.createElement(Badge, { color: "brand", className: "ods-chips__badge", count: initialCounter !== null && initialCounter !== void 0 ? initialCounter : counter })),
+            hasOptions && !selectionIsOpen && e.createElement(ee, null),
+            hasOptions && selectionIsOpen && e.createElement(ae, null)),
+        shouldRenderOptions && renderOptions()));
 };
 Chips.displayName = 'Chips';
 
@@ -47538,6 +47716,31 @@ var ListAction = e.forwardRef(function (_a, ref) {
 });
 ListAction.displayName = 'ListAction';
 
+var ListReadOnly = e.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, icon = _a.icon, indicator = _a.indicator, _c = _a.type, type = _c === void 0 ? 'card' : _c, _d = _a.status, status = _d === void 0 ? 'default' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, className = _a.className, _h = _a.showDivider, showDivider = _h === void 0 ? false : _h, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "icon", "indicator", "type", "status", "inverted", "disabled", "loading", "className", "showDivider"]);
+    var renderLoadingContent = function () { return (e.createElement("div", { className: 'ods-list-readonly__skeleton' },
+        e.createElement(SkeletonBar, { width: '40%', height: '16px' }),
+        e.createElement(SkeletonBar, { width: '100%', height: '16px' }))); };
+    var renderContent = function () { return (e.createElement(e.Fragment, null,
+        icon && (e.createElement("div", { className: classNames('ods-list-readonly__icon', {
+                'ods-list-readonly__icon--inactive': status === 'inactive',
+            }) }, icon)),
+        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
+        indicator && (e.createElement("div", { className: 'ods-list-readonly__trailing' },
+            e.createElement("div", { className: 'ods-list-readonly__indicator' }, indicator))))); };
+    var cardClassName = classNames('ods-list-readonly', className, (_b = {
+            'ods-list-readonly--loading': loading,
+            'ods-list-readonly--disabled': disabled
+        },
+        _b["ods-list-readonly--".concat(type)] = type,
+        _b));
+    return (e.createElement("div", { className: 'ods-list-readonly__container' },
+        e.createElement("div", __assign$1({ ref: ref, "data-testid": 'card-list-readonly', className: cardClassName }, rest), loading ? renderLoadingContent() : renderContent()),
+        showDivider && type === 'text' && (e.createElement("div", { className: 'ods-list-readonly__divider' }))));
+});
+ListReadOnly.displayName = 'ListReadOnly';
+
 var ListExpandable = e.forwardRef(function (_a, ref) {
     var _b;
     var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, icon = _a.icon, indicator = _a.indicator, controlledExpanded = _a.expanded, _g = _a.defaultExpanded, defaultExpanded = _g === void 0 ? false : _g, onToggle = _a.onToggle, children = _a.children, className = _a.className, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.showDivider, showDivider = _j === void 0 ? false : _j, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "loading", "icon", "indicator", "expanded", "defaultExpanded", "onToggle", "children", "className", "disabled", "showDivider"]);
@@ -47576,13 +47779,74 @@ var ListExpandable = e.forwardRef(function (_a, ref) {
 });
 ListExpandable.displayName = 'ListExpandable';
 
+var isListItemString = function (item) {
+    return typeof item === 'object' && item !== null && 'description' in item;
+};
+var InternalContextualHero = e.forwardRef(function (_a, ref) {
+    var title = _a.title, description = _a.description, image = _a.image, listItems = _a.listItems, actions = _a.actions, className = _a.className;
+    var renderImage = function () {
+        if (typeof image === 'string') {
+            return e.createElement("img", { src: image, alt: title });
+        }
+        return image;
+    };
+    return (e.createElement("div", { "data-testid": "internal-contextual-hero", className: classNames('ods-internal-contextual-hero', className), ref: ref },
+        e.createElement("div", { className: 'ods-internal-contextual-hero__body' },
+            e.createElement("div", { className: 'ods-internal-contextual-hero__content' },
+                e.createElement("div", { className: 'ods-internal-contextual-hero__header' },
+                    e.createElement(Typography, { variant: "heading3" }, title),
+                    e.createElement(Typography, { variant: "description" }, description)),
+                actions && actions.length > 0 && (e.createElement("div", { className: 'ods-internal-contextual-hero__actions' },
+                    e.createElement(Button$1, { variant: 'primary', size: 'sm', onClick: actions[0].onClick }, actions[0].label),
+                    actions[1] && (e.createElement(Button$1, { variant: 'tertiary', size: 'sm', onClick: actions[1].onClick }, actions[1].label))))),
+            e.createElement("div", { className: 'ods-internal-contextual-hero__list' }, listItems === null || listItems === void 0 ? void 0 : listItems.map(function (item) {
+                return isListItemString(item) ? (e.createElement("div", { key: item.description, className: 'ods-internal-contextual-hero__list-item' },
+                    item.icon && e.createElement("div", null, item.icon),
+                    e.createElement(Typography, { variant: "description" }, item.description))) : (item);
+            }))),
+        image && (e.createElement("div", { className: 'ods-internal-contextual-hero__image' }, renderImage()))));
+});
+InternalContextualHero.displayName = 'InternalContextualHero';
+
+var ListSettings = e.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, icon = _a.icon, _h = _a.actionType, actionType = _h === void 0 ? 'button' : _h, _j = _a.buttonLabel, buttonLabel = _j === void 0 ? 'Label' : _j, _k = _a.buttonSize, buttonSize = _k === void 0 ? 'sm' : _k, _l = _a.buttonVariant, buttonVariant = _l === void 0 ? 'primary' : _l, _m = _a.toggleChecked, toggleChecked = _m === void 0 ? false : _m, onButtonClick = _a.onButtonClick, onToggleChange = _a.onToggleChange, _o = _a.showDivider, showDivider = _o === void 0 ? false : _o, className = _a.className, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "actionType", "buttonLabel", "buttonSize", "buttonVariant", "toggleChecked", "onButtonClick", "onToggleChange", "showDivider", "className"]);
+    var renderActionElement = function () {
+        if (actionType === 'button') {
+            return (e.createElement(Button$1, { variant: buttonVariant, size: buttonSize, onClick: onButtonClick, disabled: disabled }, buttonLabel));
+        }
+        if (actionType === 'toggle') {
+            return (e.createElement(Switch, { checked: toggleChecked, disabled: disabled, onChange: function (e) { return onToggleChange === null || onToggleChange === void 0 ? void 0 : onToggleChange(e.target.checked); } }));
+        }
+        return null;
+    };
+    var renderLoadingContent = function () { return (e.createElement("div", { className: "ods-list-settings__skeleton" },
+        e.createElement(SkeletonBar, { width: "40%", height: "16px" }),
+        e.createElement(SkeletonBar, { width: "100%", height: "16px" }))); };
+    var renderContent = function () { return (e.createElement(e.Fragment, null,
+        icon && (e.createElement("div", { className: classNames('ods-list-settings__icon', {
+                'ods-list-settings__icon--inactive': status === 'inactive',
+            }) }, icon)),
+        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
+        e.createElement("div", { className: "ods-list-settings__action" }, renderActionElement()))); };
+    var containerClassName = classNames('ods-list-settings', className, (_b = {
+            'ods-list-settings--loading': loading,
+            'ods-list-settings--disabled': disabled
+        },
+        _b["ods-list-settings--".concat(type)] = type,
+        _b));
+    return (e.createElement("div", { className: "ods-list-settings__container" },
+        e.createElement("div", __assign$1({ ref: ref, "data-testid": "list-settings", className: containerClassName }, rest), loading ? renderLoadingContent() : renderContent()),
+        showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-settings__divider" }))));
+});
+ListSettings.displayName = 'ListSettings';
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
 exports.CardGroup = CardGroup;
-exports.CardListExpandable = ListExpandable;
 exports.CardListItem = CardListItem;
 exports.Carousel = Carousel;
 exports.Chart = DoughnutChart;
@@ -47590,6 +47854,8 @@ exports.Checkbox = Checkbox;
 exports.Chips = Chips;
 exports.Col = Col;
 exports.Container = Container;
+exports.ContextualMenu = ContextualMenu;
+exports.ContextualMenuItem = ContextualMenuItem;
 exports.CrossSellCard = CrossSellCard;
 exports.DatePicker = DatePickerSingle;
 exports.DateRange = DatePickerRange;
@@ -47599,10 +47865,14 @@ exports.Drawer = Drawer;
 exports.Grid = index$1;
 exports.IconButton = IconButton;
 exports.Input = Input;
+exports.InternalContextualHero = InternalContextualHero;
 exports.Link = Link;
 exports.List = List;
 exports.ListAction = ListAction;
+exports.ListExpandable = ListExpandable;
+exports.ListReadOnly = ListReadOnly;
 exports.ListSelectable = ListSelectable;
+exports.ListSettings = ListSettings;
 exports.Modal = Modal;
 exports.Progress = Progress;
 exports.Radio = Radio;