@scaleflex/ui-tw 0.0.44 → 0.0.46

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, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;
+export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, formItemId, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;

package/combobox/combobox-multi-inline/combobox-multi-inline.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", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId"];
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import React from 'react';
@@ -30,6 +30,7 @@ export function ComboboxMultiInline(_ref) {
     _ref$defaultOpen = _ref.defaultOpen,
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     popoverContentProps = _ref.popoverContentProps,
+    formItemId = _ref.formItemId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
@@ -76,7 +77,8 @@ export function ComboboxMultiInline(_ref) {
     showClear: showClear,
     selected: selectedLabels.length > 0,
     onClearAll: onClearAll,
-    "aria-invalid": rest['aria-invalid']
+    "aria-invalid": rest['aria-invalid'],
+    formItemId: formItemId
   }, displayValue), /*#__PURE__*/React.createElement(ComboboxContent, {
     showGroupSeparator: showGroupSeparator,
     className: popoverClassName,

package/combobox/combobox.component.js

@@ -94,9 +94,7 @@ export function ComboboxContent(_ref2) {
   }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
     size: size,
     placeholder: "Search..."
-  }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, {
-    className: "text-muted-foreground"
-  }, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
+  }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
     if (isOptionGroup(option)) {
       return /*#__PURE__*/React.createElement(CommandGroup, {
         key: groupIndex,

package/form/components/form-tags-field.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import type { FormTagsFieldProps } from '../form.types';
+declare function FormTagsField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ tagsProps, ...rest }: FormTagsFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormTagsField };

package/form/components/form-tags-field.component.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["placeholder", "suggestedTags", "allTags", "allowCustomTags", "onGenerateTags"],
+  _excluded2 = ["tagsProps"];
+import { useFormField } from '@scaleflex/ui-tw/form';
+import { FormFieldGroup } from '@scaleflex/ui-tw/form';
+import { InputTags } from '@scaleflex/ui-tw/input-tags';
+import React from 'react';
+function FormTagsInner(_ref) {
+  var field = _ref.field,
+    args = _ref.args,
+    tagsProps = _ref.tagsProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    className = _ref.className;
+  var _useFormField = useFormField(),
+    error = _useFormField.error,
+    formItemId = _useFormField.formItemId;
+  var _ref2 = tagsProps || {},
+    placeholder = _ref2.placeholder,
+    suggestedTags = _ref2.suggestedTags,
+    allTags = _ref2.allTags,
+    allowCustomTags = _ref2.allowCustomTags,
+    onGenerateTags = _ref2.onGenerateTags,
+    restTagsProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(InputTags, _extends({
+    value: field.value,
+    onChange: field.onChange,
+    placeholder: placeholder,
+    suggestedTags: suggestedTags,
+    allTags: allTags,
+    allowCustomTags: allowCustomTags,
+    onGenerateTags: onGenerateTags,
+    disabled: disabled,
+    readOnly: readOnly,
+    formItemId: formItemId,
+    size: args === null || args === void 0 ? void 0 : args.size,
+    "aria-invalid": !!error,
+    className: className
+  }, restTagsProps));
+}
+function FormTagsField(_ref3) {
+  var tagsProps = _ref3.tagsProps,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var readOnly = rest.readOnly,
+    disabled = rest.disabled;
+  return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
+    return /*#__PURE__*/React.createElement(FormTagsInner, {
+      field: field,
+      args: args,
+      tagsProps: tagsProps,
+      readOnly: readOnly,
+      disabled: disabled
+    });
+  });
+}
+export { FormTagsField };

package/form/form.types.d.ts

@@ -2,13 +2,14 @@ import { CheckboxProps } from '@scaleflex/ui-tw/checkbox/checkbox.types';
 import type { ComboboxMultiInlineProps, ComboboxMultiTagProps, ComboboxSingleProps } from '@scaleflex/ui-tw/combobox/combobox.types';
 import type { DatePickerProps } from '@scaleflex/ui-tw/date-picker/date-picker.types';
 import type { InputProps } from '@scaleflex/ui-tw/input';
+import { InputTagsProps } from '@scaleflex/ui-tw/input-tags/input-tags.types';
 import type { RadioGroupItemProps } from '@scaleflex/ui-tw/radio-group/radio-group.types';
 import type { SelectProps } from '@scaleflex/ui-tw/select/select.types';
 import type { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
 import type { TextareaProps } from '@scaleflex/ui-tw/textarea';
 import type { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { Values } from '@scaleflex/ui-tw/types/values';
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { Control, type ControllerRenderProps, type FieldPath, type FieldValues, type Path, type UseControllerProps } from 'react-hook-form';
 import { FormMessageSize, SwitchLayout } from './form.constants';
 export type FormMessageSizeType = Values<typeof FormMessageSize>;
@@ -127,4 +128,15 @@ export interface FormDatePickerInnerProps<TFieldValues extends FieldValues, TNam
     readOnly?: boolean;
     disabled?: boolean;
 }
+export type FormTagsFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    tagsProps?: Partial<InputTagsProps>;
+};
+export interface FormTagsInnerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    args?: FormFieldArgs;
+    tagsProps?: Partial<InputTagsProps>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
 export {};

package/form/index.d.ts

@@ -12,3 +12,4 @@ export { FormCheckboxField } from './components/form-checkbox-field.component';
 export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
 export { FormRadioGroupField } from './components/form-radio-group-field.component';
 export { FormDatePickerField } from './components/form-date-picker-field.component';
+export { FormTagsField } from './components/form-tags-field.component';

package/form/index.js

@@ -10,4 +10,5 @@ export { FormComboboxField } from './components/form-combobox-field.component';
 export { FormCheckboxField } from './components/form-checkbox-field.component';
 export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
 export { FormRadioGroupField } from './components/form-radio-group-field.component';
-export { FormDatePickerField } from './components/form-date-picker-field.component';
+export { FormDatePickerField } from './components/form-date-picker-field.component';
+export { FormTagsField } from './components/form-tags-field.component';

package/input-tags/index.d.ts

@@ -0,0 +1 @@
+export { InputTags } from './input-tags.component';

package/input-tags/index.js

@@ -0,0 +1 @@
+export { InputTags } from './input-tags.component';

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

@@ -0,0 +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, ...rest }: InputTagsProps): React.JSX.Element;

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

@@ -0,0 +1,212 @@
+import _extends from "@babel/runtime/helpers/extends";
+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"];
+import { SparkleIcon } from '@scaleflex/icons-tw/sparkle-icon';
+import { Button } from '@scaleflex/ui-tw/button';
+import { iconSizeInTriggerOptions } from '@scaleflex/ui-tw/combobox/combobox.constants';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@scaleflex/ui-tw/command';
+import { Pill } from '@scaleflex/ui-tw/pill';
+import { Popover, PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
+import { selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
+import { focusRingClassNames, getBaseInputClasses, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { textareaSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
+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 } from 'lucide-react';
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+var inputTagsVariants = cva('', {
+  variants: {
+    size: textareaSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+export function InputTags(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$suggestedTags = _ref.suggestedTags,
+    suggestedTags = _ref$suggestedTags === void 0 ? [] : _ref$suggestedTags,
+    _ref$allTags = _ref.allTags,
+    allTags = _ref$allTags === void 0 ? [] : _ref$allTags,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select or create tags...' : _ref$placeholder,
+    _ref$allowCustomTags = _ref.allowCustomTags,
+    allowCustomTags = _ref$allowCustomTags === void 0 ? true : _ref$allowCustomTags,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    onGenerateTags = _ref.onGenerateTags,
+    popoverClassName = _ref.popoverClassName,
+    popoverContentProps = _ref.popoverContentProps,
+    formItemId = _ref.formItemId,
+    readOnly = _ref.readOnly,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    search = _useState4[0],
+    setSearch = _useState4[1];
+  var tagsList = [].concat(_toConsumableArray(suggestedTags), _toConsumableArray(allTags));
+  var _getToolbarSizes = getToolbarSizes(size),
+    buttonSize = _getToolbarSizes.buttonSize;
+  var searchTrimmed = search.trim().toLowerCase();
+  var isSameTag = function isSameTag(a, b) {
+    return a.value.trim().toLowerCase() === b.value.trim().toLowerCase();
+  };
+  var isSelected = function isSelected(tag) {
+    return value.some(function (t) {
+      return isSameTag(t, tag);
+    });
+  };
+  var normalizeLabel = function normalizeLabel(label) {
+    return label.trim().replace(/\s+/g, ' ');
+  };
+  var normalizeValue = function normalizeValue(label) {
+    return normalizeLabel(label).toLowerCase().replace(/\s+/g, '-');
+  };
+  var createTag = function createTag(label) {
+    return {
+      label: normalizeLabel(label),
+      value: normalizeValue(label)
+    };
+  };
+  var newTag = createTag(search);
+  var canCreate = useMemo(function () {
+    if (!allowCustomTags || !searchTrimmed) return false;
+    return !value.some(function (v) {
+      return isSameTag(v, newTag);
+    }) && !tagsList.some(function (t) {
+      return isSameTag(t, newTag);
+    });
+  }, [newTag, value, tagsList, allowCustomTags, searchTrimmed]);
+  var handleAddTag = function handleAddTag(tag) {
+    if (isSelected(tag)) return;
+    onChange([].concat(_toConsumableArray(value), [tag]));
+    setSearch('');
+    setOpen(true);
+  };
+  var handleRemoveTag = function handleRemoveTag(tag) {
+    onChange(value.filter(function (t) {
+      return !isSameTag(t, tag);
+    }));
+  };
+  var handleClearAll = function handleClearAll() {
+    onChange([]);
+    setSearch('');
+    setOpen(false);
+  };
+  var filteredSuggested = suggestedTags.filter(function (tag) {
+    return !isSelected(tag) && tag.label.toLowerCase().includes(searchTrimmed);
+  });
+  var filteredAll = allTags.filter(function (tag) {
+    return !isSelected(tag) && tag.label.toLowerCase().includes(searchTrimmed);
+  });
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("button", {
+    id: formItemId,
+    role: "combobox-tags",
+    "aria-expanded": open,
+    "aria-invalid": rest['aria-invalid'],
+    disabled: disabled,
+    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);
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('flex w-full flex-wrap gap-2', inputTagsVariants({
+      size: size
+    }), 'min-h-auto')
+  }, value.length === 0 ? /*#__PURE__*/React.createElement("span", {
+    className: "text-muted-foreground"
+  }, placeholder) : value.map(function (tag) {
+    return /*#__PURE__*/React.createElement(Pill, {
+      key: tag.value,
+      size: size,
+      removable: true,
+      onRemove: function onRemove() {
+        return handleRemoveTag(tag);
+      }
+    }, tag.label);
+  })), onGenerateTags || value.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full items-center justify-between p-1.5 pt-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2"
+  }, value.length > 0 && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "ghost-secondary",
+    size: buttonSize,
+    "aria-label": "Clear all",
+    "data-clear-icon": "true",
+    onClick: handleClearAll
+  }, "Clear all"), onGenerateTags && /*#__PURE__*/React.createElement(Button, {
+    tabIndex: 0,
+    "aria-label": "Generate tags",
+    type: "button",
+    variant: "ghost-primary",
+    size: buttonSize,
+    startIcon: /*#__PURE__*/React.createElement(SparkleIcon, {
+      className: "size-3.5"
+    }),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onGenerateTags === null || onGenerateTags === void 0 || onGenerateTags();
+    }
+  }, "Generate")), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
+    className: cn('mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+  })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
+    className: cn('my-auto mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+  })))), /*#__PURE__*/React.createElement(PopoverContent, _extends({
+    className: cn('w-[--radix-popover-trigger-width] p-0', popoverClassName)
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, {
+    shouldFilter: false
+  }, /*#__PURE__*/React.createElement(CommandInput, {
+    size: size,
+    value: search,
+    onValueChange: setSearch,
+    placeholder: "Search or create a tag"
+  }), /*#__PURE__*/React.createElement(CommandList, null, filteredSuggested.length > 0 && /*#__PURE__*/React.createElement(CommandGroup, {
+    size: size,
+    heading: "Suggested"
+  }, filteredSuggested.map(function (tag) {
+    return /*#__PURE__*/React.createElement(CommandItem, {
+      key: tag.value,
+      size: size,
+      onSelect: function onSelect() {
+        return handleAddTag(tag);
+      },
+      isGroup: true
+    }, tag.label);
+  })), filteredAll.length > 0 && /*#__PURE__*/React.createElement(CommandGroup, {
+    size: size,
+    heading: "All Tags"
+  }, filteredAll.map(function (tag) {
+    return /*#__PURE__*/React.createElement(CommandItem, {
+      key: tag.value,
+      size: size,
+      onSelect: function onSelect() {
+        return handleAddTag(tag);
+      },
+      isGroup: true
+    }, tag.label);
+  })), !canCreate && filteredSuggested.length === 0 && filteredAll.length === 0 && /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), canCreate && /*#__PURE__*/React.createElement(CommandItem, {
+    size: size,
+    onSelect: function onSelect() {
+      return handleAddTag(newTag);
+    }
+  }, "Create \"", search.trim(), "\"")))));
+}

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

@@ -0,0 +1,24 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import type { ComponentProps } from 'react';
+export interface TagOption {
+    label: string;
+    value: string;
+}
+export interface InputTagsProps {
+    value: TagOption[];
+    onChange: (value: TagOption[]) => void;
+    suggestedTags?: TagOption[];
+    allTags?: TagOption[];
+    placeholder?: string;
+    allowCustomTags?: boolean;
+    disabled?: boolean;
+    popoverClassName?: string;
+    popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
+    size?: FormSizeType;
+    onGenerateTags?: () => void;
+    formItemId?: string;
+    readOnly?: boolean;
+    className?: string;
+    'aria-invalid'?: boolean;
+}

package/input-tags/input-tags.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/types/react-table.d.ts

@@ -0,0 +1,7 @@
+import '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta {
+    className?: string
+  }
+}