@scaleflex/ui-tw 0.0.46 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { ComboboxMultiInlineProps } from '../combobox.types';
3
- export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, formItemId, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;
3
+ 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;
@@ -1,7 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId"];
4
+ var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId", "searchPlaceholder"];
5
5
  import { Popover } from '@scaleflex/ui-tw/popover';
6
6
  import { FormSize } from '@scaleflex/ui-tw/types/form-size';
7
7
  import React from 'react';
@@ -31,6 +31,7 @@ export function ComboboxMultiInline(_ref) {
31
31
  defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
32
32
  popoverContentProps = _ref.popoverContentProps,
33
33
  formItemId = _ref.formItemId,
34
+ searchPlaceholder = _ref.searchPlaceholder,
34
35
  rest = _objectWithoutProperties(_ref, _excluded);
35
36
  var _useState = useState(defaultOpen),
36
37
  _useState2 = _slicedToArray(_useState, 2),
@@ -81,6 +82,7 @@ export function ComboboxMultiInline(_ref) {
81
82
  formItemId: formItemId
82
83
  }, displayValue), /*#__PURE__*/React.createElement(ComboboxContent, {
83
84
  showGroupSeparator: showGroupSeparator,
85
+ searchPlaceholder: searchPlaceholder,
84
86
  className: popoverClassName,
85
87
  options: options,
86
88
  value: value,
@@ -1,3 +1,3 @@
1
1
  import * as React from 'react';
2
2
  import type { ComboboxMultiTagProps } from '../combobox.types';
3
- export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, ...rest }: ComboboxMultiTagProps): React.JSX.Element;
3
+ export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, defaultOpen, searchPlaceholder, popoverContentProps, ...rest }: ComboboxMultiTagProps): React.JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps"];
4
+ var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "searchPlaceholder", "popoverContentProps"];
5
5
  import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
6
6
  import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
7
7
  import { createClearHandlers } from '@scaleflex/ui-tw/combobox/combobox.utils';
@@ -36,6 +36,7 @@ export function ComboboxMultiTag(_ref) {
36
36
  showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
37
37
  _ref$defaultOpen = _ref.defaultOpen,
38
38
  defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
39
+ searchPlaceholder = _ref.searchPlaceholder,
39
40
  popoverContentProps = _ref.popoverContentProps,
40
41
  rest = _objectWithoutProperties(_ref, _excluded);
41
42
  var _getToolbarSizes = getToolbarSizes(size),
@@ -132,6 +133,7 @@ export function ComboboxMultiTag(_ref) {
132
133
  size: size,
133
134
  multiple: true,
134
135
  className: popoverClassName,
136
+ searchPlaceholder: searchPlaceholder,
135
137
  showGroupSeparator: showGroupSeparator,
136
138
  popoverContentProps: popoverContentProps
137
139
  }));
@@ -1,3 +1,3 @@
1
1
  import * as React from 'react';
2
2
  import type { ComboboxSingleProps } from '../combobox.types';
3
- export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, formItemId, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, ...rest }: ComboboxSingleProps): React.JSX.Element;
3
+ 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;
@@ -1,6 +1,6 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps"];
3
+ var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "searchPlaceholder"];
4
4
  import { Popover } from '@scaleflex/ui-tw/popover';
5
5
  import { FormSize } from '@scaleflex/ui-tw/types/form-size';
6
6
  import * as React from 'react';
@@ -32,6 +32,7 @@ export function ComboboxSingle(_ref) {
32
32
  _ref$defaultOpen = _ref.defaultOpen,
33
33
  defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
34
34
  popoverContentProps = _ref.popoverContentProps,
35
+ searchPlaceholder = _ref.searchPlaceholder,
35
36
  rest = _objectWithoutProperties(_ref, _excluded);
36
37
  var _useState = useState(defaultOpen),
37
38
  _useState2 = _slicedToArray(_useState, 2),
@@ -72,6 +73,7 @@ export function ComboboxSingle(_ref) {
72
73
  "aria-invalid": rest['aria-invalid'],
73
74
  formItemId: formItemId
74
75
  }, selectedLabel || placeholder), /*#__PURE__*/React.createElement(ComboboxContent, {
76
+ searchPlaceholder: searchPlaceholder,
75
77
  className: popoverClassName,
76
78
  options: options,
77
79
  value: value,
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import type { ComboboxContentProps, ComboboxTriggerProps } from './combobox.types';
3
3
  export declare function ComboboxTrigger({ children, open, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, ...rest }: ComboboxTriggerProps): React.JSX.Element;
4
- export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, }: ComboboxContentProps): React.JSX.Element;
4
+ export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, searchPlaceholder, }: ComboboxContentProps): React.JSX.Element;
@@ -88,12 +88,14 @@ export function ComboboxContent(_ref2) {
88
88
  className = _ref2.className,
89
89
  _ref2$showGroupSepara = _ref2.showGroupSeparator,
90
90
  showGroupSeparator = _ref2$showGroupSepara === void 0 ? false : _ref2$showGroupSepara,
91
- popoverContentProps = _ref2.popoverContentProps;
91
+ popoverContentProps = _ref2.popoverContentProps,
92
+ _ref2$searchPlacehold = _ref2.searchPlaceholder,
93
+ searchPlaceholder = _ref2$searchPlacehold === void 0 ? 'Search...' : _ref2$searchPlacehold;
92
94
  return /*#__PURE__*/React.createElement(PopoverContent, _extends({
93
95
  className: cn('p-0', className)
94
96
  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
95
97
  size: size,
96
- placeholder: "Search..."
98
+ placeholder: searchPlaceholder
97
99
  }), /*#__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) {
98
100
  if (isOptionGroup(option)) {
99
101
  return /*#__PURE__*/React.createElement(CommandGroup, {
@@ -27,6 +27,7 @@ export type ComboboxContentProps = {
27
27
  multiple?: boolean;
28
28
  className?: string;
29
29
  showGroupSeparator?: boolean;
30
+ searchPlaceholder?: string;
30
31
  popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
31
32
  };
32
33
  export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
@@ -56,6 +57,7 @@ interface ComboboxCommonProps {
56
57
  'aria-invalid'?: boolean;
57
58
  formItemId?: string;
58
59
  showGroupSeparator?: boolean;
60
+ searchPlaceholder?: string;
59
61
  popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
60
62
  }
61
63
  export interface ComboboxSingleProps extends ComboboxCommonProps {
@@ -1,3 +1,3 @@
1
1
  import { InputTagsProps } from '@scaleflex/ui-tw/input-tags/input-tags.types';
2
2
  import * as React from 'react';
3
- export declare function InputTags({ value, onChange, suggestedTags, allTags, placeholder, allowCustomTags, disabled, size, onGenerateTags, popoverClassName, popoverContentProps, formItemId, readOnly, className, ...rest }: InputTagsProps): React.JSX.Element;
3
+ 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;
@@ -1,8 +1,9 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
3
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
5
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["value", "onChange", "suggestedTags", "allTags", "placeholder", "allowCustomTags", "disabled", "size", "onGenerateTags", "popoverClassName", "popoverContentProps", "formItemId", "readOnly", "className"];
6
+ var _excluded = ["value", "onChange", "suggestedTags", "allTags", "placeholder", "allowCustomTags", "disabled", "defaultOpen", "size", "onGenerateTags", "popoverClassName", "popoverContentProps", "formItemId", "readOnly", "className", "clearAllLabel", "generateLabel", "valueProp", "generateTagsPending"];
6
7
  import { SparkleIcon } from '@scaleflex/icons-tw/sparkle-icon';
7
8
  import { Button } from '@scaleflex/ui-tw/button';
8
9
  import { iconSizeInTriggerOptions } from '@scaleflex/ui-tw/combobox/combobox.constants';
@@ -40,6 +41,8 @@ export function InputTags(_ref) {
40
41
  allowCustomTags = _ref$allowCustomTags === void 0 ? true : _ref$allowCustomTags,
41
42
  _ref$disabled = _ref.disabled,
42
43
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
44
+ _ref$defaultOpen = _ref.defaultOpen,
45
+ defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
43
46
  _ref$size = _ref.size,
44
47
  size = _ref$size === void 0 ? FormSize.Md : _ref$size,
45
48
  onGenerateTags = _ref.onGenerateTags,
@@ -48,6 +51,14 @@ export function InputTags(_ref) {
48
51
  formItemId = _ref.formItemId,
49
52
  readOnly = _ref.readOnly,
50
53
  className = _ref.className,
54
+ _ref$clearAllLabel = _ref.clearAllLabel,
55
+ clearAllLabel = _ref$clearAllLabel === void 0 ? 'Clear all' : _ref$clearAllLabel,
56
+ _ref$generateLabel = _ref.generateLabel,
57
+ generateLabel = _ref$generateLabel === void 0 ? 'Generate' : _ref$generateLabel,
58
+ _ref$valueProp = _ref.valueProp,
59
+ valueProp = _ref$valueProp === void 0 ? 'value' : _ref$valueProp,
60
+ _ref$generateTagsPend = _ref.generateTagsPending,
61
+ generateTagsPending = _ref$generateTagsPend === void 0 ? false : _ref$generateTagsPend,
51
62
  rest = _objectWithoutProperties(_ref, _excluded);
52
63
  var _useState = useState(false),
53
64
  _useState2 = _slicedToArray(_useState, 2),
@@ -62,7 +73,7 @@ export function InputTags(_ref) {
62
73
  buttonSize = _getToolbarSizes.buttonSize;
63
74
  var searchTrimmed = search.trim().toLowerCase();
64
75
  var isSameTag = function isSameTag(a, b) {
65
- return a.value.trim().toLowerCase() === b.value.trim().toLowerCase();
76
+ return a[valueProp].trim().toLowerCase() === b[valueProp].trim().toLowerCase();
66
77
  };
67
78
  var isSelected = function isSelected(tag) {
68
79
  return value.some(function (t) {
@@ -76,10 +87,9 @@ export function InputTags(_ref) {
76
87
  return normalizeLabel(label).toLowerCase().replace(/\s+/g, '-');
77
88
  };
78
89
  var createTag = function createTag(label) {
79
- return {
80
- label: normalizeLabel(label),
81
- value: normalizeValue(label)
82
- };
90
+ return _defineProperty({
91
+ label: normalizeLabel(label)
92
+ }, valueProp, normalizeValue(label));
83
93
  };
84
94
  var newTag = createTag(search);
85
95
  var canCreate = useMemo(function () {
@@ -114,7 +124,8 @@ export function InputTags(_ref) {
114
124
  });
115
125
  return /*#__PURE__*/React.createElement(Popover, {
116
126
  open: open,
117
- onOpenChange: setOpen
127
+ onOpenChange: setOpen,
128
+ defaultOpen: defaultOpen
118
129
  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
119
130
  asChild: true
120
131
  }, /*#__PURE__*/React.createElement("button", {
@@ -122,7 +133,7 @@ export function InputTags(_ref) {
122
133
  role: "combobox-tags",
123
134
  "aria-expanded": open,
124
135
  "aria-invalid": rest['aria-invalid'],
125
- disabled: disabled,
136
+ disabled: disabled || generateTagsPending,
126
137
  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])),
127
138
  onClick: function onClick() {
128
139
  return !disabled && setOpen(true);
@@ -135,7 +146,7 @@ export function InputTags(_ref) {
135
146
  className: "text-muted-foreground"
136
147
  }, placeholder) : value.map(function (tag) {
137
148
  return /*#__PURE__*/React.createElement(Pill, {
138
- key: tag.value,
149
+ key: tag[valueProp],
139
150
  size: size,
140
151
  removable: true,
141
152
  onRemove: function onRemove() {
@@ -153,12 +164,13 @@ export function InputTags(_ref) {
153
164
  "aria-label": "Clear all",
154
165
  "data-clear-icon": "true",
155
166
  onClick: handleClearAll
156
- }, "Clear all"), onGenerateTags && /*#__PURE__*/React.createElement(Button, {
167
+ }, clearAllLabel), onGenerateTags && /*#__PURE__*/React.createElement(Button, {
157
168
  tabIndex: 0,
158
169
  "aria-label": "Generate tags",
159
170
  type: "button",
160
171
  variant: "ghost-primary",
161
172
  size: buttonSize,
173
+ loading: generateTagsPending,
162
174
  startIcon: /*#__PURE__*/React.createElement(SparkleIcon, {
163
175
  className: "size-3.5"
164
176
  }),
@@ -166,7 +178,7 @@ export function InputTags(_ref) {
166
178
  e.stopPropagation();
167
179
  onGenerateTags === null || onGenerateTags === void 0 || onGenerateTags();
168
180
  }
169
- }, "Generate")), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
181
+ }, generateLabel)), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
170
182
  className: cn('mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
171
183
  })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
172
184
  className: cn('my-auto mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
@@ -184,7 +196,7 @@ export function InputTags(_ref) {
184
196
  heading: "Suggested"
185
197
  }, filteredSuggested.map(function (tag) {
186
198
  return /*#__PURE__*/React.createElement(CommandItem, {
187
- key: tag.value,
199
+ key: tag[valueProp],
188
200
  size: size,
189
201
  onSelect: function onSelect() {
190
202
  return handleAddTag(tag);
@@ -196,7 +208,7 @@ export function InputTags(_ref) {
196
208
  heading: "All Tags"
197
209
  }, filteredAll.map(function (tag) {
198
210
  return /*#__PURE__*/React.createElement(CommandItem, {
199
- key: tag.value,
211
+ key: tag[valueProp],
200
212
  size: size,
201
213
  onSelect: function onSelect() {
202
214
  return handleAddTag(tag);
@@ -3,7 +3,7 @@ import type { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
3
3
  import type { ComponentProps } from 'react';
4
4
  export interface TagOption {
5
5
  label: string;
6
- value: string;
6
+ [key: string]: string;
7
7
  }
8
8
  export interface InputTagsProps {
9
9
  value: TagOption[];
@@ -13,6 +13,7 @@ export interface InputTagsProps {
13
13
  placeholder?: string;
14
14
  allowCustomTags?: boolean;
15
15
  disabled?: boolean;
16
+ defaultOpen?: boolean;
16
17
  popoverClassName?: string;
17
18
  popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
18
19
  size?: FormSizeType;
@@ -20,5 +21,9 @@ export interface InputTagsProps {
20
21
  formItemId?: string;
21
22
  readOnly?: boolean;
22
23
  className?: string;
24
+ clearAllLabel?: string;
25
+ generateLabel?: string;
23
26
  'aria-invalid'?: boolean;
27
+ valueProp?: string;
28
+ generateTagsPending?: boolean;
24
29
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scaleflex/ui-tw",
3
- "version": "0.0.46",
3
+ "version": "0.0.48",
4
4
  "author": "scaleflex",
5
5
  "repository": "github:scaleflex/ui",
6
6
  "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -23,7 +23,7 @@
23
23
  "@radix-ui/react-slot": "^1.1.2",
24
24
  "@radix-ui/react-switch": "^1.0.1",
25
25
  "@radix-ui/react-tooltip": "^1.2.6",
26
- "@scaleflex/icons-tw": "^0.0.46",
26
+ "@scaleflex/icons-tw": "^0.0.48",
27
27
  "@tanstack/react-table": "^8.21.3",
28
28
  "@types/lodash.merge": "^4.6.9",
29
29
  "class-variance-authority": "^0.7.1",
@@ -4,6 +4,10 @@ import React from 'react';
4
4
  import { getToolbarSizes } from '../textarea.utils';
5
5
  export var LeftToolbarButtons = function LeftToolbarButtons(props) {
6
6
  var size = props.size,
7
+ _props$generateLabel = props.generateLabel,
8
+ generateLabel = _props$generateLabel === void 0 ? 'Generate' : _props$generateLabel,
9
+ _props$clearAllLabel = props.clearAllLabel,
10
+ clearAllLabel = _props$clearAllLabel === void 0 ? 'Clear all' : _props$clearAllLabel,
7
11
  onGenerate = props.onGenerate,
8
12
  onClearAll = props.onClearAll;
9
13
  var _getToolbarSizes = getToolbarSizes(size),
@@ -16,10 +20,10 @@ export var LeftToolbarButtons = function LeftToolbarButtons(props) {
16
20
  className: "size-3.5"
17
21
  }),
18
22
  onClick: onGenerate
19
- }, "Generate"), onClearAll && /*#__PURE__*/React.createElement(Button, {
23
+ }, generateLabel), onClearAll && /*#__PURE__*/React.createElement(Button, {
20
24
  type: "button",
21
25
  variant: "ghost-secondary",
22
26
  size: buttonSize,
23
27
  onClick: onClearAll
24
- }, "Clear all"));
28
+ }, clearAllLabel));
25
29
  };
@@ -18,6 +18,8 @@ export interface RightToolbarButtonsProps {
18
18
  }
19
19
  export interface LeftToolbarButtonsProps {
20
20
  size?: FormSizeType;
21
+ generateLabel?: string;
22
+ clearAllLabel?: string;
21
23
  onGenerate?: () => void;
22
24
  onClearAll?: () => void;
23
25
  }