@scaleflex/ui-tw 0.0.54 → 0.0.57

package/combobox/combobox-multi-inline/combobox-multi-inline.component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ComboboxMultiInlineProps } from '../combobox.types';
-export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, formItemId, searchPlaceholder, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;
+export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, formItemId, searchPlaceholder, actions, fixedActions, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;

package/combobox/combobox-multi-inline/combobox-multi-inline.component.js

@@ -1,12 +1,16 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId", "searchPlaceholder"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId", "searchPlaceholder", "actions", "fixedActions"];
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import React from 'react';
 import { useMemo, useState } from 'react';
-import { ComboboxContent, ComboboxTrigger, flattenOptions } from '../';
+import { ComboboxContent, ComboboxTrigger } from '../';
 export function ComboboxMultiInline(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -32,27 +36,77 @@ export function ComboboxMultiInline(_ref) {
     popoverContentProps = _ref.popoverContentProps,
     formItemId = _ref.formItemId,
     searchPlaceholder = _ref.searchPlaceholder,
+    actions = _ref.actions,
+    fixedActions = _ref.fixedActions,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var selectedLabels = useMemo(function () {
-    return flattenOptions(options).filter(function (option) {
-      return value.includes(option.value);
-    }).map(function (option) {
-      return option.label;
-    });
+    var labels = [];
+    var _iterator = _createForOfIteratorHelper(options),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+        if (isOptionGroup(option)) {
+          if (option.value && value.includes(option.value)) {
+            labels.push(option.label);
+          }
+          var _iterator2 = _createForOfIteratorHelper(option.options),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var sub = _step2.value;
+              if (value.includes(sub.value)) {
+                labels.push(sub.label);
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        } else {
+          if (value.includes(option.value)) {
+            labels.push(option.label);
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return labels;
   }, [options, value]);
   var displayValue = selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholder;
   var toggleValue = function toggleValue(v) {
-    if (value.includes(v)) {
-      onChange(value.filter(function (val) {
-        return val !== v;
-      }));
+    var group = options.find(function (opt) {
+      return isOptionGroup(opt) && opt.value === v;
+    });
+    var nextValue;
+    if (group && isOptionGroup(group)) {
+      var childValues = group.options.map(function (child) {
+        return child.value;
+      });
+      var isGroupSelected = value.includes(group.value);
+      if (isGroupSelected) {
+        nextValue = value.filter(function (val) {
+          return val !== group.value;
+        });
+      } else {
+        nextValue = [].concat(_toConsumableArray(value.filter(function (val) {
+          return !childValues.includes(val);
+        })), [group.value]);
+      }
     } else {
-      onChange([].concat(_toConsumableArray(value), [v]));
+      nextValue = value.includes(v) ? value.filter(function (val) {
+        return val !== v;
+      }) : [].concat(_toConsumableArray(value), [v]);
     }
+    onChange(nextValue);
   };
   var onOpenChange = function onOpenChange(isOpen) {
     if (!isOpen) {
@@ -89,6 +143,8 @@ export function ComboboxMultiInline(_ref) {
     onSelect: toggleValue,
     size: size,
     multiple: true,
-    popoverContentProps: popoverContentProps
+    popoverContentProps: popoverContentProps,
+    actions: actions,
+    fixedActions: fixedActions
   }));
 }

package/combobox/combobox-multi-tag/combobox-multi-tag.component.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { ComboboxMultiTagProps } from '../combobox.types';
-export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, defaultOpen, searchPlaceholder, popoverContentProps, ...rest }: ComboboxMultiTagProps): React.JSX.Element;
+export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, defaultOpen, searchPlaceholder, popoverContentProps, actions, fixedActions, ...rest }: ComboboxMultiTagProps): React.JSX.Element;

package/combobox/combobox-multi-tag/combobox-multi-tag.component.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "searchPlaceholder", "popoverContentProps"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "searchPlaceholder", "popoverContentProps", "actions", "fixedActions"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { createClearHandlers } from '@scaleflex/ui-tw/combobox/combobox.utils';
@@ -38,6 +38,8 @@ export function ComboboxMultiTag(_ref) {
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     searchPlaceholder = _ref.searchPlaceholder,
     popoverContentProps = _ref.popoverContentProps,
+    actions = _ref.actions,
+    fixedActions = _ref.fixedActions,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _getToolbarSizes = getToolbarSizes(size),
     buttonSize = _getToolbarSizes.buttonSize;
@@ -133,9 +135,12 @@ export function ComboboxMultiTag(_ref) {
     onSelect: toggleValue,
     size: size,
     multiple: true,
+    noGroupSelection: true,
     className: popoverClassName,
     searchPlaceholder: searchPlaceholder,
     showGroupSeparator: showGroupSeparator,
-    popoverContentProps: popoverContentProps
+    popoverContentProps: popoverContentProps,
+    actions: actions,
+    fixedActions: fixedActions
   }));
 }

package/combobox/combobox-single/combobox-single.component.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { ComboboxSingleProps } from '../combobox.types';
-export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, formItemId, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, searchPlaceholder, ...rest }: ComboboxSingleProps): React.JSX.Element;
+export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, formItemId, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, searchPlaceholder, actions, fixedActions, ...rest }: ComboboxSingleProps): React.JSX.Element;

package/combobox/combobox-single/combobox-single.component.js

@@ -1,14 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "searchPlaceholder"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "searchPlaceholder", "actions", "fixedActions"];
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import * as React from 'react';
 import { useState } from 'react';
 import { ComboboxContent, ComboboxTrigger } from '../combobox.component';
-import { flattenOptions } from '../combobox.utils';
 export function ComboboxSingle(_ref) {
-  var _flattenOptions$find;
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
     value = _ref.value,
@@ -33,14 +35,36 @@ export function ComboboxSingle(_ref) {
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     popoverContentProps = _ref.popoverContentProps,
     searchPlaceholder = _ref.searchPlaceholder,
+    actions = _ref.actions,
+    fixedActions = _ref.fixedActions,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var selectedLabel = (_flattenOptions$find = flattenOptions(options).find(function (opt) {
-    return opt.value === value;
-  })) === null || _flattenOptions$find === void 0 ? void 0 : _flattenOptions$find.label;
+  var selectedLabel = function () {
+    var _iterator = _createForOfIteratorHelper(options),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+        if (isOptionGroup(option)) {
+          if (option.value === value) return option.label;
+          var found = option.options.find(function (o) {
+            return o.value === value;
+          });
+          if (found) return found.label;
+        } else if (option.value === value) {
+          return option.label;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return '';
+  }();
   var onSelect = function onSelect(currentValue) {
     onChange(currentValue === value ? '' : currentValue);
     onBlur === null || onBlur === void 0 || onBlur(currentValue === value ? '' : currentValue);
@@ -80,6 +104,8 @@ export function ComboboxSingle(_ref) {
     onSelect: onSelect,
     size: size,
     showGroupSeparator: showGroupSeparator,
-    popoverContentProps: popoverContentProps
+    popoverContentProps: popoverContentProps,
+    actions: actions,
+    fixedActions: fixedActions
   }));
 }

package/combobox/combobox.component.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
-import type { ComboboxContentProps, ComboboxTriggerProps } from './combobox.types';
+import type { ComboboxContentProps, ComboboxTriggerProps, SelectActionsProps } from './combobox.types';
+export declare function SelectActions({ actions }: SelectActionsProps): React.JSX.Element | null;
 export declare function ComboboxTrigger({ children, open, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, ...rest }: ComboboxTriggerProps): React.JSX.Element;
-export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, searchPlaceholder, }: ComboboxContentProps): React.JSX.Element;
+export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, searchPlaceholder, noGroupSelection, actions, fixedActions, }: ComboboxContentProps): React.JSX.Element;

package/combobox/combobox.component.js

@@ -8,33 +8,54 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import { PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
 import { SelectSeparator, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
-import { getBaseSelectClassNames, selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
+import { getBaseSelectClassNames, selectLabelSizeOptions, selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
 import { Separator } from '@scaleflex/ui-tw/separator';
 import { focusRingClassNames, getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
 import { getToolbarSizes } from '@scaleflex/ui-tw/textarea/textarea.utils';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
 import { ChevronsUpDownIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
+import { Fragment } from 'react';
 import { iconSizeInTriggerOptions, verticalSeparatorNextToChevronOptions } from './combobox.constants';
 import { createClearHandlers } from './combobox.utils';
-export function ComboboxTrigger(_ref) {
-  var children = _ref.children,
-    open = _ref.open,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
-    className = _ref.className,
-    _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? false : _ref$selected,
-    _ref$showClear = _ref.showClear,
-    showClear = _ref$showClear === void 0 ? false : _ref$showClear,
-    onClearAll = _ref.onClearAll,
-    formItemId = _ref.formItemId,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var selectLabelVariants = cva('', {
+  variants: {
+    size: selectLabelSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+export function SelectActions(_ref) {
+  var actions = _ref.actions;
+  if (!actions || actions.length === 0) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectSeparator, null), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2 px-4 py-3"
+  }, actions.map(function (action, idx) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: idx
+    }, action);
+  })));
+}
+export function ComboboxTrigger(_ref2) {
+  var children = _ref2.children,
+    open = _ref2.open,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$readOnly = _ref2.readOnly,
+    readOnly = _ref2$readOnly === void 0 ? false : _ref2$readOnly,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? FormSize.Md : _ref2$size,
+    className = _ref2.className,
+    _ref2$selected = _ref2.selected,
+    selected = _ref2$selected === void 0 ? false : _ref2$selected,
+    _ref2$showClear = _ref2.showClear,
+    showClear = _ref2$showClear === void 0 ? false : _ref2$showClear,
+    onClearAll = _ref2.onClearAll,
+    formItemId = _ref2.formItemId,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _getToolbarSizes = getToolbarSizes(size),
     iconSize = _getToolbarSizes.iconSize;
   var _createClearHandlers = createClearHandlers(onClearAll),
@@ -77,20 +98,25 @@ export function ComboboxTrigger(_ref) {
     className: cn('ml-1 shrink-0 opacity-50', iconSizeInTriggerOptions[size])
   }))));
 }
-export function ComboboxContent(_ref2) {
-  var options = _ref2.options,
-    selectedValue = _ref2.value,
-    _onSelect = _ref2.onSelect,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'md' : _ref2$size,
-    _ref2$multiple = _ref2.multiple,
-    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
-    className = _ref2.className,
-    _ref2$showGroupSepara = _ref2.showGroupSeparator,
-    showGroupSeparator = _ref2$showGroupSepara === void 0 ? false : _ref2$showGroupSepara,
-    popoverContentProps = _ref2.popoverContentProps,
-    _ref2$searchPlacehold = _ref2.searchPlaceholder,
-    searchPlaceholder = _ref2$searchPlacehold === void 0 ? 'Search...' : _ref2$searchPlacehold;
+export function ComboboxContent(_ref3) {
+  var options = _ref3.options,
+    selectedValue = _ref3.value,
+    _onSelect = _ref3.onSelect,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    _ref3$multiple = _ref3.multiple,
+    multiple = _ref3$multiple === void 0 ? false : _ref3$multiple,
+    className = _ref3.className,
+    _ref3$showGroupSepara = _ref3.showGroupSeparator,
+    showGroupSeparator = _ref3$showGroupSepara === void 0 ? false : _ref3$showGroupSepara,
+    popoverContentProps = _ref3.popoverContentProps,
+    _ref3$searchPlacehold = _ref3.searchPlaceholder,
+    searchPlaceholder = _ref3$searchPlacehold === void 0 ? 'Search...' : _ref3$searchPlacehold,
+    _ref3$noGroupSelectio = _ref3.noGroupSelection,
+    noGroupSelection = _ref3$noGroupSelectio === void 0 ? false : _ref3$noGroupSelectio,
+    actions = _ref3.actions,
+    _ref3$fixedActions = _ref3.fixedActions,
+    fixedActions = _ref3$fixedActions === void 0 ? false : _ref3$fixedActions;
   return /*#__PURE__*/React.createElement(PopoverContent, _extends({
     className: cn('p-0', className)
   }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
@@ -101,20 +127,38 @@ export function ComboboxContent(_ref2) {
     if (isOptionGroup(option)) {
       return /*#__PURE__*/React.createElement(CommandGroup, {
         key: groupIndex,
-        heading: option.label,
+        heading: !option.value || noGroupSelection ? option.label : undefined,
         size: size
-      }, option.options.map(function (_ref3) {
-        var label = _ref3.label,
-          optionLabel = _ref3.optionLabel,
-          value = _ref3.value,
-          disabled = _ref3.disabled,
-          icon = _ref3.icon,
-          tooltip = _ref3.tooltip,
-          disabledTooltip = _ref3.disabledTooltip;
+      }, !noGroupSelection && option.value && /*#__PURE__*/React.createElement(CommandItem, {
+        size: size,
+        multiple: multiple,
+        disabled: option.disabled,
+        key: option.value,
+        icon: option.icon,
+        value: option.value,
+        tooltip: option.tooltip,
+        disabledTooltip: option.disabledTooltip,
+        isGroup: true,
+        selectedValue: selectedValue,
+        onSelect: function onSelect() {
+          return _onSelect(option.value);
+        },
+        className: cn('text-secondary-foreground', selectLabelVariants({
+          size: size
+        }))
+      }, option.label), option.options.map(function (_ref4) {
+        var label = _ref4.label,
+          optionLabel = _ref4.optionLabel,
+          value = _ref4.value,
+          disabled = _ref4.disabled,
+          icon = _ref4.icon,
+          tooltip = _ref4.tooltip,
+          disabledTooltip = _ref4.disabledTooltip;
+        var isGroupSelected = !noGroupSelection && multiple && option.value && Array.isArray(selectedValue) && selectedValue.includes(option.value);
         return /*#__PURE__*/React.createElement(CommandItem, {
           size: size,
           multiple: multiple,
-          disabled: disabled,
+          disabled: disabled || !!isGroupSelected,
           key: value,
           icon: icon,
           value: value,
@@ -138,10 +182,15 @@ export function ComboboxContent(_ref2) {
       icon: option.icon,
       value: option.value,
       tooltip: option.tooltip,
+      disabledTooltip: option.disabledTooltip,
       selectedValue: selectedValue,
       onSelect: function onSelect() {
         return _onSelect(option.value);
       }
     }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
-  }))));
+  }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
+  })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
+  })));
 }

package/combobox/combobox.types.d.ts

@@ -4,6 +4,9 @@ import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { Command as CommandPrimitive } from 'cmdk';
 import type { ComponentProps, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
 export type ClearEvent = MouseEvent | KeyboardEvent;
+export type SelectActionsProps = {
+    actions?: ReactNode[];
+};
 export type ComboboxTriggerProps = {
     children: ReactNode;
     open: boolean;
@@ -29,6 +32,9 @@ export type ComboboxContentProps = {
     showGroupSeparator?: boolean;
     searchPlaceholder?: string;
     popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
+    noGroupSelection?: boolean;
+    actions?: ReactNode[];
+    fixedActions?: boolean;
 };
 export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
     size?: FormSizeType;
@@ -60,6 +66,8 @@ interface ComboboxCommonProps {
     showGroupSeparator?: boolean;
     searchPlaceholder?: string;
     popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
+    actions?: ReactNode[];
+    fixedActions?: boolean;
 }
 export interface ComboboxSingleProps extends ComboboxCommonProps {
     value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.54",
+  "version": "0.0.57",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -23,7 +23,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.54",
+    "@scaleflex/icons-tw": "^0.0.57",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/select/components/selector.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { SelectorProps } from '../select.types';
-export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, popoverClassName, selectorContentProps, defaultOpen, triggerProps, ...rest }: SelectorProps): React.JSX.Element;
+export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, popoverClassName, selectorContentProps, defaultOpen, triggerProps, actions, ...rest }: SelectorProps): React.JSX.Element;

package/select/components/selector.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId", "popoverClassName", "selectorContentProps", "defaultOpen", "triggerProps"];
+var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId", "popoverClassName", "selectorContentProps", "defaultOpen", "triggerProps", "actions"];
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { SelectActions } from '@scaleflex/ui-tw/combobox/combobox.component';
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import { selectLabelSizeOptions } from '@scaleflex/ui-tw/select/select.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
@@ -36,6 +37,7 @@ export function Selector(_ref) {
     selectorContentProps = _ref.selectorContentProps,
     defaultOpen = _ref.defaultOpen,
     triggerProps = _ref.triggerProps,
+    actions = _ref.actions,
     rest = _objectWithoutProperties(_ref, _excluded);
   var getLabelByValue = function getLabelByValue(val) {
     var _iterator = _createForOfIteratorHelper(options),
@@ -125,5 +127,7 @@ export function Selector(_ref) {
       tooltip: option.tooltip,
       disabledTooltip: option.disabledTooltip
     }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
+  }), /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
   })));
 }

package/select/select.types.d.ts

@@ -1,7 +1,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { SelectOption } from '@scaleflex/ui-tw/form';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
 export interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
 }
 export interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
@@ -39,4 +39,5 @@ export interface SelectorProps extends SelectProps {
     selectorContentProps?: ComponentProps<typeof SelectPrimitive.Content>;
     'aria-invalid'?: boolean;
     triggerProps?: Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'aria-invalid'>;
+    actions?: ReactNode[];
 }