@scaleflex/ui-tw 0.0.53 → 0.0.55

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 (9) hide show
  1. package/combobox/combobox-multi-inline/combobox-multi-inline.component.js +63 -11
  2. package/combobox/combobox-multi-tag/combobox-multi-tag.component.js +1 -0
  3. package/combobox/combobox-single/combobox-single.component.js +27 -5
  4. package/combobox/combobox.component.d.ts +1 -1
  5. package/combobox/combobox.component.js +34 -5
  6. package/combobox/combobox.types.d.ts +1 -0
  7. package/form/form.types.d.ts +2 -1
  8. package/package.json +2 -2
  9. package/select/components/selector.js +26 -1
package/combobox/combobox-multi-inline/combobox-multi-inline.component.js CHANGED
@@ -2,11 +2,15 @@ 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
4
  var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId", "searchPlaceholder"];
5
+ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
6
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
7
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
8
+ import { isOptionGroup } from '@scaleflex/ui-tw/form';
5
9
  import { Popover } from '@scaleflex/ui-tw/popover';
6
10
  import { FormSize } from '@scaleflex/ui-tw/types/form-size';
7
11
  import React from 'react';
8
12
  import { useMemo, useState } from 'react';
9
- import { ComboboxContent, ComboboxTrigger, flattenOptions } from '../';
13
+ import { ComboboxContent, ComboboxTrigger } from '../';
10
14
  export function ComboboxMultiInline(_ref) {
11
15
  var _ref$options = _ref.options,
12
16
  options = _ref$options === void 0 ? [] : _ref$options,
@@ -38,21 +42,69 @@ export function ComboboxMultiInline(_ref) {
38
42
  open = _useState2[0],
39
43
  setOpen = _useState2[1];
40
44
  var selectedLabels = useMemo(function () {
41
- return flattenOptions(options).filter(function (option) {
42
- return value.includes(option.value);
43
- }).map(function (option) {
44
- return option.label;
45
- });
45
+ var labels = [];
46
+ var _iterator = _createForOfIteratorHelper(options),
47
+ _step;
48
+ try {
49
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
50
+ var option = _step.value;
51
+ if (isOptionGroup(option)) {
52
+ if (option.value && value.includes(option.value)) {
53
+ labels.push(option.label);
54
+ }
55
+ var _iterator2 = _createForOfIteratorHelper(option.options),
56
+ _step2;
57
+ try {
58
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
59
+ var sub = _step2.value;
60
+ if (value.includes(sub.value)) {
61
+ labels.push(sub.label);
62
+ }
63
+ }
64
+ } catch (err) {
65
+ _iterator2.e(err);
66
+ } finally {
67
+ _iterator2.f();
68
+ }
69
+ } else {
70
+ if (value.includes(option.value)) {
71
+ labels.push(option.label);
72
+ }
73
+ }
74
+ }
75
+ } catch (err) {
76
+ _iterator.e(err);
77
+ } finally {
78
+ _iterator.f();
79
+ }
80
+ return labels;
46
81
  }, [options, value]);
47
82
  var displayValue = selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholder;
48
83
  var toggleValue = function toggleValue(v) {
49
- if (value.includes(v)) {
50
- onChange(value.filter(function (val) {
51
- return val !== v;
52
- }));
84
+ var group = options.find(function (opt) {
85
+ return isOptionGroup(opt) && opt.value === v;
86
+ });
87
+ var nextValue;
88
+ if (group && isOptionGroup(group)) {
89
+ var childValues = group.options.map(function (child) {
90
+ return child.value;
91
+ });
92
+ var isGroupSelected = value.includes(group.value);
93
+ if (isGroupSelected) {
94
+ nextValue = value.filter(function (val) {
95
+ return val !== group.value;
96
+ });
97
+ } else {
98
+ nextValue = [].concat(_toConsumableArray(value.filter(function (val) {
99
+ return !childValues.includes(val);
100
+ })), [group.value]);
101
+ }
53
102
  } else {
54
- onChange([].concat(_toConsumableArray(value), [v]));
103
+ nextValue = value.includes(v) ? value.filter(function (val) {
104
+ return val !== v;
105
+ }) : [].concat(_toConsumableArray(value), [v]);
55
106
  }
107
+ onChange(nextValue);
56
108
  };
57
109
  var onOpenChange = function onOpenChange(isOpen) {
58
110
  if (!isOpen) {
package/combobox/combobox-multi-tag/combobox-multi-tag.component.js CHANGED
@@ -133,6 +133,7 @@ export function ComboboxMultiTag(_ref) {
133
133
  onSelect: toggleValue,
134
134
  size: size,
135
135
  multiple: true,
136
+ noGroupSelection: true,
136
137
  className: popoverClassName,
137
138
  searchPlaceholder: searchPlaceholder,
138
139
  showGroupSeparator: showGroupSeparator,
package/combobox/combobox-single/combobox-single.component.js CHANGED
@@ -1,14 +1,16 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "searchPlaceholder"];
4
+ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
5
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
6
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
+ import { isOptionGroup } from '@scaleflex/ui-tw/form';
4
8
  import { Popover } from '@scaleflex/ui-tw/popover';
5
9
  import { FormSize } from '@scaleflex/ui-tw/types/form-size';
6
10
  import * as React from 'react';
7
11
  import { useState } from 'react';
8
12
  import { ComboboxContent, ComboboxTrigger } from '../combobox.component';
9
- import { flattenOptions } from '../combobox.utils';
10
13
  export function ComboboxSingle(_ref) {
11
- var _flattenOptions$find;
12
14
  var _ref$options = _ref.options,
13
15
  options = _ref$options === void 0 ? [] : _ref$options,
14
16
  value = _ref.value,
@@ -38,9 +40,29 @@ export function ComboboxSingle(_ref) {
38
40
  _useState2 = _slicedToArray(_useState, 2),
39
41
  open = _useState2[0],
40
42
  setOpen = _useState2[1];
41
- var selectedLabel = (_flattenOptions$find = flattenOptions(options).find(function (opt) {
42
- return opt.value === value;
43
- })) === null || _flattenOptions$find === void 0 ? void 0 : _flattenOptions$find.label;
43
+ var selectedLabel = function () {
44
+ var _iterator = _createForOfIteratorHelper(options),
45
+ _step;
46
+ try {
47
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
48
+ var option = _step.value;
49
+ if (isOptionGroup(option)) {
50
+ if (option.value === value) return option.label;
51
+ var found = option.options.find(function (o) {
52
+ return o.value === value;
53
+ });
54
+ if (found) return found.label;
55
+ } else if (option.value === value) {
56
+ return option.label;
57
+ }
58
+ }
59
+ } catch (err) {
60
+ _iterator.e(err);
61
+ } finally {
62
+ _iterator.f();
63
+ }
64
+ return '';
65
+ }();
44
66
  var onSelect = function onSelect(currentValue) {
45
67
  onChange(currentValue === value ? '' : currentValue);
46
68
  onBlur === null || onBlur === void 0 || onBlur(currentValue === value ? '' : currentValue);
package/combobox/combobox.component.d.ts CHANGED
@@ -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, searchPlaceholder, }: ComboboxContentProps): React.JSX.Element;
4
+ export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, searchPlaceholder, noGroupSelection, }: ComboboxContentProps): React.JSX.Element;
package/combobox/combobox.component.js CHANGED
@@ -8,16 +8,25 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
8
8
  import { isOptionGroup } from '@scaleflex/ui-tw/form';
9
9
  import { PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
10
10
  import { SelectSeparator, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
11
- import { getBaseSelectClassNames, selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
11
+ import { getBaseSelectClassNames, selectLabelSizeOptions, selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
12
12
  import { Separator } from '@scaleflex/ui-tw/separator';
13
13
  import { focusRingClassNames, getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
14
14
  import { getToolbarSizes } from '@scaleflex/ui-tw/textarea/textarea.utils';
15
15
  import { FormSize } from '@scaleflex/ui-tw/types/form-size';
16
16
  import { cn } from '@scaleflex/ui-tw/utils/cn';
17
+ import { cva } from 'class-variance-authority';
17
18
  import { ChevronsUpDownIcon, XIcon } from 'lucide-react';
18
19
  import * as React from 'react';
19
20
  import { iconSizeInTriggerOptions, verticalSeparatorNextToChevronOptions } from './combobox.constants';
20
21
  import { createClearHandlers } from './combobox.utils';
22
+ var selectLabelVariants = cva('', {
23
+ variants: {
24
+ size: selectLabelSizeOptions
25
+ },
26
+ defaultVariants: {
27
+ size: FormSize.Md
28
+ }
29
+ });
21
30
  export function ComboboxTrigger(_ref) {
22
31
  var children = _ref.children,
23
32
  open = _ref.open,
@@ -90,7 +99,9 @@ export function ComboboxContent(_ref2) {
90
99
  showGroupSeparator = _ref2$showGroupSepara === void 0 ? false : _ref2$showGroupSepara,
91
100
  popoverContentProps = _ref2.popoverContentProps,
92
101
  _ref2$searchPlacehold = _ref2.searchPlaceholder,
93
- searchPlaceholder = _ref2$searchPlacehold === void 0 ? 'Search...' : _ref2$searchPlacehold;
102
+ searchPlaceholder = _ref2$searchPlacehold === void 0 ? 'Search...' : _ref2$searchPlacehold,
103
+ _ref2$noGroupSelectio = _ref2.noGroupSelection,
104
+ noGroupSelection = _ref2$noGroupSelectio === void 0 ? false : _ref2$noGroupSelectio;
94
105
  return /*#__PURE__*/React.createElement(PopoverContent, _extends({
95
106
  className: cn('p-0', className)
96
107
  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
@@ -101,9 +112,26 @@ export function ComboboxContent(_ref2) {
101
112
  if (isOptionGroup(option)) {
102
113
  return /*#__PURE__*/React.createElement(CommandGroup, {
103
114
  key: groupIndex,
104
- heading: option.label,
115
+ heading: !option.value || noGroupSelection ? option.label : undefined,
105
116
  size: size
106
- }, option.options.map(function (_ref3) {
117
+ }, !noGroupSelection && option.value && /*#__PURE__*/React.createElement(CommandItem, {
118
+ size: size,
119
+ multiple: multiple,
120
+ disabled: option.disabled,
121
+ key: option.value,
122
+ icon: option.icon,
123
+ value: option.value,
124
+ tooltip: option.tooltip,
125
+ disabledTooltip: option.disabledTooltip,
126
+ isGroup: true,
127
+ selectedValue: selectedValue,
128
+ onSelect: function onSelect() {
129
+ return _onSelect(option.value);
130
+ },
131
+ className: cn('text-secondary-foreground', selectLabelVariants({
132
+ size: size
133
+ }))
134
+ }, option.label), option.options.map(function (_ref3) {
107
135
  var label = _ref3.label,
108
136
  optionLabel = _ref3.optionLabel,
109
137
  value = _ref3.value,
@@ -111,10 +139,11 @@ export function ComboboxContent(_ref2) {
111
139
  icon = _ref3.icon,
112
140
  tooltip = _ref3.tooltip,
113
141
  disabledTooltip = _ref3.disabledTooltip;
142
+ var isGroupSelected = !noGroupSelection && multiple && option.value && Array.isArray(selectedValue) && selectedValue.includes(option.value);
114
143
  return /*#__PURE__*/React.createElement(CommandItem, {
115
144
  size: size,
116
145
  multiple: multiple,
117
- disabled: disabled,
146
+ disabled: disabled || !!isGroupSelected,
118
147
  key: value,
119
148
  icon: icon,
120
149
  value: value,
package/combobox/combobox.types.d.ts CHANGED
@@ -29,6 +29,7 @@ export type ComboboxContentProps = {
29
29
  showGroupSeparator?: boolean;
30
30
  searchPlaceholder?: string;
31
31
  popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
32
+ noGroupSelection?: boolean;
32
33
  };
33
34
  export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
34
35
  size?: FormSizeType;
package/form/form.types.d.ts CHANGED
@@ -63,8 +63,9 @@ export interface FlatOption {
63
63
  tooltip?: ReactElement | string;
64
64
  disabledTooltip?: ReactElement | string;
65
65
  }
66
- export interface OptionGroup {
66
+ export interface OptionGroup extends Omit<FlatOption, 'value' | 'label'> {
67
67
  label?: ReactElement | string;
68
+ value?: string;
68
69
  options: FlatOption[];
69
70
  }
70
71
  export type SelectOption = FlatOption | OptionGroup;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scaleflex/ui-tw",
3
- "version": "0.0.53",
3
+ "version": "0.0.55",
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.53",
26
+ "@scaleflex/icons-tw": "^0.0.55",
27
27
  "@tanstack/react-table": "^8.21.3",
28
28
  "@types/lodash.merge": "^4.6.9",
29
29
  "class-variance-authority": "^0.7.1",
package/select/components/selector.js CHANGED
@@ -5,8 +5,20 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
5
5
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
6
6
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
7
  import { isOptionGroup } from '@scaleflex/ui-tw/form';
8
+ import { selectLabelSizeOptions } from '@scaleflex/ui-tw/select/select.constants';
9
+ import { FormSize } from '@scaleflex/ui-tw/types/form-size';
10
+ import { cn } from '@scaleflex/ui-tw/utils/cn';
11
+ import { cva } from 'class-variance-authority';
8
12
  import React from 'react';
9
13
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '../';
14
+ var selectLabelVariants = cva('', {
15
+ variants: {
16
+ size: selectLabelSizeOptions
17
+ },
18
+ defaultVariants: {
19
+ size: FormSize.Md
20
+ }
21
+ });
10
22
  export function Selector(_ref) {
11
23
  var value = _ref.value,
12
24
  onChange = _ref.onChange,
@@ -32,6 +44,7 @@ export function Selector(_ref) {
32
44
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
33
45
  var option = _step.value;
34
46
  if (isOptionGroup(option)) {
47
+ if (option.value === val) return option.label;
35
48
  var found = option.options.find(function (o) {
36
49
  return o.value === val;
37
50
  });
@@ -68,7 +81,19 @@ export function Selector(_ref) {
68
81
  if (isOptionGroup(option)) {
69
82
  return /*#__PURE__*/React.createElement(SelectGroup, {
70
83
  key: groupIndex
71
- }, option.label && /*#__PURE__*/React.createElement(SelectLabel, {
84
+ }, option.value ? /*#__PURE__*/React.createElement(SelectItem, {
85
+ key: option.value,
86
+ value: option.value,
87
+ disabled: option.disabled,
88
+ size: size,
89
+ icon: option.icon,
90
+ tooltip: option.tooltip,
91
+ disabledTooltip: option.disabledTooltip,
92
+ isGroup: true,
93
+ className: cn('text-secondary-foreground', selectLabelVariants({
94
+ size: size
95
+ }))
96
+ }, option.label) : option.label && /*#__PURE__*/React.createElement(SelectLabel, {
72
97
  size: size
73
98
  }, option.label), option.options.map(function (_ref2) {
74
99
  var label = _ref2.label,