@scaleflex/ui-tw 0.0.33 → 0.0.34

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.
Files changed (11) hide show
  1. package/combobox/combobox-multi-inline/combobox-multi-inline.component.d.ts +1 -1
  2. package/combobox/combobox-multi-inline/combobox-multi-inline.component.js +15 -5
  3. package/combobox/combobox-multi-tag/combobox-multi-tag.component.d.ts +1 -1
  4. package/combobox/combobox-multi-tag/combobox-multi-tag.component.js +24 -11
  5. package/combobox/combobox-single/combobox-single.component.d.ts +1 -1
  6. package/combobox/combobox-single/combobox-single.component.js +21 -9
  7. package/combobox/combobox.types.d.ts +6 -1
  8. package/package.json +2 -2
  9. package/select/components/selector.d.ts +1 -1
  10. package/select/components/selector.js +5 -2
  11. package/select/select.types.d.ts +1 -0
package/combobox/combobox-multi-inline/combobox-multi-inline.component.d.ts CHANGED
@@ -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, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;
3
+ export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;
package/combobox/combobox-multi-inline/combobox-multi-inline.component.js CHANGED
@@ -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"];
4
+ var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur"];
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';
@@ -24,6 +24,7 @@ export function ComboboxMultiInline(_ref) {
24
24
  _ref$showClear = _ref.showClear,
25
25
  showClear = _ref$showClear === void 0 ? true : _ref$showClear,
26
26
  popoverClassName = _ref.popoverClassName,
27
+ onBlur = _ref.onBlur,
27
28
  rest = _objectWithoutProperties(_ref, _excluded);
28
29
  var _useState = useState(false),
29
30
  _useState2 = _slicedToArray(_useState, 2),
@@ -46,9 +47,20 @@ export function ComboboxMultiInline(_ref) {
46
47
  onChange([].concat(_toConsumableArray(value), [v]));
47
48
  }
48
49
  };
50
+ var onOpenChange = function onOpenChange(isOpen) {
51
+ if (!isOpen) {
52
+ onBlur === null || onBlur === void 0 || onBlur(value);
53
+ }
54
+ setOpen(isOpen);
55
+ };
56
+ var onClearAll = function onClearAll() {
57
+ onChange([]);
58
+ onBlur === null || onBlur === void 0 || onBlur([]);
59
+ setOpen(false);
60
+ };
49
61
  return /*#__PURE__*/React.createElement(Popover, {
50
62
  open: open,
51
- onOpenChange: setOpen
63
+ onOpenChange: onOpenChange
52
64
  }, /*#__PURE__*/React.createElement(ComboboxTrigger, {
53
65
  open: open,
54
66
  disabled: disabled,
@@ -57,9 +69,7 @@ export function ComboboxMultiInline(_ref) {
57
69
  readOnly: readOnly,
58
70
  showClear: showClear,
59
71
  selected: selectedLabels.length > 0,
60
- onClearAll: function onClearAll() {
61
- return onChange([]);
62
- },
72
+ onClearAll: onClearAll,
63
73
  "aria-invalid": rest['aria-invalid']
64
74
  }, displayValue), /*#__PURE__*/React.createElement(ComboboxContent, {
65
75
  className: popoverClassName,
package/combobox/combobox-multi-tag/combobox-multi-tag.component.d.ts CHANGED
@@ -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, ...rest }: ComboboxMultiTagProps): React.JSX.Element;
3
+ export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, ...rest }: ComboboxMultiTagProps): React.JSX.Element;
package/combobox/combobox-multi-tag/combobox-multi-tag.component.js CHANGED
@@ -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"];
4
+ var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur"];
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';
@@ -31,6 +31,7 @@ export function ComboboxMultiTag(_ref) {
31
31
  _ref$readOnly = _ref.readOnly,
32
32
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
33
33
  popoverClassName = _ref.popoverClassName,
34
+ onBlur = _ref.onBlur,
34
35
  rest = _objectWithoutProperties(_ref, _excluded);
35
36
  var _getToolbarSizes = getToolbarSizes(size),
36
37
  buttonSize = _getToolbarSizes.buttonSize;
@@ -43,16 +44,26 @@ export function ComboboxMultiTag(_ref) {
43
44
  });
44
45
  var isSelected = selectedOptions.length > 0;
45
46
  var toggleValue = function toggleValue(v) {
46
- if (value.includes(v)) {
47
- onChange(value.filter(function (val) {
48
- return val !== v;
49
- }));
50
- } else {
51
- onChange([].concat(_toConsumableArray(value), [v]));
47
+ var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
48
+ _ref2$isTriggerOnBlur = _ref2.isTriggerOnBlur,
49
+ isTriggerOnBlur = _ref2$isTriggerOnBlur === void 0 ? false : _ref2$isTriggerOnBlur;
50
+ var nextValue = value.includes(v) ? value.filter(function (val) {
51
+ return val !== v;
52
+ }) : [].concat(_toConsumableArray(value), [v]);
53
+ onChange(nextValue);
54
+ if (isTriggerOnBlur) {
55
+ onBlur === null || onBlur === void 0 || onBlur(nextValue);
52
56
  }
53
57
  };
58
+ var onOpenChange = function onOpenChange(isOpen) {
59
+ if (!isOpen) {
60
+ onBlur === null || onBlur === void 0 || onBlur(value);
61
+ }
62
+ setOpen(isOpen);
63
+ };
54
64
  var onClearAll = function onClearAll() {
55
65
  onChange([]);
66
+ onBlur === null || onBlur === void 0 || onBlur([]);
56
67
  setOpen(false);
57
68
  };
58
69
  var _createClearHandlers = createClearHandlers(onClearAll),
@@ -60,7 +71,7 @@ export function ComboboxMultiTag(_ref) {
60
71
  handleOnTriggerKeyDown = _createClearHandlers.onKeyDown;
61
72
  return /*#__PURE__*/React.createElement(Popover, {
62
73
  open: open,
63
- onOpenChange: setOpen
74
+ onOpenChange: onOpenChange
64
75
  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
65
76
  asChild: true
66
77
  }, /*#__PURE__*/React.createElement("button", {
@@ -76,7 +87,7 @@ export function ComboboxMultiTag(_ref) {
76
87
  }, !isSelected ? /*#__PURE__*/React.createElement("span", {
77
88
  className: "text-muted-foreground"
78
89
  }, placeholder) : /*#__PURE__*/React.createElement("div", {
79
- className: cn('flex w-full flex-wrap justify-start gap-2', textareaVariants({
90
+ className: cn('flex w-full flex-wrap justify-start gap-2 overflow-y-auto', textareaVariants({
80
91
  size: size
81
92
  }), 'min-h-auto')
82
93
  }, selectedOptions.map(function (option) {
@@ -88,11 +99,13 @@ export function ComboboxMultiTag(_ref) {
88
99
  onRemove: function onRemove(event) {
89
100
  event.preventDefault();
90
101
  event.stopPropagation();
91
- toggleValue(option.value);
102
+ toggleValue(option.value, {
103
+ isTriggerOnBlur: true
104
+ });
92
105
  }
93
106
  }, option.label);
94
107
  })), isSelected ? /*#__PURE__*/React.createElement("div", {
95
- className: "flex w-full items-center justify-between px-1.5 pb-1.5"
108
+ className: "flex w-full items-center justify-between p-1.5"
96
109
  }, /*#__PURE__*/React.createElement("div", {
97
110
  role: "button",
98
111
  tabIndex: 0,
package/combobox/combobox-single/combobox-single.component.d.ts CHANGED
@@ -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, ...rest }: ComboboxSingleProps): React.JSX.Element;
3
+ export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, formItemId, onBlur, ...rest }: ComboboxSingleProps): React.JSX.Element;
package/combobox/combobox-single/combobox-single.component.js CHANGED
@@ -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"];
3
+ var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur"];
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';
@@ -26,6 +26,7 @@ export function ComboboxSingle(_ref) {
26
26
  _ref$showClear = _ref.showClear,
27
27
  showClear = _ref$showClear === void 0 ? true : _ref$showClear,
28
28
  formItemId = _ref.formItemId,
29
+ onBlur = _ref.onBlur,
29
30
  rest = _objectWithoutProperties(_ref, _excluded);
30
31
  var _useState = useState(false),
31
32
  _useState2 = _slicedToArray(_useState, 2),
@@ -34,18 +35,32 @@ export function ComboboxSingle(_ref) {
34
35
  var selectedLabel = (_flattenOptions$find = flattenOptions(options).find(function (opt) {
35
36
  return opt.value === value;
36
37
  })) === null || _flattenOptions$find === void 0 ? void 0 : _flattenOptions$find.label;
38
+ var onSelect = function onSelect(currentValue) {
39
+ onChange(currentValue === value ? '' : currentValue);
40
+ onBlur === null || onBlur === void 0 || onBlur(currentValue === value ? '' : currentValue);
41
+ setOpen(false);
42
+ };
43
+ var onOpenChange = function onOpenChange(isOpen) {
44
+ if (!isOpen) {
45
+ onBlur === null || onBlur === void 0 || onBlur(value);
46
+ }
47
+ setOpen(isOpen);
48
+ };
49
+ var onClearAll = function onClearAll() {
50
+ onChange('');
51
+ onBlur === null || onBlur === void 0 || onBlur('');
52
+ setOpen(false);
53
+ };
37
54
  return /*#__PURE__*/React.createElement(Popover, {
38
55
  open: open,
39
- onOpenChange: setOpen
56
+ onOpenChange: onOpenChange
40
57
  }, /*#__PURE__*/React.createElement(ComboboxTrigger, {
41
58
  open: open,
42
59
  disabled: disabled,
43
60
  className: className,
44
61
  size: size,
45
62
  readOnly: readOnly,
46
- onClearAll: function onClearAll() {
47
- return onChange('');
48
- },
63
+ onClearAll: onClearAll,
49
64
  selected: !!selectedLabel,
50
65
  showClear: showClear,
51
66
  "aria-invalid": rest['aria-invalid'],
@@ -54,10 +69,7 @@ export function ComboboxSingle(_ref) {
54
69
  className: popoverClassName,
55
70
  options: options,
56
71
  value: value,
57
- onSelect: function onSelect(currentValue) {
58
- onChange(currentValue === value ? '' : currentValue);
59
- setOpen(false);
60
- },
72
+ onSelect: onSelect,
61
73
  size: size
62
74
  }));
63
75
  }
package/combobox/combobox.types.d.ts CHANGED
@@ -19,7 +19,9 @@ export type ComboboxTriggerProps = {
19
19
  export type ComboboxContentProps = {
20
20
  options: SelectOption[];
21
21
  value: string | string[];
22
- onSelect: (value: string) => void;
22
+ onSelect: (value: string, options?: {
23
+ isTriggerOnBlur?: boolean;
24
+ }) => void;
23
25
  size?: FormSizeType;
24
26
  multiple?: boolean;
25
27
  className?: string;
@@ -53,15 +55,18 @@ interface ComboboxCommonProps {
53
55
  export interface ComboboxSingleProps extends ComboboxCommonProps {
54
56
  value: string;
55
57
  onChange: (value: string) => void;
58
+ onBlur?: (value: string) => void;
56
59
  showClear?: boolean;
57
60
  }
58
61
  export interface ComboboxMultiInlineProps extends ComboboxCommonProps {
59
62
  value: string[];
60
63
  onChange: (value: string[]) => void;
64
+ onBlur?: (value: string[]) => void;
61
65
  showClear?: boolean;
62
66
  }
63
67
  export interface ComboboxMultiTagProps extends ComboboxCommonProps {
64
68
  value: string[];
65
69
  onChange: (value: string[]) => void;
70
+ onBlur?: (value: string[]) => void;
66
71
  }
67
72
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scaleflex/ui-tw",
3
- "version": "0.0.33",
3
+ "version": "0.0.34",
4
4
  "author": "scaleflex",
5
5
  "repository": "github:scaleflex/ui",
6
6
  "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -20,7 +20,7 @@
20
20
  "@radix-ui/react-slot": "^1.1.2",
21
21
  "@radix-ui/react-switch": "^1.0.1",
22
22
  "@radix-ui/react-tooltip": "^1.2.6",
23
- "@scaleflex/icons-tw": "^0.0.33",
23
+ "@scaleflex/icons-tw": "^0.0.34",
24
24
  "@types/lodash.merge": "^4.6.9",
25
25
  "class-variance-authority": "^0.7.1",
26
26
  "cmdk": "^1.1.1",
package/select/components/selector.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { SelectorProps } from '../select.types';
3
- export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, ...rest }: SelectorProps): React.JSX.Element;
3
+ export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, popoverClassName, ...rest }: SelectorProps): React.JSX.Element;
package/select/components/selector.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
- var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId"];
2
+ var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId", "popoverClassName"];
3
3
  import { isOptionGroup } from '@scaleflex/ui-tw/form';
4
4
  import React from 'react';
5
5
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '../';
@@ -16,6 +16,7 @@ export function Selector(_ref) {
16
16
  options = _ref.options,
17
17
  showGroupSeparator = _ref.showGroupSeparator,
18
18
  formItemId = _ref.formItemId,
19
+ popoverClassName = _ref.popoverClassName,
19
20
  rest = _objectWithoutProperties(_ref, _excluded);
20
21
  return /*#__PURE__*/React.createElement(Select, {
21
22
  value: value,
@@ -30,7 +31,9 @@ export function Selector(_ref) {
30
31
  icon: icon
31
32
  }, /*#__PURE__*/React.createElement(SelectValue, {
32
33
  placeholder: placeholder
33
- })), /*#__PURE__*/React.createElement(SelectContent, null, options.map(function (option, groupIndex) {
34
+ })), /*#__PURE__*/React.createElement(SelectContent, {
35
+ className: popoverClassName
36
+ }, options.map(function (option, groupIndex) {
34
37
  if (isOptionGroup(option)) {
35
38
  return /*#__PURE__*/React.createElement(SelectGroup, {
36
39
  key: groupIndex
package/select/select.types.d.ts CHANGED
@@ -33,5 +33,6 @@ export interface SelectorProps {
33
33
  options: SelectOption[];
34
34
  showGroupSeparator?: boolean;
35
35
  formItemId?: string;
36
+ popoverClassName?: string;
36
37
  'aria-invalid'?: boolean;
37
38
  }