@hyddenlabs/hydn-ui 0.3.0-alpha.184 → 0.3.0-alpha.185
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.
- package/dist/index.cjs +132 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +53 -1
- package/dist/index.d.ts +53 -1
- package/dist/index.js +132 -1
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -3514,6 +3514,58 @@ declare namespace Code$1 {
|
|
|
3514
3514
|
var displayName: string;
|
|
3515
3515
|
}
|
|
3516
3516
|
|
|
3517
|
+
type EditableTextProps = {
|
|
3518
|
+
/** Current value (controlled) */
|
|
3519
|
+
value?: string;
|
|
3520
|
+
/** Default value for uncontrolled mode */
|
|
3521
|
+
defaultValue?: string;
|
|
3522
|
+
/** Callback when save is clicked - receives the new value */
|
|
3523
|
+
onSave?: (value: string) => void;
|
|
3524
|
+
/** Callback when value changes - for controlled mode */
|
|
3525
|
+
onChange?: (value: string) => void;
|
|
3526
|
+
/** Callback when cancel is clicked */
|
|
3527
|
+
onCancel?: () => void;
|
|
3528
|
+
/** Callback when edit mode is entered */
|
|
3529
|
+
onEdit?: () => void;
|
|
3530
|
+
/** Placeholder text shown when value is empty */
|
|
3531
|
+
placeholder?: string;
|
|
3532
|
+
/** Disables editing */
|
|
3533
|
+
disabled?: boolean;
|
|
3534
|
+
/** Size variant - uses unified size system */
|
|
3535
|
+
size?: InteractiveSize;
|
|
3536
|
+
/** Validation state */
|
|
3537
|
+
validationState?: ValidationState$2;
|
|
3538
|
+
/** Custom CSS classes for the display text */
|
|
3539
|
+
className?: string;
|
|
3540
|
+
/** HTML id attribute */
|
|
3541
|
+
id?: string;
|
|
3542
|
+
/** HTML name attribute */
|
|
3543
|
+
name?: string;
|
|
3544
|
+
/** Required field */
|
|
3545
|
+
required?: boolean;
|
|
3546
|
+
/** Auto-focus input when entering edit mode */
|
|
3547
|
+
autoFocus?: boolean;
|
|
3548
|
+
/** Maximum length of input value */
|
|
3549
|
+
maxLength?: number;
|
|
3550
|
+
/** Save on Enter key (default: true, only for single-line) */
|
|
3551
|
+
saveOnEnter?: boolean;
|
|
3552
|
+
};
|
|
3553
|
+
/**
|
|
3554
|
+
* EditableText - Click-to-edit text display with save/cancel actions
|
|
3555
|
+
*
|
|
3556
|
+
* Displays text that becomes editable when clicked.
|
|
3557
|
+
*
|
|
3558
|
+
* @example
|
|
3559
|
+
* ```tsx
|
|
3560
|
+
* <EditableText
|
|
3561
|
+
* value={name}
|
|
3562
|
+
* onSave={(newValue) => updateName(newValue)}
|
|
3563
|
+
* placeholder="Enter name"
|
|
3564
|
+
* />
|
|
3565
|
+
* ```
|
|
3566
|
+
*/
|
|
3567
|
+
declare function EditableText({ value: controlledValue, defaultValue, onSave, onChange, onCancel, onEdit, placeholder, disabled, size, validationState, className, id, name, required, autoFocus, maxLength, saveOnEnter }: EditableTextProps): react_jsx_runtime.JSX.Element;
|
|
3568
|
+
|
|
3517
3569
|
type FieldsetProps = {
|
|
3518
3570
|
/** Form controls to group together - typically FormField components */
|
|
3519
3571
|
children: ReactNode;
|
|
@@ -4339,4 +4391,4 @@ type Debounced<T extends (...args: unknown[]) => void> = {
|
|
|
4339
4391
|
*/
|
|
4340
4392
|
declare function useDebounce<T extends (...args: unknown[]) => void>(callback: T, delayMs: number, deps?: React.DependencyList): Debounced<T>;
|
|
4341
4393
|
|
|
4342
|
-
export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
|
|
4394
|
+
export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EditableText, type EditableTextProps, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
|
package/dist/index.d.ts
CHANGED
|
@@ -3514,6 +3514,58 @@ declare namespace Code$1 {
|
|
|
3514
3514
|
var displayName: string;
|
|
3515
3515
|
}
|
|
3516
3516
|
|
|
3517
|
+
type EditableTextProps = {
|
|
3518
|
+
/** Current value (controlled) */
|
|
3519
|
+
value?: string;
|
|
3520
|
+
/** Default value for uncontrolled mode */
|
|
3521
|
+
defaultValue?: string;
|
|
3522
|
+
/** Callback when save is clicked - receives the new value */
|
|
3523
|
+
onSave?: (value: string) => void;
|
|
3524
|
+
/** Callback when value changes - for controlled mode */
|
|
3525
|
+
onChange?: (value: string) => void;
|
|
3526
|
+
/** Callback when cancel is clicked */
|
|
3527
|
+
onCancel?: () => void;
|
|
3528
|
+
/** Callback when edit mode is entered */
|
|
3529
|
+
onEdit?: () => void;
|
|
3530
|
+
/** Placeholder text shown when value is empty */
|
|
3531
|
+
placeholder?: string;
|
|
3532
|
+
/** Disables editing */
|
|
3533
|
+
disabled?: boolean;
|
|
3534
|
+
/** Size variant - uses unified size system */
|
|
3535
|
+
size?: InteractiveSize;
|
|
3536
|
+
/** Validation state */
|
|
3537
|
+
validationState?: ValidationState$2;
|
|
3538
|
+
/** Custom CSS classes for the display text */
|
|
3539
|
+
className?: string;
|
|
3540
|
+
/** HTML id attribute */
|
|
3541
|
+
id?: string;
|
|
3542
|
+
/** HTML name attribute */
|
|
3543
|
+
name?: string;
|
|
3544
|
+
/** Required field */
|
|
3545
|
+
required?: boolean;
|
|
3546
|
+
/** Auto-focus input when entering edit mode */
|
|
3547
|
+
autoFocus?: boolean;
|
|
3548
|
+
/** Maximum length of input value */
|
|
3549
|
+
maxLength?: number;
|
|
3550
|
+
/** Save on Enter key (default: true, only for single-line) */
|
|
3551
|
+
saveOnEnter?: boolean;
|
|
3552
|
+
};
|
|
3553
|
+
/**
|
|
3554
|
+
* EditableText - Click-to-edit text display with save/cancel actions
|
|
3555
|
+
*
|
|
3556
|
+
* Displays text that becomes editable when clicked.
|
|
3557
|
+
*
|
|
3558
|
+
* @example
|
|
3559
|
+
* ```tsx
|
|
3560
|
+
* <EditableText
|
|
3561
|
+
* value={name}
|
|
3562
|
+
* onSave={(newValue) => updateName(newValue)}
|
|
3563
|
+
* placeholder="Enter name"
|
|
3564
|
+
* />
|
|
3565
|
+
* ```
|
|
3566
|
+
*/
|
|
3567
|
+
declare function EditableText({ value: controlledValue, defaultValue, onSave, onChange, onCancel, onEdit, placeholder, disabled, size, validationState, className, id, name, required, autoFocus, maxLength, saveOnEnter }: EditableTextProps): react_jsx_runtime.JSX.Element;
|
|
3568
|
+
|
|
3517
3569
|
type FieldsetProps = {
|
|
3518
3570
|
/** Form controls to group together - typically FormField components */
|
|
3519
3571
|
children: ReactNode;
|
|
@@ -4339,4 +4391,4 @@ type Debounced<T extends (...args: unknown[]) => void> = {
|
|
|
4339
4391
|
*/
|
|
4340
4392
|
declare function useDebounce<T extends (...args: unknown[]) => void>(callback: T, delayMs: number, deps?: React.DependencyList): Debounced<T>;
|
|
4341
4393
|
|
|
4342
|
-
export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
|
|
4394
|
+
export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EditableText, type EditableTextProps, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
|
package/dist/index.js
CHANGED
|
@@ -5282,6 +5282,137 @@ function Code({ children, size = "md", variant = "default", className = "" }) {
|
|
|
5282
5282
|
}
|
|
5283
5283
|
Code.displayName = "Code";
|
|
5284
5284
|
var code_default = Code;
|
|
5285
|
+
function EditableText({
|
|
5286
|
+
value: controlledValue,
|
|
5287
|
+
defaultValue = "",
|
|
5288
|
+
onSave,
|
|
5289
|
+
onChange,
|
|
5290
|
+
onCancel,
|
|
5291
|
+
onEdit,
|
|
5292
|
+
placeholder = "Click to edit",
|
|
5293
|
+
disabled = false,
|
|
5294
|
+
size = "md",
|
|
5295
|
+
validationState = "default",
|
|
5296
|
+
className = "",
|
|
5297
|
+
id,
|
|
5298
|
+
name,
|
|
5299
|
+
required = false,
|
|
5300
|
+
autoFocus = true,
|
|
5301
|
+
maxLength,
|
|
5302
|
+
saveOnEnter = true
|
|
5303
|
+
}) {
|
|
5304
|
+
const isControlled = controlledValue !== void 0;
|
|
5305
|
+
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
5306
|
+
const [isEditing, setIsEditing] = useState(false);
|
|
5307
|
+
const [editValue, setEditValue] = useState("");
|
|
5308
|
+
const inputRef = useRef(null);
|
|
5309
|
+
const currentValue = isControlled ? controlledValue : internalValue;
|
|
5310
|
+
useEffect(() => {
|
|
5311
|
+
if (isEditing && autoFocus && inputRef.current) {
|
|
5312
|
+
inputRef.current.focus();
|
|
5313
|
+
inputRef.current.select();
|
|
5314
|
+
}
|
|
5315
|
+
}, [isEditing, autoFocus]);
|
|
5316
|
+
const handleClick = () => {
|
|
5317
|
+
if (disabled) return;
|
|
5318
|
+
setEditValue(currentValue);
|
|
5319
|
+
setIsEditing(true);
|
|
5320
|
+
onEdit?.();
|
|
5321
|
+
};
|
|
5322
|
+
const handleSave = () => {
|
|
5323
|
+
const trimmedValue = editValue.trim();
|
|
5324
|
+
if (!isControlled) {
|
|
5325
|
+
setInternalValue(trimmedValue);
|
|
5326
|
+
}
|
|
5327
|
+
onSave?.(trimmedValue);
|
|
5328
|
+
onChange?.(trimmedValue);
|
|
5329
|
+
setIsEditing(false);
|
|
5330
|
+
};
|
|
5331
|
+
const handleCancel = () => {
|
|
5332
|
+
setEditValue(currentValue);
|
|
5333
|
+
setIsEditing(false);
|
|
5334
|
+
onCancel?.();
|
|
5335
|
+
};
|
|
5336
|
+
const handleKeyDown = (e) => {
|
|
5337
|
+
if (e.key === "Escape") {
|
|
5338
|
+
e.preventDefault();
|
|
5339
|
+
handleCancel();
|
|
5340
|
+
} else if (e.key === "Enter" && saveOnEnter && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
|
|
5341
|
+
e.preventDefault();
|
|
5342
|
+
handleSave();
|
|
5343
|
+
}
|
|
5344
|
+
};
|
|
5345
|
+
const handleBlur = (e) => {
|
|
5346
|
+
setTimeout(() => {
|
|
5347
|
+
const relatedTarget = e.relatedTarget;
|
|
5348
|
+
const isClickingButton = relatedTarget?.closest("[data-editable-actions]");
|
|
5349
|
+
if (!isClickingButton) {
|
|
5350
|
+
handleCancel();
|
|
5351
|
+
}
|
|
5352
|
+
}, 0);
|
|
5353
|
+
};
|
|
5354
|
+
const handleChange = (e) => {
|
|
5355
|
+
setEditValue(e.target.value);
|
|
5356
|
+
};
|
|
5357
|
+
const sizeConfig = {
|
|
5358
|
+
xs: "text-sm sm:text-xs",
|
|
5359
|
+
sm: "text-base sm:text-sm",
|
|
5360
|
+
md: "text-base sm:text-sm",
|
|
5361
|
+
lg: "text-lg sm:text-base",
|
|
5362
|
+
xl: "text-xl sm:text-lg"
|
|
5363
|
+
}[size];
|
|
5364
|
+
if (isEditing) {
|
|
5365
|
+
const validationBorder = {
|
|
5366
|
+
default: "border-b-foreground/30 focus:border-b-foreground",
|
|
5367
|
+
error: "border-b-destructive focus:border-b-destructive",
|
|
5368
|
+
success: "border-b-success focus:border-b-success",
|
|
5369
|
+
warning: "border-b-warning focus:border-b-warning"
|
|
5370
|
+
}[validationState];
|
|
5371
|
+
const commonProps = {
|
|
5372
|
+
ref: inputRef,
|
|
5373
|
+
value: editValue,
|
|
5374
|
+
onChange: handleChange,
|
|
5375
|
+
onKeyDown: handleKeyDown,
|
|
5376
|
+
onBlur: handleBlur,
|
|
5377
|
+
placeholder,
|
|
5378
|
+
disabled,
|
|
5379
|
+
id,
|
|
5380
|
+
name,
|
|
5381
|
+
required,
|
|
5382
|
+
maxLength,
|
|
5383
|
+
className: `${sizeConfig} w-full border-0 border-b ${validationBorder} bg-transparent py-1 outline-none transition-colors placeholder:text-muted-foreground`
|
|
5384
|
+
};
|
|
5385
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
5386
|
+
/* @__PURE__ */ jsx("input", { ...commonProps, type: "text" }),
|
|
5387
|
+
/* @__PURE__ */ jsxs("div", { "data-editable-actions": true, className: "flex items-center gap-1", children: [
|
|
5388
|
+
/* @__PURE__ */ jsx(icon_button_default, { icon: "IconX", ariaLabel: "Cancel", onClick: handleCancel, variant: "error", size: "xs" }),
|
|
5389
|
+
/* @__PURE__ */ jsx(icon_button_default, { icon: "IconCheck", ariaLabel: "Save", onClick: handleSave, variant: "success", size: "xs" })
|
|
5390
|
+
] })
|
|
5391
|
+
] });
|
|
5392
|
+
}
|
|
5393
|
+
const displayText = currentValue || placeholder;
|
|
5394
|
+
const isPlaceholder = !currentValue;
|
|
5395
|
+
return /* @__PURE__ */ jsxs(
|
|
5396
|
+
"button",
|
|
5397
|
+
{
|
|
5398
|
+
type: "button",
|
|
5399
|
+
onClick: handleClick,
|
|
5400
|
+
disabled,
|
|
5401
|
+
className: `group ${sizeConfig} ${className} relative inline-flex items-center gap-2 cursor-text border-b border-transparent py-1 text-left transition-all hover:border-b-foreground/30 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:rounded disabled:cursor-not-allowed disabled:opacity-50 ${isPlaceholder ? "text-muted-foreground" : "text-foreground"} w-fit max-w-full`,
|
|
5402
|
+
children: [
|
|
5403
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: displayText }),
|
|
5404
|
+
/* @__PURE__ */ jsx(
|
|
5405
|
+
Icon,
|
|
5406
|
+
{
|
|
5407
|
+
name: "IconPencil",
|
|
5408
|
+
className: "shrink-0 opacity-0 transition-opacity group-hover:opacity-50 group-focus:opacity-50",
|
|
5409
|
+
size: "xs"
|
|
5410
|
+
}
|
|
5411
|
+
)
|
|
5412
|
+
]
|
|
5413
|
+
}
|
|
5414
|
+
);
|
|
5415
|
+
}
|
|
5285
5416
|
var alignClasses3 = {
|
|
5286
5417
|
start: "items-start",
|
|
5287
5418
|
center: "items-center",
|
|
@@ -6260,6 +6391,6 @@ function useDebounce(callback, delayMs, deps) {
|
|
|
6260
6391
|
}
|
|
6261
6392
|
var useDebounce_default = useDebounce;
|
|
6262
6393
|
|
|
6263
|
-
export { accordion_default as Accordion, AccordionItem, ActionCard, alert_default as Alert, AuthProvider, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, button_with_icon_default as ButtonWithIcon, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default2 as Code, code_block_default as CodeBlock, code_default as CodeInput, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, DropdownItem, empty_state_default as EmptyState, feature_section_default as FeatureSection, fieldset_default as Fieldset, footer_default as Footer, form_default as Form, form_input_default as FormInput, form_select_default as FormSelect, form_textarea_default as FormTextarea, GoogleLogo, grid_default as Grid, heading_default as Heading, hero_default as Hero, HyddenLogo, icon_default as Icon, icon_button_default as IconButton, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, list_default as List, ListItem, MicrosoftLogo, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, nav_dropdown_default as NavDropdown, nav_dropdown_item_default as NavDropdownItem, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, navbar_toggle_default as NavbarToggle, useOverlay_default as OverlayProvider, page_default as Page, page_header_default as PageHeader, page_transition_default as PageTransition, pagination_default as Pagination, popover_default as Popover, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, scroll_nav_default as ScrollNav, section_default as Section, section_header_default as SectionHeader, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, smooth_transition_default as SmoothTransition, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, table_default as Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, theme_provider_default as ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce_default as useDebounce, useScrollReset_default as useScrollReset, useStaggeredTransition, use_table_default as useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
|
|
6394
|
+
export { accordion_default as Accordion, AccordionItem, ActionCard, alert_default as Alert, AuthProvider, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, button_with_icon_default as ButtonWithIcon, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default2 as Code, code_block_default as CodeBlock, code_default as CodeInput, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, DropdownItem, EditableText, empty_state_default as EmptyState, feature_section_default as FeatureSection, fieldset_default as Fieldset, footer_default as Footer, form_default as Form, form_input_default as FormInput, form_select_default as FormSelect, form_textarea_default as FormTextarea, GoogleLogo, grid_default as Grid, heading_default as Heading, hero_default as Hero, HyddenLogo, icon_default as Icon, icon_button_default as IconButton, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, list_default as List, ListItem, MicrosoftLogo, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, nav_dropdown_default as NavDropdown, nav_dropdown_item_default as NavDropdownItem, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, navbar_toggle_default as NavbarToggle, useOverlay_default as OverlayProvider, page_default as Page, page_header_default as PageHeader, page_transition_default as PageTransition, pagination_default as Pagination, popover_default as Popover, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, scroll_nav_default as ScrollNav, section_default as Section, section_header_default as SectionHeader, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, smooth_transition_default as SmoothTransition, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, table_default as Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, theme_provider_default as ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce_default as useDebounce, useScrollReset_default as useScrollReset, useStaggeredTransition, use_table_default as useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
|
|
6264
6395
|
//# sourceMappingURL=index.js.map
|
|
6265
6396
|
//# sourceMappingURL=index.js.map
|