@scaleflex/ui-tw 0.0.85 → 0.0.87

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 (5) hide show
  1. package/combobox/combobox.types.d.ts +5 -0
  2. package/command/command.component.d.ts +3 -2
  3. package/command/command.component.js +114 -50
  4. package/date-picker/date-picker.component.js +5 -6
  5. package/package.json +2 -2
package/combobox/combobox.types.d.ts CHANGED
@@ -47,6 +47,11 @@ export type ComboboxContentProps = {
47
47
  actions?: ReactNode[];
48
48
  fixedActions?: boolean;
49
49
  };
50
+ export type CommandClearProps = ButtonHTMLAttributes<HTMLButtonElement> & {
51
+ size?: FormSizeType;
52
+ onCleared?: () => void;
53
+ cancelDebounce?: () => void;
54
+ };
50
55
  export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
51
56
  size?: FormSizeType;
52
57
  wrapperClassName?: string;
package/command/command.component.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { CommandGroupProps, CommandInputProps, CommandItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
1
+ import type { CommandClearProps, CommandGroupProps, CommandInputProps, CommandItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
2
2
  import { Dialog } from '@scaleflex/ui-tw/dialog';
3
3
  import { Command as CommandPrimitive } from 'cmdk';
4
4
  import React from 'react';
@@ -9,6 +9,7 @@ declare function CommandDialog({ title, description, children, ...props }: Compo
9
9
  description?: string;
10
10
  }): React.JSX.Element;
11
11
  declare function CommandInput({ className, size, wrapperClassName, ...props }: CommandInputProps): React.JSX.Element;
12
+ declare function CommandClear({ className, onCleared, cancelDebounce, size, ...props }: CommandClearProps): React.JSX.Element | null;
12
13
  declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
13
14
  declare function CommandEmpty({ className, ...rest }: ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
14
15
  declare function CommandGroup({ className, size, ...props }: CommandGroupProps): React.JSX.Element;
@@ -16,4 +17,4 @@ declare function CommandSeparator({ className, ...props }: ComponentProps<typeof
16
17
  declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, iconClassName, ...props }: CommandItemProps): React.JSX.Element;
17
18
  declare function CommandCheckboxItem({ className, size, isGroup, children, selectedValue, value, icon, disabled, tooltip, disabledTooltip, ...props }: CommandItemProps): React.JSX.Element;
18
19
  declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
19
- export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, };
20
+ export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, };
package/command/command.component.js CHANGED
@@ -1,35 +1,43 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
4
  var _excluded = ["className"],
4
5
  _excluded2 = ["title", "description", "children"],
5
6
  _excluded3 = ["className", "size", "wrapperClassName"],
6
- _excluded4 = ["className"],
7
+ _excluded4 = ["className", "onCleared", "cancelDebounce", "size"],
7
8
  _excluded5 = ["className"],
8
- _excluded6 = ["className", "size"],
9
- _excluded7 = ["className"],
10
- _excluded8 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName"],
11
- _excluded9 = ["className", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
12
- _excluded10 = ["className"];
9
+ _excluded6 = ["className"],
10
+ _excluded7 = ["className", "size"],
11
+ _excluded8 = ["className"],
12
+ _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName"],
13
+ _excluded10 = ["className", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
14
+ _excluded11 = ["className"];
15
+ import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
16
+ import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
13
17
  import { Checkbox } from '@scaleflex/ui-tw/checkbox';
14
18
  import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
15
19
  import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
20
+ import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
16
21
  import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
17
22
  import { selectItemVariants, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
18
23
  import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
24
+ import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
19
25
  import { switchThumbSizeOptions } from '@scaleflex/ui-tw/switch/switch.constants';
20
26
  import { FormSize } from '@scaleflex/ui-tw/types/form-size';
21
27
  import { cn } from '@scaleflex/ui-tw/utils/cn';
22
28
  import { cva } from 'class-variance-authority';
23
29
  import { Command as CommandPrimitive } from 'cmdk';
24
- import { CheckIcon, SearchIcon } from 'lucide-react';
30
+ import { useCommandState } from 'cmdk';
31
+ import { CheckIcon, SearchIcon, XIcon } from 'lucide-react';
25
32
  import React from 'react';
33
+ import { useCallback } from 'react';
26
34
  import { selectCommandHeadingOptions } from './command.utils';
27
35
  function Command(_ref) {
28
36
  var className = _ref.className,
29
37
  props = _objectWithoutProperties(_ref, _excluded);
30
38
  return /*#__PURE__*/React.createElement(CommandPrimitive, _extends({
31
39
  "data-slot": "command",
32
- className: cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden', className)
40
+ className: cn('text-popover-foreground relative flex h-full w-full flex-col overflow-hidden', className)
33
41
  }, props));
34
42
  }
35
43
  function CommandDialog(_ref2) {
@@ -65,17 +73,73 @@ function CommandInput(_ref3) {
65
73
  className: cn('placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)
66
74
  }, props)));
67
75
  }
68
- function CommandList(_ref4) {
76
+ function CommandClear(_ref4) {
69
77
  var className = _ref4.className,
78
+ onCleared = _ref4.onCleared,
79
+ cancelDebounce = _ref4.cancelDebounce,
80
+ _ref4$size = _ref4.size,
81
+ size = _ref4$size === void 0 ? FormSize.Md : _ref4$size,
70
82
  props = _objectWithoutProperties(_ref4, _excluded4);
83
+ var search = useCommandState(function (s) {
84
+ return s.search;
85
+ });
86
+ var crossSize = crossSizeOptions[size];
87
+ var onClickClear = useCallback(function (e) {
88
+ e.preventDefault();
89
+ var root = e.currentTarget.closest('[cmdk-root]');
90
+ var input = root === null || root === void 0 ? void 0 : root.querySelector('[cmdk-input]');
91
+ if (input) {
92
+ var _Object$getOwnPropert;
93
+ var setter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
94
+ setter === null || setter === void 0 || setter.call(input, '');
95
+ input.dispatchEvent(new Event('input', {
96
+ bubbles: true
97
+ }));
98
+ input.focus();
99
+ }
100
+ var list = root === null || root === void 0 ? void 0 : root.querySelector('[cmdk-list]');
101
+ if (list) {
102
+ requestAnimationFrame(function () {
103
+ list.scrollTop = 0;
104
+ input === null || input === void 0 || input.dispatchEvent(new KeyboardEvent('keydown', {
105
+ key: 'Home',
106
+ bubbles: true
107
+ }));
108
+ });
109
+ }
110
+ cancelDebounce === null || cancelDebounce === void 0 || cancelDebounce();
111
+ onCleared === null || onCleared === void 0 || onCleared();
112
+ }, [cancelDebounce, onCleared]);
113
+ if (!search) return null;
114
+ return /*#__PURE__*/React.createElement("button", _extends({
115
+ role: "button",
116
+ tabIndex: 0,
117
+ onPointerDown: function onPointerDown(e) {
118
+ return e.preventDefault();
119
+ },
120
+ onClick: onClickClear,
121
+ "data-clear-icon": "true",
122
+ "aria-label": "Clear search",
123
+ className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
124
+ size: crossSize,
125
+ variant: ButtonVariant.GhostSecondary
126
+ }), 'absolute top-1/2 right-2 -translate-y-1/2', className]))
127
+ }, props), /*#__PURE__*/React.createElement(XIcon, {
128
+ "data-clear-icon": true,
129
+ className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0')
130
+ }));
131
+ }
132
+ function CommandList(_ref5) {
133
+ var className = _ref5.className,
134
+ props = _objectWithoutProperties(_ref5, _excluded5);
71
135
  return /*#__PURE__*/React.createElement(CommandPrimitive.List, _extends({
72
136
  "data-slot": "command-list",
73
137
  className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)
74
138
  }, props));
75
139
  }
76
- function CommandEmpty(_ref5) {
77
- var className = _ref5.className,
78
- rest = _objectWithoutProperties(_ref5, _excluded5);
140
+ function CommandEmpty(_ref6) {
141
+ var className = _ref6.className,
142
+ rest = _objectWithoutProperties(_ref6, _excluded6);
79
143
  return /*#__PURE__*/React.createElement(CommandPrimitive.Empty, _extends({
80
144
  "data-slot": "command-empty",
81
145
  className: cn('text-muted-foreground py-6 text-center text-sm', className)
@@ -89,10 +153,10 @@ var selectCommandHeadingVariants = cva('', {
89
153
  size: FormSize.Md
90
154
  }
91
155
  });
92
- function CommandGroup(_ref6) {
93
- var className = _ref6.className,
94
- size = _ref6.size,
95
- props = _objectWithoutProperties(_ref6, _excluded6);
156
+ function CommandGroup(_ref7) {
157
+ var className = _ref7.className,
158
+ size = _ref7.size,
159
+ props = _objectWithoutProperties(_ref7, _excluded7);
96
160
  return /*#__PURE__*/React.createElement(CommandPrimitive.Group, _extends({
97
161
  "data-slot": "command-group",
98
162
  className: cn('[&_[cmdk-group-heading]]:text-secondary-foreground [&_[cmdk-group-heading]]:pointer-events-none', 'text-foreground overflow-hidden', selectCommandHeadingVariants({
@@ -100,29 +164,29 @@ function CommandGroup(_ref6) {
100
164
  }), className)
101
165
  }, props));
102
166
  }
103
- function CommandSeparator(_ref7) {
104
- var className = _ref7.className,
105
- props = _objectWithoutProperties(_ref7, _excluded7);
167
+ function CommandSeparator(_ref8) {
168
+ var className = _ref8.className,
169
+ props = _objectWithoutProperties(_ref8, _excluded8);
106
170
  return /*#__PURE__*/React.createElement(CommandPrimitive.Separator, _extends({
107
171
  "data-slot": "command-separator",
108
172
  className: cn('bg-border -mx-1 h-px', className)
109
173
  }, props));
110
174
  }
111
- function CommandItem(_ref8) {
112
- var className = _ref8.className,
113
- size = _ref8.size,
114
- isGroup = _ref8.isGroup,
115
- icon = _ref8.icon,
116
- tooltip = _ref8.tooltip,
117
- children = _ref8.children,
118
- selectedValue = _ref8.selectedValue,
119
- multiple = _ref8.multiple,
120
- value = _ref8.value,
121
- shortcut = _ref8.shortcut,
122
- disabledTooltip = _ref8.disabledTooltip,
123
- disabled = _ref8.disabled,
124
- iconClassName = _ref8.iconClassName,
125
- props = _objectWithoutProperties(_ref8, _excluded8);
175
+ function CommandItem(_ref9) {
176
+ var className = _ref9.className,
177
+ size = _ref9.size,
178
+ isGroup = _ref9.isGroup,
179
+ icon = _ref9.icon,
180
+ tooltip = _ref9.tooltip,
181
+ children = _ref9.children,
182
+ selectedValue = _ref9.selectedValue,
183
+ multiple = _ref9.multiple,
184
+ value = _ref9.value,
185
+ shortcut = _ref9.shortcut,
186
+ disabledTooltip = _ref9.disabledTooltip,
187
+ disabled = _ref9.disabled,
188
+ iconClassName = _ref9.iconClassName,
189
+ props = _objectWithoutProperties(_ref9, _excluded9);
126
190
  var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
127
191
  return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
128
192
  "data-slot": "command-item",
@@ -154,18 +218,18 @@ function CommandItem(_ref8) {
154
218
  className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
155
219
  })));
156
220
  }
157
- function CommandCheckboxItem(_ref9) {
158
- var className = _ref9.className,
159
- size = _ref9.size,
160
- isGroup = _ref9.isGroup,
161
- children = _ref9.children,
162
- selectedValue = _ref9.selectedValue,
163
- value = _ref9.value,
164
- icon = _ref9.icon,
165
- disabled = _ref9.disabled,
166
- tooltip = _ref9.tooltip,
167
- disabledTooltip = _ref9.disabledTooltip,
168
- props = _objectWithoutProperties(_ref9, _excluded9);
221
+ function CommandCheckboxItem(_ref10) {
222
+ var className = _ref10.className,
223
+ size = _ref10.size,
224
+ isGroup = _ref10.isGroup,
225
+ children = _ref10.children,
226
+ selectedValue = _ref10.selectedValue,
227
+ value = _ref10.value,
228
+ icon = _ref10.icon,
229
+ disabled = _ref10.disabled,
230
+ tooltip = _ref10.tooltip,
231
+ disabledTooltip = _ref10.disabledTooltip,
232
+ props = _objectWithoutProperties(_ref10, _excluded10);
169
233
  var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
170
234
  return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
171
235
  "data-slot": "command-checkbox-item",
@@ -194,12 +258,12 @@ function CommandCheckboxItem(_ref9) {
194
258
  tooltip: disabled ? disabledTooltip : tooltip
195
259
  }))));
196
260
  }
197
- function CommandShortcut(_ref10) {
198
- var className = _ref10.className,
199
- props = _objectWithoutProperties(_ref10, _excluded10);
261
+ function CommandShortcut(_ref11) {
262
+ var className = _ref11.className,
263
+ props = _objectWithoutProperties(_ref11, _excluded11);
200
264
  return /*#__PURE__*/React.createElement("span", _extends({
201
265
  "data-slot": "command-shortcut",
202
266
  className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)
203
267
  }, props));
204
268
  }
205
- export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator };
269
+ export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear };
package/date-picker/date-picker.component.js CHANGED
@@ -34,8 +34,7 @@ function DatePicker(_ref) {
34
34
  popoverContentProps = _ref.popoverContentProps,
35
35
  onKeyDown = _ref.onKeyDown,
36
36
  onBlur = _ref.onBlur,
37
- _ref$placeholder = _ref.placeholder,
38
- placeholder = _ref$placeholder === void 0 ? 'DD/MM/YYYY' : _ref$placeholder,
37
+ placeholder = _ref.placeholder,
39
38
  _ref$format = _ref.format,
40
39
  dateFormat = _ref$format === void 0 ? 'dd/MM/yyyy' : _ref$format,
41
40
  _ref$locale = _ref.locale,
@@ -122,7 +121,7 @@ function DatePicker(_ref) {
122
121
  onChange === null || onChange === void 0 || onChange(parsed);
123
122
  };
124
123
  var handleKeyDown = function handleKeyDown(event) {
125
- var allowed = '0123456789/';
124
+ var allowed = "0123456789".concat(dateFormat !== null && dateFormat !== void 0 && dateFormat.includes('.') ? '.' : '/');
126
125
  if (event.key.length === 1 && !allowed.includes(event.key)) {
127
126
  event.preventDefault();
128
127
  }
@@ -159,8 +158,8 @@ function DatePicker(_ref) {
159
158
  type: "text",
160
159
  inputMode: "numeric",
161
160
  autoComplete: "off",
162
- pattern: "\\d{2}/\\d{2}/\\d{4}",
163
- placeholder: placeholder || dateFormat,
161
+ pattern: dateFormat ? dateFormat.replace(/[a-z]/gi, '\\d') : '\\d{2}/\\d{2}/\\d{4}',
162
+ placeholder: placeholder || (dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.toUpperCase()),
164
163
  value: inputValue,
165
164
  disabled: disabled,
166
165
  className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), ['hover:border-secondary-foreground/50', selectTriggerVariants({
@@ -225,6 +224,6 @@ function DatePicker(_ref) {
225
224
  locale: locale
226
225
  }, calendarProps)))))), !isInputValid && /*#__PURE__*/React.createElement("span", {
227
226
  className: "px-1 text-xs text-red-500"
228
- }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : "Invalid date. Use ".concat(placeholder || dateFormat)));
227
+ }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : "Invalid date. Use ".concat(placeholder || (dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.toUpperCase()))));
229
228
  }
230
229
  export { DatePicker };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scaleflex/ui-tw",
3
- "version": "0.0.85",
3
+ "version": "0.0.87",
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.85",
26
+ "@scaleflex/icons-tw": "^0.0.87",
27
27
  "@tanstack/react-table": "^8.21.3",
28
28
  "@types/lodash.merge": "^4.6.9",
29
29
  "class-variance-authority": "^0.7.1",