@scaleflex/ui-tw 0.0.62 → 0.0.63

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

@@ -156,6 +156,16 @@ export function ComboboxMultiCheckbox(_ref) {
       onChange([]);
     }
   };
+  var toggleFirstOption = function toggleFirstOption() {
+    var _options$;
+    if (options.length > 0 && (_options$ = options[0]) !== null && _options$ !== void 0 && _options$.value) {
+      var firstOptionValue = options[0].value;
+      var isSelected = selectedValue.includes(firstOptionValue);
+      onChange(isSelected ? selectedValue.filter(function (val) {
+        return val !== firstOptionValue;
+      }) : [].concat(_toConsumableArray(selectedValue), [firstOptionValue]));
+    }
+  };
   return /*#__PURE__*/React.createElement(Popover, {
     open: open,
     defaultOpen: defaultOpen,
@@ -178,7 +188,8 @@ export function ComboboxMultiCheckbox(_ref) {
     optionsLength: options.length,
     displayCount: displayCount,
     selectedLength: selectedLabels.length,
-    onCheckboxClick: handleCheckboxClick
+    onCheckboxClick: handleCheckboxClick,
+    toggleFirstOption: toggleFirstOption
   }, displayValue), /*#__PURE__*/React.createElement(ComboboxCheckboxContent, {
     showGroupSeparator: showGroupSeparator,
     searchPlaceholder: searchPlaceholder,

package/combobox/combobox.component.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ComboboxCheckboxTriggerProps, 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, triggerProps, ...rest }: ComboboxTriggerProps): React.JSX.Element;
-export declare function ComboboxCheckboxTrigger({ children, open, label, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, triggerProps, icon: Icon, iconClassName, optionsLength, selectedLength, onCheckboxClick, displayCount, ...rest }: ComboboxCheckboxTriggerProps): React.JSX.Element;
+export declare function ComboboxCheckboxTrigger({ children, open, label, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, triggerProps, icon: Icon, iconClassName, optionsLength, selectedLength, onCheckboxClick, toggleFirstOption, displayCount, ...rest }: ComboboxCheckboxTriggerProps): React.JSX.Element;
 export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, searchPlaceholder, noGroupSelection, actions, fixedActions, }: ComboboxContentProps): React.JSX.Element;
 export declare function ComboboxCheckboxContent({ options, value: selectedValue, onSelect, size, className, showGroupSeparator, popoverContentProps, searchPlaceholder, actions, fixedActions, }: ComboboxContentProps): React.JSX.Element;

package/combobox/combobox.component.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "open", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps"],
-  _excluded2 = ["children", "open", "label", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps", "icon", "iconClassName", "optionsLength", "selectedLength", "onCheckboxClick", "displayCount"];
+  _excluded2 = ["children", "open", "label", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps", "icon", "iconClassName", "optionsLength", "selectedLength", "onCheckboxClick", "toggleFirstOption", "displayCount"];
 import { buttonVariants } from '@scaleflex/ui-tw/button';
 import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { VisualCheckbox } from '@scaleflex/ui-tw/checkbox/checkbox.component';
@@ -125,12 +125,13 @@ export function ComboboxCheckboxTrigger(_ref3) {
     optionsLength = _ref3.optionsLength,
     selectedLength = _ref3.selectedLength,
     onCheckboxClick = _ref3.onCheckboxClick,
+    toggleFirstOption = _ref3.toggleFirstOption,
     _ref3$displayCount = _ref3.displayCount,
     displayCount = _ref3$displayCount === void 0 ? false : _ref3$displayCount,
     rest = _objectWithoutProperties(_ref3, _excluded2);
   var _getToolbarSizes2 = getToolbarSizes(size),
     iconSize = _getToolbarSizes2.iconSize;
-  var _createClearHandlers2 = createClearHandlers(onClearAll),
+  var _createClearHandlers2 = createClearHandlers(onClearAll, optionsLength, toggleFirstOption),
     handleOnTriggerClick = _createClearHandlers2.onClick,
     handleOnTriggerKeyDown = _createClearHandlers2.onKeyDown;
   var handleCheckboxKeyDown = function handleCheckboxKeyDown(event) {
@@ -178,15 +179,15 @@ export function ComboboxCheckboxTrigger(_ref3) {
     className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
       size: iconSize,
       variant: ButtonVariant.GhostSecondary
-    })]))
+    }), optionsLength === 1 && '-mr-2']))
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
     className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0', iconSizeInTriggerOptions[size])
-  })), /*#__PURE__*/React.createElement("div", {
+  })), optionsLength !== 1 && /*#__PURE__*/React.createElement("div", {
     className: cn(verticalSeparatorNextToChevronOptions[size])
   }, /*#__PURE__*/React.createElement(Separator, {
     orientation: "vertical"
-  }))), /*#__PURE__*/React.createElement(ChevronDown, {
+  }))), optionsLength !== 1 && /*#__PURE__*/React.createElement(ChevronDown, {
     className: cn('text-muted-foreground/70 ml-1 shrink-0', iconSizeInTriggerOptions[size])
   }))));
 }

package/combobox/combobox.constants.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var verticalSeparatorNextToChevronOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-4'), FormSize.Md, 'h-5'), FormSize.Lg, 'h-6');
-export var iconSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-5');
+export var iconSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-4'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-5');
 export var comboboxMultiTagsDefaultSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'min-h-8 h-8'), FormSize.Md, 'min-h-10 h-10'), FormSize.Lg, 'min-h-12 h-12');

package/combobox/combobox.types.d.ts

@@ -29,6 +29,7 @@ export type ComboboxCheckboxTriggerProps = ComboboxTriggerProps & {
     icon?: ElementType;
     iconClassName?: string;
     onCheckboxClick?: (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+    toggleFirstOption?: () => void;
 };
 export type ComboboxContentProps = {
     options: SelectOption[];

package/combobox/combobox.utils.d.ts

@@ -2,7 +2,7 @@ import { FlatOption, SelectOption } from '@scaleflex/ui-tw/form';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { KeyboardEvent, MouseEvent } from 'react';
 export declare const flattenOptions: (options: SelectOption[]) => FlatOption[];
-export declare const createClearHandlers: (onClearAll?: () => void) => {
+export declare const createClearHandlers: (onClearAll?: () => void, optionsLength?: number, toggleFirstOption?: () => void) => {
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
 };

package/combobox/combobox.utils.js

@@ -9,13 +9,19 @@ function isClearIconEvent(event) {
   var target = event.type === 'keydown' ? document.activeElement : event.target;
   return !!target.closest('[data-clear-icon]');
 }
-export var createClearHandlers = function createClearHandlers(onClearAll) {
+export var createClearHandlers = function createClearHandlers(onClearAll, optionsLength, toggleFirstOption) {
   return {
     onClick: function onClick(e) {
       if (isClearIconEvent(e)) {
         e.stopPropagation();
         e.preventDefault();
         onClearAll === null || onClearAll === void 0 || onClearAll();
+        return;
+      }
+      if (optionsLength === 1 && toggleFirstOption) {
+        e.stopPropagation();
+        e.preventDefault();
+        toggleFirstOption();
       }
     },
     onKeyDown: function onKeyDown(e) {
@@ -23,6 +29,14 @@ export var createClearHandlers = function createClearHandlers(onClearAll) {
         e.stopPropagation();
         e.preventDefault();
         onClearAll === null || onClearAll === void 0 || onClearAll();
+        return;
+      }
+      if (optionsLength === 1 && toggleFirstOption) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+          e.preventDefault();
+          toggleFirstOption();
+        }
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "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.62",
+    "@scaleflex/icons-tw": "^0.0.63",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",