@macive/ui 0.0.21 → 0.0.22

package/dist/src/components/Banner/Banner.js

@@ -26,10 +26,7 @@ exports.Banner = (0, react_1.forwardRef)(function Banner({ icon, action, seconda
     const { wrapperRef, handleKeyUp, handleBlur, handleMouseUp, shouldShowFocus } = useBannerFocus(bannerRef);
     const { defaultIcon, iconColor, ariaRoleType } = useBannerAttributes(status);
     const iconName = icon || defaultIcon;
-    const className = (0, css_1.classNames)(Banner_classnames_1.default.Banner, 
-    // status && styles[variationName('status', status)],
-    //@ts-expect-error unknown
-    status && Banner_classnames_1.default[status], onDismiss && Banner_classnames_1.default.hasDismiss, shouldShowFocus && Banner_classnames_1.default.keyFocused, withinContentContainer ? Banner_classnames_1.default.withinContentContainer : Banner_classnames_1.default.withinPage);
+    const className = (0, css_1.classNames)(Banner_classnames_1.default.Banner, status && Banner_classnames_1.default[(0, css_1.variationName)('status', status)], onDismiss && Banner_classnames_1.default.hasDismiss, shouldShowFocus && Banner_classnames_1.default.keyFocused, withinContentContainer ? Banner_classnames_1.default.withinContentContainer : Banner_classnames_1.default.withinPage);
     let headingMarkup = null;
     if (title) {
         headingMarkup = ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'h2', variant: 'headingMd', breakWord: true, children: title }));

package/dist/src/components/ComboSelect/ComboSelect.js

@@ -0,0 +1,128 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Icons_1 = require("../Icons");
+const react_1 = require("react");
+const Tag_1 = require("../Tag");
+const ActionList_1 = require("../ActionList");
+const Checkbox_1 = require("../Checkbox");
+const Icon_1 = require("../Icon");
+const Text_1 = require("../Text");
+const Popover_1 = require("../Popover");
+const Button_1 = require("../Button");
+const Spinner_1 = require("../Spinner");
+const Listbox_1 = require("../Listbox");
+const Combobox_1 = require("../Combobox");
+function ComboSelect({ label, options: initialOptions, value, onChange, placeholder = 'Select options', disabled = false, error, allowCustom = true, loading = false, }) {
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(initialOptions);
+    const [popoverActive, setPopoverActive] = (0, react_1.useState)(false);
+    // Include "Custom" option if allowed
+    const allOptions = (0, react_1.useMemo)(() => allowCustom ? [...initialOptions, { label: 'Custom', value: 'Custom' }] : initialOptions, [initialOptions, allowCustom]);
+    // Non-custom options for "Select All"
+    const nonCustomOptions = (0, react_1.useMemo)(() => allOptions.filter((option) => option.value !== 'Custom'), [allOptions]);
+    // Check if all non-custom options are selected
+    const isAllSelected = (0, react_1.useMemo)(() => nonCustomOptions.length > 0 &&
+        nonCustomOptions.every((option) => value.includes(option.value)), [nonCustomOptions, value]);
+    // Sync filteredOptions with allOptions when initialOptions changes
+    (0, react_1.useEffect)(() => {
+        if (inputValue === '') {
+            setFilteredOptions(allOptions);
+        }
+        else {
+            const filterRegex = new RegExp(escapeSpecialRegExCharacters(inputValue), 'i');
+            setFilteredOptions(allOptions.filter((option) => option.label.match(filterRegex)));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allOptions, inputValue]);
+    // Escape special regex characters for filtering
+    const escapeSpecialRegExCharacters = (0, react_1.useCallback)((str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), []);
+    // Update filtered options based on input
+    const updateText = (0, react_1.useCallback)((text) => {
+        setInputValue(text);
+        if (text === '') {
+            setFilteredOptions(allOptions);
+            return;
+        }
+        const filterRegex = new RegExp(escapeSpecialRegExCharacters(text), 'i');
+        setFilteredOptions(allOptions.filter((option) => option.label.match(filterRegex)));
+    }, [allOptions, escapeSpecialRegExCharacters]);
+    // Handle individual option selection
+    const handleSelect = (0, react_1.useCallback)((selectedValue) => {
+        if (!value.includes(selectedValue)) {
+            const newValues = [...value, selectedValue];
+            onChange(newValues);
+        }
+        setInputValue('');
+        setFilteredOptions(allOptions);
+    }, [value, onChange, allOptions]);
+    // Handle tag removal
+    const handleRemove = (0, react_1.useCallback)((removedValue) => {
+        const newValues = value.filter((v) => v !== removedValue);
+        onChange(newValues);
+    }, [value, onChange]);
+    // Handle "Select All" checkbox toggle
+    const handleSelectAll = (0, react_1.useCallback)((checked) => {
+        if (checked) {
+            // Select all non-custom options, preserving existing custom selections
+            const newValues = [
+                ...value.filter((v) => v === 'Custom' || !nonCustomOptions.some((o) => o.value === v)),
+                ...nonCustomOptions.map((o) => o.value),
+            ];
+            onChange(newValues);
+        }
+        else {
+            // Deselect all non-custom options, preserving custom selections
+            const newValues = value.filter((v) => v === 'Custom' || !nonCustomOptions.some((o) => o.value === v));
+            onChange(newValues);
+        }
+    }, [value, onChange, nonCustomOptions]);
+    // Toggle popover visibility
+    const togglePopoverActive = (0, react_1.useCallback)(() => {
+        setPopoverActive((prev) => !prev);
+    }, []);
+    // Compute insightful popover trigger text
+    const popoverTriggerText = (0, react_1.useMemo)(() => {
+        if (value.length === 0)
+            return 'No items selected';
+        const selectedLabels = value
+            .map((val) => { var _a; return ((_a = allOptions.find((opt) => opt.value === val)) === null || _a === void 0 ? void 0 : _a.label) || val; })
+            .filter(Boolean);
+        if (value.length === 1)
+            return `${selectedLabels[0]} selected`;
+        if (value.length === 2)
+            return `${selectedLabels[0]}, ${selectedLabels[1]} selected`;
+        return `${selectedLabels[0]}, ${selectedLabels[1]}, and ${value.length - 2} others selected`;
+    }, [value, allOptions]);
+    // Compute accessibility label for popover button
+    const popoverAccessibilityLabel = (0, react_1.useMemo)(() => {
+        const selectedLabels = value
+            .map((val) => { var _a; return ((_a = allOptions.find((opt) => opt.value === val)) === null || _a === void 0 ? void 0 : _a.label) || val; })
+            .filter(Boolean);
+        return `View ${value.length} selected items: ${selectedLabels.join(', ')}`;
+    }, [value, allOptions]);
+    // Render selected values as inline tags (up to 4)
+    const inlineTagsMarkup = value.length > 0 && value.length <= 4 && ((0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { blockAlign: 'center', gap: '2', children: value.map((val) => {
+            const option = allOptions.find((opt) => opt.value === val);
+            return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { onRemove: () => handleRemove(val), disabled: disabled, children: (option === null || option === void 0 ? void 0 : option.label) || val }, val));
+        }) }));
+    // Render selected values in popover (when > 4)
+    const popoverContent = ((0, jsx_runtime_1.jsx)("div", { style: { padding: '1rem', maxHeight: '10rem', overflowY: 'auto', width: '300px' }, children: value.length > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: value.map((val) => {
+                    var _a, _b;
+                    return ({
+                        content: `${((_a = allOptions.find((opt) => opt.value === val)) === null || _a === void 0 ? void 0 : _a.label) || val}`,
+                        onAction: () => handleRemove(val),
+                        prefix: ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: `${((_b = allOptions.find((opt) => opt.value === val)) === null || _b === void 0 ? void 0 : _b.label) || val}`, labelHidden: true, readOnly: true, checked: true })),
+                        suffix: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'critical', source: Icons_1.MaClose }),
+                    });
+                }) }) })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', variant: 'bodySm', color: 'subdued', children: "No items selected" })) }));
+    // Render popover trigger when > 4 items
+    const popoverMarkup = value.length > 4 && ((0, jsx_runtime_1.jsx)("div", { className: 'mt-2', children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: popoverActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: togglePopoverActive, disclosure: true, variant: 'tertiary', plain: true, accessibilityLabel: popoverAccessibilityLabel, children: popoverTriggerText }), onClose: togglePopoverActive, ariaHaspopup: 'listbox', children: popoverContent }) }));
+    // Render dropdown content
+    const dropdownContent = loading ? ((0, jsx_runtime_1.jsx)("div", { className: 'p-2 flex justify-center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { accessibilityLabel: 'Loading options', size: 'small' }) })) : filteredOptions.length > 0 ? ((0, jsx_runtime_1.jsx)(Listbox_1.Listbox, { onSelect: handleSelect, children: filteredOptions.map((option) => ((0, jsx_runtime_1.jsx)(Listbox_1.Listbox.Option, { value: option.value, selected: value.includes(option.value), accessibilityLabel: option.label, children: option.label }, option.value))) })) : inputValue && !loading ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', variant: 'bodySm', color: 'subdued', children: "No options found" })) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Combobox_1.Combobox, { allowMultiple: true, activator: (0, jsx_runtime_1.jsx)(Combobox_1.Combobox.TextField, { label: label, value: inputValue, onChange: updateText, placeholder: placeholder, autoComplete: 'off', disabled: disabled, error: error, suffix: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'Select All', labelHidden: true, checked: isAllSelected, onChange: handleSelectAll, disabled: disabled, "aria-label": 'Toggle selection of all options' }) }), children: dropdownContent }), inlineTagsMarkup || popoverMarkup] }));
+}
+exports.ComboSelect = ComboSelect;

package/dist/src/components/EmptyState/EmptyState.js

@@ -32,6 +32,6 @@ function EmptyState({ children, heading, image, largeImage, imageContained, full
     const detailsMarkup = textContentMarkup || actionsMarkup || footerContentMarkup ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { maxWidth: fullWidth ? '100%' : '400px', children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { inlineAlign: 'center', 
             //@ts-expect-error
             gap: 4, children: [textContentMarkup, actionsMarkup, footerContentMarkup] }) })) : null;
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineStart: '0', paddingInlineEnd: '0', paddingBlockStart: '5', paddingBlockEnd: '16', children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { inlineAlign: 'center', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex w-full items-center justify-center', children: [" ", imageMarkup] }), detailsMarkup] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineStart: '0', paddingInlineEnd: '0', paddingBlockStart: '5', paddingBlockEnd: '16', children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { inlineAlign: 'center', children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", imageMarkup] }), detailsMarkup] }) }));
 }
 exports.EmptyState = EmptyState;

package/dist/src/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hsbToHex = exports.hexToRgb = exports.capitalize = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.isNavigationItemActive = exports.Navigation = exports.Loading = exports.Layout = exports.Input = exports.InlineError = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DatePicker = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.buttonsFrom = exports.buttonFrom = exports.CopyButton = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.Tabs = exports.AlphaTabs = exports.ActionList = void 0;
-exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
+exports.ComboSelect = exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
 __exportStar(require("./components"), exports);
 var ActionList_1 = require("./components/ActionList");
 Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
@@ -122,3 +122,5 @@ var renderSafeTemplate_1 = require("./utilities/renderSafeTemplate");
 Object.defineProperty(exports, "renderSafeTemplate", { enumerable: true, get: function () { return renderSafeTemplate_1.renderSafeTemplate; } });
 var use_index_resource_state_1 = require("./utilities/use-index-resource-state");
 Object.defineProperty(exports, "useIndexResourceState", { enumerable: true, get: function () { return use_index_resource_state_1.useIndexResourceState; } });
+var ComboSelect_1 = require("./components/ComboSelect/ComboSelect");
+Object.defineProperty(exports, "ComboSelect", { enumerable: true, get: function () { return ComboSelect_1.ComboSelect; } });