@scaleflex/ui-tw 0.0.151 → 0.0.153

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

@@ -20,6 +20,12 @@ import { cva } from 'class-variance-authority';
 import { ChevronsUpDownIcon } from 'lucide-react';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
+var normalizeLabel = function normalizeLabel(label) {
+  return label.trim().replace(/\s+/g, ' ');
+};
+var normalizeValue = function normalizeValue(label) {
+  return normalizeLabel(label).replace(/\s+/g, '-');
+};
 var inputTagsVariants = cva('', {
   variants: {
     size: textareaSizeOptions
@@ -68,7 +74,9 @@ export function InputTags(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     search = _useState4[0],
     setSearch = _useState4[1];
-  var tagsList = [].concat(_toConsumableArray(suggestedTags), _toConsumableArray(allTags));
+  var tagsList = useMemo(function () {
+    return [].concat(_toConsumableArray(suggestedTags), _toConsumableArray(allTags));
+  }, [suggestedTags, allTags]);
   var _getToolbarSizes = getToolbarSizes(size),
     buttonSize = _getToolbarSizes.buttonSize;
   var searchTrimmed = search.trim().toLowerCase();
@@ -80,18 +88,11 @@ export function InputTags(_ref) {
       return isSameTag(t, tag);
     });
   };
-  var normalizeLabel = function normalizeLabel(label) {
-    return label.trim().replace(/\s+/g, ' ');
-  };
-  var normalizeValue = function normalizeValue(label) {
-    return normalizeLabel(label).replace(/\s+/g, '-');
-  };
-  var createTag = function createTag(label) {
+  var newTag = useMemo(function () {
     return _defineProperty({
-      label: normalizeLabel(label)
-    }, valueProp, normalizeValue(label));
-  };
-  var newTag = createTag(search);
+      label: normalizeLabel(search)
+    }, valueProp, normalizeValue(search));
+  }, [search, valueProp]);
   var canCreate = useMemo(function () {
     if (!allowCustomTags || !searchTrimmed) return false;
     return !value.some(function (v) {
@@ -130,7 +131,7 @@ export function InputTags(_ref) {
     asChild: true
   }, /*#__PURE__*/React.createElement("button", {
     id: formItemId,
-    role: "combobox-tags",
+    role: "combobox",
     type: "button",
     "aria-expanded": open,
     "aria-invalid": rest['aria-invalid'],
@@ -202,7 +203,8 @@ export function InputTags(_ref) {
       onSelect: function onSelect() {
         return handleAddTag(tag);
       },
-      isGroup: true
+      isGroup: true,
+      labelTooltip: tag.label
     }, /*#__PURE__*/React.createElement("span", {
       className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
     }, tag.label));
@@ -216,7 +218,8 @@ export function InputTags(_ref) {
       onSelect: function onSelect() {
         return handleAddTag(tag);
       },
-      isGroup: true
+      isGroup: true,
+      labelTooltip: tag.label
     }, /*#__PURE__*/React.createElement("span", {
       className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
     }, tag.label));

package/label/components/label-icon.js

@@ -22,7 +22,12 @@ var LabelIcon = function LabelIcon(props) {
     return getLabelIconSizeInRem(size);
   }, [size]);
   if (!icon && !tooltip) return null;
-  var iconElement = /*#__PURE__*/React.createElement("span", _extends({
+  var resolvedTooltip = typeof tooltip === 'function' ? tooltip() : tooltip;
+  var iconElement = typeof icon === 'function' ? /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('text-muted-foreground', labelIconVariants({
+      size: size
+    }))
+  }, rest), icon()) : /*#__PURE__*/React.createElement("span", _extends({
     className: cn('text-muted-foreground', labelIconVariants({
       size: size
     }))
@@ -33,9 +38,9 @@ var LabelIcon = function LabelIcon(props) {
       height: sizeInRem
     }
   }));
-  if (!tooltip) return iconElement;
+  if (!resolvedTooltip) return iconElement;
   return /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
     asChild: true
-  }, iconElement), /*#__PURE__*/React.createElement(TooltipContent, null, tooltip));
+  }, iconElement), /*#__PURE__*/React.createElement(TooltipContent, null, resolvedTooltip));
 };
 export { LabelIcon };

package/label/label.types.d.ts

@@ -3,12 +3,12 @@ import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { ComponentProps, ReactElement } from 'react';
 export interface LabelProps extends Omit<ComponentProps<typeof LabelPrimitive.Root>, 'size'> {
     size?: FormSizeType;
-    icon?: ReactElement;
-    tooltip?: ReactElement | string;
+    icon?: ReactElement | (() => ReactElement);
+    tooltip?: ReactElement | string | (() => ReactElement);
     disabled?: boolean;
-    disabledTooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
     noTruncate?: boolean;
 }
 export interface LabelIconProps extends ComponentProps<'span'>, Pick<LabelProps, 'size' | 'tooltip'> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.151",
+  "version": "0.0.153",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.151",
+    "@scaleflex/icons-tw": "^0.0.153",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/select/components/select-icon.js

@@ -12,6 +12,9 @@ export var SelectIcon = function SelectIcon(props) {
     return getIconMarginRightInRem(size);
   }, [size]);
   if (!icon) return null;
+  if (typeof icon === 'function') {
+    return icon();
+  }
   return /*#__PURE__*/cloneElement(icon, {
     size: sizeInRem,
     style: {

package/select/components/selector.js

@@ -46,13 +46,13 @@ export function Selector(_ref) {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var option = _step.value;
         if (isOptionGroup(option)) {
-          if (option.value === val) return option.label;
+          if (option.value === val) return typeof option.label === 'function' ? option.label() : option.label;
           var found = option.options.find(function (o) {
             return o.value === val;
           });
-          if (found) return found.label;
+          if (found) return typeof found.label === 'function' ? found.label() : found.label;
         } else if (option.value === val) {
-          return option.label;
+          return typeof option.label === 'function' ? option.label() : option.label;
         }
       }
     } catch (err) {
@@ -79,8 +79,8 @@ export function Selector(_ref) {
   }, value ? getLabelByValue(value) : '')), /*#__PURE__*/React.createElement(SelectContent, _extends({
     className: popoverClassName
   }, selectorContentProps), options.map(function (option, groupIndex) {
-    var _option$optionLabel;
     if (isOptionGroup(option)) {
+      var resolvedGroupLabel = typeof option.label === 'function' ? option.label() : option.label;
       return /*#__PURE__*/React.createElement(SelectGroup, {
         key: groupIndex
       }, option.value ? /*#__PURE__*/React.createElement(SelectItem, {
@@ -95,9 +95,9 @@ export function Selector(_ref) {
         className: cn('text-secondary-foreground', selectLabelVariants({
           size: size
         }))
-      }, option.label) : option.label && /*#__PURE__*/React.createElement(SelectLabel, {
+      }, resolvedGroupLabel) : resolvedGroupLabel && /*#__PURE__*/React.createElement(SelectLabel, {
         size: size
-      }, option.label), option.options.map(function (_ref2) {
+      }, resolvedGroupLabel), option.options.map(function (_ref2) {
         var label = _ref2.label,
           optionLabel = _ref2.optionLabel,
           value = _ref2.value,
@@ -105,6 +105,8 @@ export function Selector(_ref) {
           icon = _ref2.icon,
           tooltip = _ref2.tooltip,
           disabledTooltip = _ref2.disabledTooltip;
+        var resolvedLabel = typeof label === 'function' ? label() : label;
+        var resolvedOptionLabel = typeof optionLabel === 'function' ? optionLabel() : optionLabel;
         return /*#__PURE__*/React.createElement(SelectItem, {
           key: value,
           value: value,
@@ -113,10 +115,12 @@ export function Selector(_ref) {
           icon: icon,
           tooltip: tooltip,
           disabledTooltip: disabledTooltip,
-          isGroup: !!option.label
-        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
+          isGroup: !!resolvedGroupLabel
+        }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
+    var resolvedLabel = typeof option.label === 'function' ? option.label() : option.label;
+    var resolvedOptionLabel = typeof option.optionLabel === 'function' ? option.optionLabel() : option.optionLabel;
     return /*#__PURE__*/React.createElement(SelectGroup, {
       key: groupIndex
     }, /*#__PURE__*/React.createElement(SelectItem, {
@@ -126,7 +130,7 @@ export function Selector(_ref) {
       icon: option.icon,
       tooltip: option.tooltip,
       disabledTooltip: option.disabledTooltip
-    }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
+    }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
   })));

package/select/select.types.d.ts

@@ -6,15 +6,15 @@ export interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root>
 }
 export interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
     size?: FormSizeType;
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     readOnly?: boolean;
     'aria-invalid'?: boolean;
 }
 export interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     size?: FormSizeType;
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
     isGroup?: boolean;
 }
 export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.Label> {
@@ -34,7 +34,7 @@ export interface SelectorProps extends SelectProps {
     readOnly?: boolean;
     size?: FormSizeType;
     className?: string;
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     defaultOpen?: boolean;
     showGroupSeparator?: boolean;
     formItemId?: string;

package/textarea/components/textarea-with-actions.js

@@ -55,7 +55,9 @@ function TextareaWithActions(_ref) {
     }
     onBlur === null || onBlur === void 0 || onBlur(e);
   };
-  var hasBottomArea = leftToolbar || rightToolbar || showCharCount;
+  var resolvedLeftToolbar = typeof leftToolbar === 'function' ? leftToolbar() : leftToolbar;
+  var resolvedRightToolbar = typeof rightToolbar === 'function' ? rightToolbar() : rightToolbar;
+  var hasBottomArea = resolvedLeftToolbar || resolvedRightToolbar || showCharCount;
   return /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Textarea, _extends({}, textareaProps, {
@@ -73,12 +75,12 @@ function TextareaWithActions(_ref) {
     className: cn('bg-background absolute right-2.5 bottom-0.25 left-1.5', textareaBottomActionAreaPadding[size]),
     onClick: handleActionClick,
     tabIndex: -1
-  }, leftToolbar && /*#__PURE__*/React.createElement("div", {
+  }, resolvedLeftToolbar && /*#__PURE__*/React.createElement("div", {
     className: "absolute bottom-1.5 left-0 flex items-center gap-0.5"
-  }, leftToolbar), /*#__PURE__*/React.createElement("div", {
+  }, resolvedLeftToolbar), /*#__PURE__*/React.createElement("div", {
     className: "absolute right-0 bottom-1.5 flex items-center gap-0.5"
   }, showCharCount && /*#__PURE__*/React.createElement("span", {
-    className: cn(textareaCharCountTextSizeOptions[size], rightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
-  }, currentLength, "/", maxCharCount), rightToolbar)));
+    className: cn(textareaCharCountTextSizeOptions[size], resolvedRightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
+  }, currentLength, "/", maxCharCount), resolvedRightToolbar)));
 }
 export { TextareaWithActions };

package/textarea/textarea.types.d.ts

@@ -8,8 +8,8 @@ export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'>
     maxCharCount?: number;
 }
 export interface TextareaWithActionsProps extends TextareaProps {
-    leftToolbar?: ReactElement;
-    rightToolbar?: ReactElement;
+    leftToolbar?: ReactElement | (() => ReactElement);
+    rightToolbar?: ReactElement | (() => ReactElement);
 }
 export interface RightToolbarButtonsProps {
     size?: FormSizeType;

package/tooltip/tooltip.component.js

@@ -64,7 +64,8 @@ function WithTooltip(_ref5) {
     delayDuration = _ref5.delayDuration,
     open = _ref5.open,
     otherProps = _objectWithoutProperties(_ref5, _excluded3);
-  if (!content) return children;
+  var resolvedContent = typeof content === 'function' ? content() : content;
+  if (!resolvedContent) return children;
   return /*#__PURE__*/React.createElement(Tooltip, {
     open: open,
     delayDuration: delayDuration || 700
@@ -72,6 +73,6 @@ function WithTooltip(_ref5) {
     asChild: true
   }, children), /*#__PURE__*/React.createElement(TooltipContent, _extends({
     variant: variant
-  }, otherProps), content));
+  }, otherProps), resolvedContent));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip };

package/tooltip/tooltip.types.d.ts

@@ -5,7 +5,7 @@ export type TooltipVariantType = (typeof TooltipVariant)[keyof typeof TooltipVar
 export interface WithTooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'content'> {
     children: ReactElement;
     open?: boolean;
-    content?: ReactElement | undefined | string;
+    content?: ReactElement | undefined | string | (() => ReactElement);
     variant?: TooltipVariantType;
     delayDuration?: number;
 }

package/utils/copy-to-clipboard.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copies text to the clipboard with a fallback for environments where the
+ * Clipboard API is unavailable (iframes without `clipboard-write` permissions,
+ * HTTP contexts, older browsers).
+ *
+ * @returns `true` on success, `false` on failure. Note: the `execCommand`
+ * fallback path may return `true` unreliably in some browsers — do not rely
+ * on it for critical confirmations.
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;

package/utils/copy-to-clipboard.js

@@ -0,0 +1,65 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * Copies text to the clipboard with a fallback for environments where the
+ * Clipboard API is unavailable (iframes without `clipboard-write` permissions,
+ * HTTP contexts, older browsers).
+ *
+ * @returns `true` on success, `false` on failure. Note: the `execCommand`
+ * fallback path may return `true` unreliably in some browsers — do not rely
+ * on it for critical confirmations.
+ */
+export function copyToClipboard(_x) {
+  return _copyToClipboard.apply(this, arguments);
+}
+function _copyToClipboard() {
+  _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+    var _navigator$clipboard;
+    var textarea;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(typeof navigator !== 'undefined' && (_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText)) {
+            _context.next = 9;
+            break;
+          }
+          _context.prev = 1;
+          _context.next = 4;
+          return navigator.clipboard.writeText(text);
+        case 4:
+          return _context.abrupt("return", true);
+        case 7:
+          _context.prev = 7;
+          _context.t0 = _context["catch"](1);
+        case 9:
+          if (!(typeof document === 'undefined')) {
+            _context.next = 11;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 11:
+          // Fallback for iframes, HTTP contexts, older browsers
+          textarea = document.createElement('textarea');
+          textarea.value = text;
+          textarea.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
+          document.body.appendChild(textarea);
+          _context.prev = 15;
+          textarea.focus();
+          textarea.select();
+          return _context.abrupt("return", document.execCommand('copy'));
+        case 21:
+          _context.prev = 21;
+          _context.t1 = _context["catch"](15);
+          return _context.abrupt("return", false);
+        case 24:
+          _context.prev = 24;
+          document.body.removeChild(textarea);
+          return _context.finish(24);
+        case 27:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 7], [15, 21, 24, 27]]);
+  }));
+  return _copyToClipboard.apply(this, arguments);
+}

package/utils/use-copy-to-clipboard.d.ts

@@ -0,0 +1,13 @@
+interface UseCopyToClipboardOptions {
+    copiedMessage?: string;
+    tooltipDuration?: number;
+    initialTooltipText?: string;
+    onCopy?: () => void;
+}
+export declare function useCopyToClipboard({ copiedMessage, tooltipDuration, initialTooltipText, onCopy, }?: UseCopyToClipboardOptions): {
+    tooltipText: string;
+    tooltipVariant: "default" | "success";
+    open: boolean;
+    handleCopy: (text: string) => Promise<void>;
+};
+export {};

package/utils/use-copy-to-clipboard.js

@@ -0,0 +1,68 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { copyToClipboard } from '@scaleflex/ui-tw/utils/copy-to-clipboard';
+import { useState } from 'react';
+export function useCopyToClipboard() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$copiedMessage = _ref.copiedMessage,
+    copiedMessage = _ref$copiedMessage === void 0 ? 'Copied!' : _ref$copiedMessage,
+    _ref$tooltipDuration = _ref.tooltipDuration,
+    tooltipDuration = _ref$tooltipDuration === void 0 ? 2000 : _ref$tooltipDuration,
+    _ref$initialTooltipTe = _ref.initialTooltipText,
+    initialTooltipText = _ref$initialTooltipTe === void 0 ? '' : _ref$initialTooltipTe,
+    onCopy = _ref.onCopy;
+  var _useState = useState(initialTooltipText),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipText = _useState2[0],
+    setTooltipText = _useState2[1];
+  var _useState3 = useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVariant = _useState4[0],
+    setTooltipVariant = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+      var success;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return copyToClipboard(text);
+          case 2:
+            success = _context.sent;
+            if (success) {
+              setTooltipText(copiedMessage);
+              setTooltipVariant('success');
+              setOpen(true);
+              onCopy === null || onCopy === void 0 || onCopy();
+              setTimeout(function () {
+                setOpen(false);
+              }, tooltipDuration - 500);
+              setTimeout(function () {
+                setTooltipText(initialTooltipText);
+                setTooltipVariant('default');
+              }, tooltipDuration);
+            } else {
+              console.error('Failed to copy');
+            }
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleCopy(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return {
+    tooltipText: tooltipText,
+    tooltipVariant: tooltipVariant,
+    open: open,
+    handleCopy: handleCopy
+  };
+}