@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
58 lines (57 loc) • 5.04 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '../../lib/utils';
import { Button } from './button';
import { Input } from './input';
import { Textarea } from './textarea';
const InputGroup = React.forwardRef(function InputGroup({ className, ...props }, ref) {
return (_jsx("div", { ref: ref, "data-slot": "input-group", role: "group", className: cn('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
});
const inputGroupAddonVariants = cva('twa:flex twa:h-auto twa:cursor-text twa:items-center twa:justify-center twa:gap-2 twa:py-1.5 twa:text-sm twa:font-medium twa:text-muted-foreground twa:select-none twa:group-data-[disabled=true]/input-group:opacity-50 twa:[&>kbd]:rounded-[calc(var(--ab-border-radius))] twa:[&>svg:not([class*=size-])]:size-4', {
variants: {
align: {
'inline-start': 'twa:order-first twa:pl-2 twa:has-[>button]:-ml-1 twa:has-[>kbd]:ml-[-0.15rem]',
'inline-end': 'twa:order-last twa:pr-2 twa:has-[>button]:-mr-1 twa:has-[>kbd]:mr-[-0.15rem]',
'block-start': 'twa:order-first twa:w-full twa:justify-start twa:px-2.5 twa:pt-2 twa:group-has-[>input]/input-group:pt-2 twa:[.border-b]:pb-2',
'block-end': 'twa:order-last twa:w-full twa:justify-start twa:px-2.5 twa:pb-2 twa:group-has-[>input]/input-group:pb-2 twa:[.border-t]:pt-2',
},
},
defaultVariants: {
align: 'inline-start',
},
});
function InputGroupAddon({ className, align = 'inline-start', ...props }) {
return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
if (e.target.closest('button')) {
return;
}
e.currentTarget.parentElement?.querySelector('input')?.focus();
}, ...props }));
}
const inputGroupButtonVariants = cva('twa:flex twa:items-center twa:gap-2 twa:text-sm twa:shadow-none', {
variants: {
size: {
xs: 'twa:h-6 twa:gap-1 twa:rounded twa:px-1.5 twa:[&>svg:not([class*=size-])]:size-3.5',
sm: 'twa:',
'icon-xs': 'twa:size-6 twa:rounded twa:p-0 twa:has-[>svg]:p-0',
'icon-sm': 'twa:size-8 twa:p-0 twa:has-[>svg]:p-0',
},
},
defaultVariants: {
size: 'xs',
},
});
const InputGroupButton = React.forwardRef(function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }, ref) {
return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ref: ref, ...props }));
});
function InputGroupText({ className, ...props }) {
return (_jsx("span", { className: cn('twa:flex twa:items-center twa:gap-2 twa:text-sm twa:text-muted-foreground twa:[&_svg]:pointer-events-none twa:[&_svg:not([class*=size-])]:size-4', className), ...props }));
}
const InputGroupInput = React.forwardRef(function InputGroupInput({ className, ...props }, ref) {
return (_jsx(Input, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ref: ref, ...props }));
});
const InputGroupTextarea = React.forwardRef(function InputGroupTextarea({ className, ...props }, ref) {
return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:resize-none twa:rounded-none twa:border-0 twa:bg-transparent twa:py-2 twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props, ref: ref }));
});
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };