@lax-wp/design-system 0.3.12 → 0.3.13

package/dist/components/forms/select-field/SelectField.d.ts

@@ -0,0 +1,161 @@
+import type { SelectProps } from 'antd';
+import type { ReactNode } from 'react';
+import type { LabelType } from '../../data-display/label/Label';
+/**
+ * Label-value pair for select options
+ */
+export type TLabelValue = {
+    label: string;
+    value: string;
+    icon?: JSX.Element;
+};
+/**
+ * Select option interface
+ */
+export interface SelectOption {
+    label: string | any;
+    value: string | number;
+    color?: string;
+}
+type TagRender = SelectProps['tagRender'];
+/**
+ * Risk details interface
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the SelectField component
+ */
+export interface SelectFieldProps extends Omit<SelectProps, 'onChange'> {
+    /** Select mode - multiple or tags */
+    mode?: 'multiple' | 'tags';
+    /** The label text to display above the select */
+    label?: string | ReactNode;
+    /** Current value of the select */
+    value?: string | string[] | SelectOption | SelectOption[] | any;
+    /** Array of select options */
+    selectOptions?: SelectOption[];
+    /** Whether content is loading */
+    hasContentLoading?: boolean;
+    /** Callback function called when the select value changes */
+    onChange?: (value: any) => void;
+    /** Callback function for search */
+    onSearch?: (searchValue: string) => void;
+    /** Callback function for scroll */
+    onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    /** Callback function for input change */
+    onInputChange?: (newValue: string) => void;
+    /** Debounce timeout for search */
+    debounceTimeout?: number;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Tags to display with the label */
+    tags?: (string | LabelType)[];
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether this is a GTN (Global Technical Name) field */
+    isGTN?: boolean;
+    /** GTN name for the field */
+    gtnName?: any;
+    /** Handler for adding GTN to document */
+    handleAddGTNToDocument?: (value: string | string[]) => void;
+    /** Whether the field is hovered */
+    isHovered?: boolean;
+    /** Whether to enable filter option */
+    filterOption?: boolean;
+    /** Whether the select is loading */
+    isLoading?: boolean;
+    /** Whether to auto clear search value */
+    autoClearSearchValue?: boolean;
+    /** Whether to show label with full opacity */
+    fullOpacityLabel?: boolean;
+    /** Color for the select */
+    color?: string;
+    /** Whether to show all tags */
+    showAllTags?: boolean;
+    /** Custom tag render function */
+    customTagRender?: TagRender;
+    /** Custom inline styles for the select */
+    inputStyles?: React.CSSProperties;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether to show select all option */
+    showSelectAll?: boolean;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** AI extracted indicator component */
+    AIExtractedIndicator?: React.ComponentType;
+    /** Required indicator component */
+    RequiredIndicator?: React.ComponentType;
+    /** Add to document icon component */
+    AddToDocumentIcon?: React.ComponentType<{
+        fontSize?: number;
+        color?: string;
+    }>;
+    /** Primary color shades for styling */
+    primaryColorShades?: Record<number, string>;
+    /** User avatar component for option rendering */
+    UserAvatar?: React.ComponentType<{
+        firstName: string;
+        lastName: string;
+        profilePic: string;
+        size: string;
+        enablePopper: boolean;
+        userId: string;
+    }>;
+    /** Translation function */
+    t?: (key: string) => string;
+}
+/**
+ * SelectField component - A feature-rich select dropdown with multi-select, tags, search, and more
+ *
+ * @example
+ * ```tsx
+ * <SelectField
+ *   label="Country"
+ *   value="us"
+ *   selectOptions={[
+ *     { label: 'United States', value: 'us' },
+ *     { label: 'Canada', value: 'ca' }
+ *   ]}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * <SelectField
+ *   label="Tags"
+ *   mode="multiple"
+ *   value={['tag1', 'tag2']}
+ *   selectOptions={tagOptions}
+ *   onChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+export declare const SelectField: import("react").ForwardRefExoticComponent<SelectFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export type { InputFieldProps } from "./components/forms/input-field/InputField"
 export * from "./components/data-display/typography/Typography";
 export { TextField } from "./components/forms/text-field/TextField";
 export type { TextFieldProps } from "./components/forms/text-field/TextField";
+export { SelectField } from "./components/forms/select-field/SelectField";
+export type { SelectFieldProps, SelectOption as SelectFieldOption, TLabelValue, } from "./components/forms/select-field/SelectField";
 export { Checkbox } from "./components/forms/checkbox/Checkbox";
 export type { CheckboxComponentProps, TCheckboxComponentProps, } from "./components/forms/checkbox/Checkbox";
 export { ColorPicker } from "./components/forms/color-picker/ColorPicker";