@scaleflex/ui-tw 0.0.47 → 0.0.48

package/input-tags/input-tags.component.d.ts

@@ -1,3 +1,3 @@
 import { InputTagsProps } from '@scaleflex/ui-tw/input-tags/input-tags.types';
 import * as React from 'react';
-export declare function InputTags({ value, onChange, suggestedTags, allTags, placeholder, allowCustomTags, disabled, size, onGenerateTags, popoverClassName, popoverContentProps, formItemId, readOnly, className, clearAllLabel, generateLabel, ...rest }: InputTagsProps): React.JSX.Element;
+export declare function InputTags({ value, onChange, suggestedTags, allTags, placeholder, allowCustomTags, disabled, defaultOpen, size, onGenerateTags, popoverClassName, popoverContentProps, formItemId, readOnly, className, clearAllLabel, generateLabel, valueProp, generateTagsPending, ...rest }: InputTagsProps): React.JSX.Element;

package/input-tags/input-tags.component.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "onChange", "suggestedTags", "allTags", "placeholder", "allowCustomTags", "disabled", "size", "onGenerateTags", "popoverClassName", "popoverContentProps", "formItemId", "readOnly", "className", "clearAllLabel", "generateLabel"];
+var _excluded = ["value", "onChange", "suggestedTags", "allTags", "placeholder", "allowCustomTags", "disabled", "defaultOpen", "size", "onGenerateTags", "popoverClassName", "popoverContentProps", "formItemId", "readOnly", "className", "clearAllLabel", "generateLabel", "valueProp", "generateTagsPending"];
 import { SparkleIcon } from '@scaleflex/icons-tw/sparkle-icon';
 import { Button } from '@scaleflex/ui-tw/button';
 import { iconSizeInTriggerOptions } from '@scaleflex/ui-tw/combobox/combobox.constants';
@@ -40,6 +41,8 @@ export function InputTags(_ref) {
     allowCustomTags = _ref$allowCustomTags === void 0 ? true : _ref$allowCustomTags,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     onGenerateTags = _ref.onGenerateTags,
@@ -52,6 +55,10 @@ export function InputTags(_ref) {
     clearAllLabel = _ref$clearAllLabel === void 0 ? 'Clear all' : _ref$clearAllLabel,
     _ref$generateLabel = _ref.generateLabel,
     generateLabel = _ref$generateLabel === void 0 ? 'Generate' : _ref$generateLabel,
+    _ref$valueProp = _ref.valueProp,
+    valueProp = _ref$valueProp === void 0 ? 'value' : _ref$valueProp,
+    _ref$generateTagsPend = _ref.generateTagsPending,
+    generateTagsPending = _ref$generateTagsPend === void 0 ? false : _ref$generateTagsPend,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -66,7 +73,7 @@ export function InputTags(_ref) {
     buttonSize = _getToolbarSizes.buttonSize;
   var searchTrimmed = search.trim().toLowerCase();
   var isSameTag = function isSameTag(a, b) {
-    return a.value.trim().toLowerCase() === b.value.trim().toLowerCase();
+    return a[valueProp].trim().toLowerCase() === b[valueProp].trim().toLowerCase();
   };
   var isSelected = function isSelected(tag) {
     return value.some(function (t) {
@@ -80,10 +87,9 @@ export function InputTags(_ref) {
     return normalizeLabel(label).toLowerCase().replace(/\s+/g, '-');
   };
   var createTag = function createTag(label) {
-    return {
-      label: normalizeLabel(label),
-      value: normalizeValue(label)
-    };
+    return _defineProperty({
+      label: normalizeLabel(label)
+    }, valueProp, normalizeValue(label));
   };
   var newTag = createTag(search);
   var canCreate = useMemo(function () {
@@ -118,7 +124,8 @@ export function InputTags(_ref) {
   });
   return /*#__PURE__*/React.createElement(Popover, {
     open: open,
-    onOpenChange: setOpen
+    onOpenChange: setOpen,
+    defaultOpen: defaultOpen
   }, /*#__PURE__*/React.createElement(PopoverTrigger, {
     asChild: true
   }, /*#__PURE__*/React.createElement("button", {
@@ -126,7 +133,7 @@ export function InputTags(_ref) {
     role: "combobox-tags",
     "aria-expanded": open,
     "aria-invalid": rest['aria-invalid'],
-    disabled: disabled,
+    disabled: disabled || generateTagsPending,
     className: cn.apply(void 0, ['relative flex w-full', onGenerateTags || value.length > 0 ? 'flex-col' : 'items-center'].concat(_toConsumableArray(getBaseInputClasses()), [selectionHighlightClassNames, focusRingClassNames, readOnly && selectReadOnlyClassNames, className])),
     onClick: function onClick() {
       return !disabled && setOpen(true);
@@ -139,7 +146,7 @@ export function InputTags(_ref) {
     className: "text-muted-foreground"
   }, placeholder) : value.map(function (tag) {
     return /*#__PURE__*/React.createElement(Pill, {
-      key: tag.value,
+      key: tag[valueProp],
       size: size,
       removable: true,
       onRemove: function onRemove() {
@@ -163,6 +170,7 @@ export function InputTags(_ref) {
     type: "button",
     variant: "ghost-primary",
     size: buttonSize,
+    loading: generateTagsPending,
     startIcon: /*#__PURE__*/React.createElement(SparkleIcon, {
       className: "size-3.5"
     }),
@@ -188,7 +196,7 @@ export function InputTags(_ref) {
     heading: "Suggested"
   }, filteredSuggested.map(function (tag) {
     return /*#__PURE__*/React.createElement(CommandItem, {
-      key: tag.value,
+      key: tag[valueProp],
       size: size,
       onSelect: function onSelect() {
         return handleAddTag(tag);
@@ -200,7 +208,7 @@ export function InputTags(_ref) {
     heading: "All Tags"
   }, filteredAll.map(function (tag) {
     return /*#__PURE__*/React.createElement(CommandItem, {
-      key: tag.value,
+      key: tag[valueProp],
       size: size,
       onSelect: function onSelect() {
         return handleAddTag(tag);

package/input-tags/input-tags.types.d.ts

@@ -3,7 +3,7 @@ import type { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { ComponentProps } from 'react';
 export interface TagOption {
     label: string;
-    value: string;
+    [key: string]: string;
 }
 export interface InputTagsProps {
     value: TagOption[];
@@ -13,6 +13,7 @@ export interface InputTagsProps {
     placeholder?: string;
     allowCustomTags?: boolean;
     disabled?: boolean;
+    defaultOpen?: boolean;
     popoverClassName?: string;
     popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
     size?: FormSizeType;
@@ -23,4 +24,6 @@ export interface InputTagsProps {
     clearAllLabel?: string;
     generateLabel?: string;
     'aria-invalid'?: boolean;
+    valueProp?: string;
+    generateTagsPending?: boolean;
 }

package/package.json

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