@lax-wp/design-system 0.13.38 → 0.13.39-beta.0
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/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js +40 -39
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js.map +1 -1
- package/dist/components/forms/creatable-select/CreatableSelect.cjs.js +1 -1
- package/dist/components/forms/creatable-select/CreatableSelect.cjs.js.map +1 -1
- package/dist/components/forms/creatable-select/CreatableSelect.es.js +8 -11
- package/dist/components/forms/creatable-select/CreatableSelect.es.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js.map +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js.map +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.d.ts +3 -0
- package/dist/components/forms/master-data-input/MasterDataInputField.es.js +35 -33
- package/dist/components/forms/master-data-input/MasterDataInputField.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineEditField.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineEditField.tsx"],"sourcesContent":["import type { ICell, ValidateAndSaveResult } from '../../types';\nimport { validateCellValue } from '../../validateCell';\nimport { REGEX } from '../../../../../constants/table';\nimport { DateTimeField } from '../../../../forms/date-time-field/DateTimeField';\nimport { SelectField } from '../../../../forms/select-field/SelectField';\nimport { Toggle } from '../../../../forms/toggle/Toggle';\nimport { BoltOutlined } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { InlineCurrencyField } from './InlineCurrencyField';\nimport { MasterDataInlineField } from './MasterDataInlineField';\nimport { LoadingSpinnerIcon } from '../../../../icon';\n\ntype InlineEditFieldProps = {\n cell: ICell;\n id: string | number;\n inlineEditing: string | null;\n cellRef: React.RefObject<HTMLDivElement>;\n handleCellValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n handleUpdateCellData: (\n directValue?: string | boolean | null,\n meta?: { currency_code?: string | null; reference?: unknown | null; [key: string]: unknown | null } | null,\n ) => void;\n registerValidation?: (validateFn: () => ValidateAndSaveResult) => void;\n};\n\ntype TSelectedOption = { label: string; value: string };\ntype TSelectedOptions = TSelectedOption | TSelectedOption[] | null;\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\nlet _pendingFieldOpCellKey: string | null = null;\n\nconst createSyntheticChangeEvent = (value: string | number | boolean | null): React.ChangeEvent<HTMLInputElement> => {\n return {\n target: { value } as HTMLInputElement,\n } as React.ChangeEvent<HTMLInputElement>;\n};\n\nexport const InlineEditField: React.FC<InlineEditFieldProps> = ({ cell, id, inlineEditing, cellRef, handleCellValueChange, registerValidation }) => {\n const {\n openMasterDataModal,\n selectedMasterData,\n clearSelectedMasterData,\n getCurrencyForCell,\n getPendingEdit,\n addPendingEdit,\n onFieldOperationFlow,\n fieldOperationLoading,\n } = useContext(TableContext);\n\n const isFieldOperationLoading = fieldOperationLoading === `${id}-${cell?.column?.id}`;\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n\n const callLiveFieldOperation = useCallback(\n (value: unknown, meta?: { reference?: unknown; currency_code?: string }) => {\n if (!onFieldOperationFlow) return;\n\n onFieldOperationFlow({\n value,\n fieldId: cell?.column?.id as string,\n rowId: String(id),\n rowData: cell?.row?.original as Record<string, unknown>,\n columnKey: (cell?.column?.key as string) || '',\n flowName: cell?.column?.live_field_source as string | undefined,\n isLiveField: cell?.column?.is_live_field as boolean | undefined,\n meta,\n });\n },\n [\n cell?.column?.id,\n cell?.column?.is_live_field,\n cell?.column?.key,\n cell?.column?.live_field_source,\n cell?.row?.original,\n id,\n onFieldOperationFlow,\n ],\n );\n\n const getCurrencyFromCell = () => {\n const rawData = cell?.row?.original?.__rawData as Record<string, Record<string, unknown>> | undefined;\n const headerKey = cell?.column?.Header as string | undefined;\n const columnKey = cell?.column?.key as string | undefined;\n\n const dataFromHeader = headerKey ? rawData?.[headerKey]?.currency_code : undefined;\n const dataFromKey = columnKey ? rawData?.[columnKey]?.currency_code : undefined;\n\n if (dataFromHeader && dataFromHeader !== '') {\n return dataFromHeader as string;\n }\n if (dataFromKey && dataFromKey !== '') {\n return dataFromKey as string;\n }\n\n return (cell?.column?.currencyCode as string) || 'USD';\n };\n\n const columnKey = (cell.column.key as string) || '';\n const currencyCellId = `${id}-${columnKey}`;\n const contextCurrency = getCurrencyForCell?.(currencyCellId);\n const initialPendingEdit = getPendingEdit?.(String(id), columnKey);\n\n const [fieldState, setFieldState] = useState<{ value: string | number | boolean | null; currencyCode: string }>({\n value: initialPendingEdit?.value !== undefined ? (initialPendingEdit.value as string | number | boolean | null) : ((cell.value as string | number | boolean | null) || ''),\n currencyCode: (initialPendingEdit?.meta?.currency_code as string) || contextCurrency || getCurrencyFromCell(),\n });\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const computedValidationError = (() => {\n if (inlineEditing !== columnKey) return null;\n const valueToValidate = typeof fieldState.value === 'number' ? String(fieldState.value) : fieldState.value;\n const result = validateCellValue(valueToValidate, cell?.column as { type?: string; is_required?: boolean });\n return result.isValid ? null : result.error || null;\n })();\n\n const pendingError = getPendingEdit?.(String(id), columnKey)?.validationError;\n const displayValidationError = validationError || computedValidationError || pendingError || null;\n\n const previousInlineEditingRef = useRef<string | null>(null);\n\n useEffect(() => {\n const isEnteringEditMode = inlineEditing === columnKey && previousInlineEditingRef.current !== columnKey;\n\n if (isEnteringEditMode) {\n const currencyFromContext = getCurrencyForCell?.(`${id}-${columnKey}`);\n const pendingEdit = getPendingEdit?.(String(id), columnKey);\n const initialValue = pendingEdit?.value !== undefined ? pendingEdit.value : ((cell.value as string | boolean | null) || '');\n const initialCurrency = (pendingEdit?.meta?.currency_code as string) || currencyFromContext || getCurrencyFromCell();\n\n setFieldState({\n value: initialValue as string | number | boolean | null,\n currencyCode: initialCurrency,\n });\n }\n\n if (inlineEditing !== columnKey && previousInlineEditingRef.current === columnKey) {\n setValidationError(null);\n }\n\n previousInlineEditingRef.current = inlineEditing;\n }, [inlineEditing, columnKey, getCurrencyForCell, getPendingEdit, id, cell.value]);\n\n useEffect(() => {\n if (selectedMasterData && inlineEditing === columnKey && cell?.column?.masterDataColumnName && cell?.column?.masterDataName) {\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: selectedMasterData.value as string | boolean | null,\n meta: { reference: selectedMasterData.reference },\n originalValue: cell.value,\n });\n }\n handleCellValueChange(createSyntheticChangeEvent(selectedMasterData.value as string | number | boolean | null));\n callLiveFieldOperation(selectedMasterData.value, { reference: selectedMasterData.reference });\n clearSelectedMasterData?.();\n }\n }, [\n selectedMasterData,\n inlineEditing,\n columnKey,\n cell?.column?.masterDataColumnName,\n cell?.column?.masterDataName,\n addPendingEdit,\n id,\n cell.value,\n handleCellValueChange,\n callLiveFieldOperation,\n clearSelectedMasterData,\n ]);\n\n const validateRequiredField = (value: string | number | boolean | null): boolean => {\n if (cell?.column?.is_required) {\n const isEmpty = value === null || value === undefined || value === '' || (typeof value === 'string' && value.trim() === '');\n if (isEmpty) {\n setValidationError('Field required');\n return false;\n }\n }\n setValidationError(null);\n return true;\n };\n\n const validateUrlField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.url.test(value)) {\n setValidationError('Invalid URL format');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const validateEmailField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.email.test(value)) {\n setValidationError('Email is not valid');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const fieldStateRef = useRef(fieldState);\n useEffect(() => {\n fieldStateRef.current = fieldState;\n }, [fieldState]);\n\n const textInputRef = useRef<HTMLInputElement>(null);\n const cellEditKey = `${id}-${columnKey}`;\n\n useLayoutEffect(() => {\n const el = textInputRef.current;\n if (!el) return;\n const cached = _cursorPositionCache.get(cellEditKey);\n if (cached) {\n el.focus();\n try {\n el.setSelectionRange(cached.start, cached.end);\n } catch {\n // email/number inputs may not support setSelectionRange\n }\n } else if (_blurringCellKey !== cellEditKey) {\n el.focus();\n }\n }, [cellEditKey]);\n\n const debouncedSyncTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n useEffect(() => {\n return () => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n };\n }, []);\n\n const syncToParent = useCallback(\n (value: string) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n },\n [handleCellValueChange, addPendingEdit, id, columnKey, cell.value],\n );\n\n const debouncedSyncToParent = useCallback(\n (value: string) => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = setTimeout(() => {\n syncToParent(value);\n }, 300);\n },\n [syncToParent],\n );\n\n const flushSyncToParent = useCallback(() => {\n if (debouncedSyncTimerRef.current) {\n clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = undefined;\n syncToParent(String(fieldStateRef.current.value ?? ''));\n }\n }, [syncToParent]);\n\n const handleBlurValidation = useCallback(() => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n\n switch (columnType) {\n case 'url':\n validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n validateEmailField(String(currentValue ?? ''));\n break;\n default:\n validateRequiredField(currentValue);\n break;\n }\n }, [cell?.column?.type]);\n\n const validateAndGetValue = useCallback((): ValidateAndSaveResult => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n const currentCurrency = fieldStateRef.current.currencyCode;\n\n let isValid = true;\n\n switch (columnType) {\n case 'url':\n isValid = validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n isValid = validateEmailField(String(currentValue ?? ''));\n break;\n default:\n isValid = validateRequiredField(currentValue);\n break;\n }\n\n if (!isValid) {\n return { isValid: false };\n }\n\n let meta: ValidateAndSaveResult['meta'] = null;\n if (columnType === 'currency') {\n const latestCurrency = getCurrencyForCell?.(currencyCellId) || currentCurrency;\n meta = { currency_code: latestCurrency };\n }\n\n return {\n isValid: true,\n value: (typeof currentValue === 'number' ? String(currentValue) : currentValue) as string | boolean | null,\n meta,\n };\n }, [cell?.column?.type, currencyCellId, getCurrencyForCell]);\n\n useEffect(() => {\n if (registerValidation && inlineEditing === columnKey) {\n registerValidation(validateAndGetValue);\n }\n }, [registerValidation, validateAndGetValue, inlineEditing, columnKey]);\n\n const renderFieldByType = () => {\n if (cell?.column?.is_master_data && cell?.column?.masterDataName && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula)) {\n const currentPendingEdit = getPendingEdit?.(String(id), columnKey);\n const masterDataValue = selectedMasterData?.value ?? currentPendingEdit?.value ?? cell.value;\n\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <MasterDataInlineField\n id={`master-data-cell-${id}-${cell.column.id}`}\n value={masterDataValue as string | number | null}\n onChange={(value, reference) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: value as string | boolean | null,\n meta: { reference: reference || null },\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value, { reference: reference || undefined });\n validateRequiredField((value as string | boolean | null) ?? '');\n }}\n placeholder={cell.column?.Header as string | undefined}\n masterDataName={cell.column.masterDataName as string}\n masterDataColumnName={cell.column.masterDataColumnName as string}\n masterDataFormula={cell.column.masterDataFormula as string | undefined}\n masterDataFilters={cell.column.masterDataFilters as Record<string, unknown> | undefined}\n onOpenMasterDataModal={openMasterDataModal as never}\n reference={currentPendingEdit?.meta?.reference as Record<string, unknown> | undefined}\n />\n </div>\n );\n }\n\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const rowCellMeta = columnKey\n ? (cell?.row?.original?.__cellMetadata as Record<string, { choices?: string[] }> | undefined)?.[columnKey]\n : undefined;\n\n switch (columnType) {\n case 'choice': {\n const choices = rowCellMeta?.choices ?? (cell?.column?.choices as string[] | undefined);\n return (\n <div onMouseDown={(e) => e.stopPropagation()}>\n <SelectField\n id={`select-cell-${id}-${cell.column.id}`}\n value={fieldState.value || null}\n selectOptions={\n choices?.map((choice: string) => ({\n label: choice,\n value: choice,\n })) || []\n }\n onChange={(selectedOptions: TSelectedOptions) => {\n const value = selectedOptions\n ? Array.isArray(selectedOptions)\n ? selectedOptions[0]?.value?.toString() || ''\n : selectedOptions?.value?.toString() || ''\n : '';\n setFieldState((prev) => ({ ...prev, value }));\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value);\n validateRequiredField(value);\n }}\n allowClear={true}\n inputStyles={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n className='z-[120]'\n />\n </div>\n );\n }\n\n case 'datetime':\n case 'date':\n return (\n <div\n onMouseDown={(e) => {\n e.stopPropagation();\n if ((e.target as HTMLElement).tagName !== 'INPUT') {\n e.preventDefault();\n }\n }}\n >\n <DateTimeField\n id={`date-cell-${id}-${cell.column.id}`}\n value={(fieldState.value as string | undefined) || undefined}\n handleOnChange={(value) => {\n const newValue = value || '';\n setFieldState((prev) => ({ ...prev, value: newValue }));\n handleCellValueChange(createSyntheticChangeEvent(newValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: newValue,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(newValue);\n validateRequiredField(newValue);\n }}\n showTime={columnType === 'datetime'}\n dateFormat={columnType === 'date' ? 'MM/DD/YYYY' : undefined}\n className='z-[120] w-full'\n />\n </div>\n );\n\n case 'currency': {\n const originalCurrencyCode = getCurrencyFromCell();\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <InlineCurrencyField\n id={currencyCellId}\n value={String(fieldState.value ?? '')}\n onChange={(numericValue, currency_code) => {\n setFieldState((prev) => ({\n value: numericValue,\n currencyCode: currency_code || prev.currencyCode,\n }));\n handleCellValueChange(createSyntheticChangeEvent(numericValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: numericValue,\n meta: { currency_code },\n originalValue: cell.value,\n originalMeta: { currency_code: originalCurrencyCode },\n });\n }\n validateRequiredField(numericValue);\n callLiveFieldOperation(numericValue, { currency_code });\n }}\n currencyCode={fieldState.currencyCode}\n inputStyle={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoFocus\n disabled={isAnyFieldOperationLoading}\n />\n </div>\n );\n }\n\n case 'percentage':\n return (\n <label className='relative block h-full' onMouseDown={(e) => e.stopPropagation()}>\n <input\n ref={textInputRef}\n type='number'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // number inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n className='border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400'\n id={`percentage-cell-${id}-${cell.column.id}`}\n style={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoComplete='off'\n disabled={isAnyFieldOperationLoading}\n />\n <span className='absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100'>%</span>\n </label>\n );\n\n case 'boolean': {\n const currentBoolValue =\n fieldState.value === true ||\n fieldState.value === 'true' ||\n fieldState.value === 'Yes' ||\n fieldState.value === 'True' ||\n fieldState.value === 1;\n\n return (\n <div\n onMouseDown={(e) => e.stopPropagation()}\n className='h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]'\n >\n <Toggle\n id={`toggle-cell-${id}-${cell.column.id}`}\n isChecked={currentBoolValue}\n onChange={(checked) => {\n setFieldState((prev) => ({ ...prev, value: checked }));\n handleCellValueChange(createSyntheticChangeEvent(checked));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: checked,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(checked);\n }}\n hideStatus={false}\n labelDirection='right'\n stopClickPropagation={true}\n statusText={currentBoolValue ? 'Yes' : 'No'}\n />\n </div>\n );\n }\n\n case 'url':\n return (\n <input\n ref={textInputRef}\n type='url'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateUrlField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n case 'e-mail':\n return (\n <input\n ref={textInputRef}\n type='email'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // email inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateEmailField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n default:\n return (\n <input\n ref={textInputRef}\n type='text'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n }\n };\n\n return (\n <div ref={cellRef} className='relative h-full w-full overflow-visible'>\n <div\n className={cn(\n 'border p-0.5 rounded-lg h-full',\n displayValidationError ? 'border-error-600' : 'border-neutral-200 dark:border-black-700',\n isAnyFieldOperationLoading && 'pointer-events-none opacity-70',\n )}\n >\n {renderFieldByType()}\n </div>\n {Boolean(cell?.column?.is_live_field) && (\n <div className='absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]'>\n {isFieldOperationLoading ? (\n <LoadingSpinnerIcon className='text-primary-600 dark:text-white' size={8} />\n ) : (\n <BoltOutlined\n sx={{\n fontSize: 12,\n color: 'var(--color-primary-600)',\n }}\n />\n )}\n </div>\n )}\n {displayValidationError && (\n <div className='absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full'>\n {displayValidationError}\n </div>\n )}\n </div>\n );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","_pendingFieldOpCellKey","createSyntheticChangeEvent","value","InlineEditField","cell","id","inlineEditing","cellRef","handleCellValueChange","registerValidation","openMasterDataModal","selectedMasterData","clearSelectedMasterData","getCurrencyForCell","getPendingEdit","addPendingEdit","onFieldOperationFlow","fieldOperationLoading","useContext","TableContext","isFieldOperationLoading","isAnyFieldOperationLoading","callLiveFieldOperation","useCallback","meta","getCurrencyFromCell","rawData","headerKey","columnKey","dataFromHeader","dataFromKey","currencyCellId","contextCurrency","initialPendingEdit","fieldState","setFieldState","useState","validationError","setValidationError","computedValidationError","valueToValidate","result","validateCellValue","pendingError","displayValidationError","previousInlineEditingRef","useRef","useEffect","currencyFromContext","pendingEdit","initialValue","initialCurrency","validateRequiredField","validateUrlField","REGEX","validateEmailField","fieldStateRef","textInputRef","cellEditKey","useLayoutEffect","el","cached","debouncedSyncTimerRef","syncToParent","debouncedSyncToParent","flushSyncToParent","handleBlurValidation","columnType","currentValue","validateAndGetValue","currentCurrency","isValid","renderFieldByType","currentPendingEdit","masterDataValue","jsx","e","MasterDataInlineField","reference","rowCellMeta","choices","SelectField","choice","selectedOptions","prev","DateTimeField","newValue","originalCurrencyCode","InlineCurrencyField","numericValue","currency_code","jsxs","currentBoolValue","Toggle","checked","cn","LoadingSpinnerIcon","BoltOutlined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InlineEditField.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineEditField.tsx"],"sourcesContent":["import type { ICell, ValidateAndSaveResult } from '../../types';\nimport { validateCellValue } from '../../validateCell';\nimport { REGEX } from '../../../../../constants/table';\nimport { DateTimeField } from '../../../../forms/date-time-field/DateTimeField';\nimport { SelectField } from '../../../../forms/select-field/SelectField';\nimport { Toggle } from '../../../../forms/toggle/Toggle';\nimport { BoltOutlined } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { InlineCurrencyField } from './InlineCurrencyField';\nimport { MasterDataInlineField } from './MasterDataInlineField';\nimport { LoadingSpinnerIcon } from '../../../../icon';\n\ntype InlineEditFieldProps = {\n cell: ICell;\n id: string | number;\n inlineEditing: string | null;\n cellRef: React.RefObject<HTMLDivElement>;\n handleCellValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n handleUpdateCellData: (\n directValue?: string | boolean | null,\n meta?: { currency_code?: string | null; reference?: unknown | null; [key: string]: unknown | null } | null,\n ) => void;\n registerValidation?: (validateFn: () => ValidateAndSaveResult) => void;\n};\n\ntype TSelectedOption = { label: string; value: string };\ntype TSelectedOptions = TSelectedOption | TSelectedOption[] | null;\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\nlet _pendingFieldOpCellKey: string | null = null;\n\nconst createSyntheticChangeEvent = (value: string | number | boolean | null): React.ChangeEvent<HTMLInputElement> => {\n return {\n target: { value } as HTMLInputElement,\n } as React.ChangeEvent<HTMLInputElement>;\n};\n\nexport const InlineEditField: React.FC<InlineEditFieldProps> = ({ cell, id, inlineEditing, cellRef, handleCellValueChange, registerValidation }) => {\n const {\n openMasterDataModal,\n selectedMasterData,\n clearSelectedMasterData,\n getCurrencyForCell,\n getPendingEdit,\n addPendingEdit,\n onFieldOperationFlow,\n fieldOperationLoading,\n } = useContext(TableContext);\n\n const isFieldOperationLoading = fieldOperationLoading === `${id}-${cell?.column?.id}`;\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n\n const callLiveFieldOperation = useCallback(\n (value: unknown, meta?: { reference?: unknown; currency_code?: string }) => {\n if (!onFieldOperationFlow) return;\n\n onFieldOperationFlow({\n value,\n fieldId: cell?.column?.id as string,\n rowId: String(id),\n rowData: cell?.row?.original as Record<string, unknown>,\n columnKey: (cell?.column?.key as string) || '',\n flowName: cell?.column?.live_field_source as string | undefined,\n isLiveField: cell?.column?.is_live_field as boolean | undefined,\n meta,\n });\n },\n [\n cell?.column?.id,\n cell?.column?.is_live_field,\n cell?.column?.key,\n cell?.column?.live_field_source,\n cell?.row?.original,\n id,\n onFieldOperationFlow,\n ],\n );\n\n const getCurrencyFromCell = () => {\n const rawData = cell?.row?.original?.__rawData as Record<string, Record<string, unknown>> | undefined;\n const headerKey = cell?.column?.Header as string | undefined;\n const columnKey = cell?.column?.key as string | undefined;\n\n const dataFromHeader = headerKey ? rawData?.[headerKey]?.currency_code : undefined;\n const dataFromKey = columnKey ? rawData?.[columnKey]?.currency_code : undefined;\n\n if (dataFromHeader && dataFromHeader !== '') {\n return dataFromHeader as string;\n }\n if (dataFromKey && dataFromKey !== '') {\n return dataFromKey as string;\n }\n\n return (cell?.column?.currencyCode as string) || 'USD';\n };\n\n const columnKey = (cell.column.key as string) || '';\n const currencyCellId = `${id}-${columnKey}`;\n const contextCurrency = getCurrencyForCell?.(currencyCellId);\n const initialPendingEdit = getPendingEdit?.(String(id), columnKey);\n\n const [fieldState, setFieldState] = useState<{ value: string | number | boolean | null; currencyCode: string }>({\n value: initialPendingEdit?.value !== undefined ? (initialPendingEdit.value as string | number | boolean | null) : ((cell.value as string | number | boolean | null) || ''),\n currencyCode: (initialPendingEdit?.meta?.currency_code as string) || contextCurrency || getCurrencyFromCell(),\n });\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const computedValidationError = (() => {\n if (inlineEditing !== columnKey) return null;\n const valueToValidate = typeof fieldState.value === 'number' ? String(fieldState.value) : fieldState.value;\n const result = validateCellValue(valueToValidate, cell?.column as { type?: string; is_required?: boolean });\n return result.isValid ? null : result.error || null;\n })();\n\n const pendingError = getPendingEdit?.(String(id), columnKey)?.validationError;\n const displayValidationError = validationError || computedValidationError || pendingError || null;\n\n const previousInlineEditingRef = useRef<string | null>(null);\n\n useEffect(() => {\n const isEnteringEditMode = inlineEditing === columnKey && previousInlineEditingRef.current !== columnKey;\n\n if (isEnteringEditMode) {\n const currencyFromContext = getCurrencyForCell?.(`${id}-${columnKey}`);\n const pendingEdit = getPendingEdit?.(String(id), columnKey);\n const initialValue = pendingEdit?.value !== undefined ? pendingEdit.value : ((cell.value as string | boolean | null) || '');\n const initialCurrency = (pendingEdit?.meta?.currency_code as string) || currencyFromContext || getCurrencyFromCell();\n\n setFieldState({\n value: initialValue as string | number | boolean | null,\n currencyCode: initialCurrency,\n });\n }\n\n if (inlineEditing !== columnKey && previousInlineEditingRef.current === columnKey) {\n setValidationError(null);\n }\n\n previousInlineEditingRef.current = inlineEditing;\n }, [inlineEditing, columnKey, getCurrencyForCell, getPendingEdit, id, cell.value]);\n\n useEffect(() => {\n if (selectedMasterData && inlineEditing === cell.column.key && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula) && cell?.column?.masterDataName) {\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: selectedMasterData.value as string | boolean | null,\n meta: { reference: selectedMasterData.reference },\n originalValue: cell.value,\n });\n }\n handleCellValueChange(createSyntheticChangeEvent(selectedMasterData.value as string | number | boolean | null));\n callLiveFieldOperation(selectedMasterData.value, { reference: selectedMasterData.reference });\n clearSelectedMasterData?.();\n }\n }, [\n selectedMasterData,\n inlineEditing,\n columnKey,\n cell?.column?.masterDataFormula,\n cell?.column?.masterDataColumnName,\n cell?.column?.masterDataName,\n addPendingEdit,\n id,\n cell.value,\n handleCellValueChange,\n callLiveFieldOperation,\n clearSelectedMasterData,\n ]);\n\n const validateRequiredField = (value: string | number | boolean | null): boolean => {\n if (cell?.column?.is_required) {\n const isEmpty = value === null || value === undefined || value === '' || (typeof value === 'string' && value.trim() === '');\n if (isEmpty) {\n setValidationError('Field required');\n return false;\n }\n }\n setValidationError(null);\n return true;\n };\n\n const validateUrlField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.url.test(value)) {\n setValidationError('Invalid URL format');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const validateEmailField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.email.test(value)) {\n setValidationError('Email is not valid');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const fieldStateRef = useRef(fieldState);\n useEffect(() => {\n fieldStateRef.current = fieldState;\n }, [fieldState]);\n\n const textInputRef = useRef<HTMLInputElement>(null);\n const cellEditKey = `${id}-${columnKey}`;\n\n useLayoutEffect(() => {\n const el = textInputRef.current;\n if (!el) return;\n const cached = _cursorPositionCache.get(cellEditKey);\n if (cached) {\n el.focus();\n try {\n el.setSelectionRange(cached.start, cached.end);\n } catch {\n // email/number inputs may not support setSelectionRange\n }\n } else if (_blurringCellKey !== cellEditKey) {\n el.focus();\n }\n }, [cellEditKey]);\n\n const debouncedSyncTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n useEffect(() => {\n return () => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n };\n }, []);\n\n const syncToParent = useCallback(\n (value: string) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n },\n [handleCellValueChange, addPendingEdit, id, columnKey, cell.value],\n );\n\n const debouncedSyncToParent = useCallback(\n (value: string) => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = setTimeout(() => {\n syncToParent(value);\n }, 300);\n },\n [syncToParent],\n );\n\n const flushSyncToParent = useCallback(() => {\n if (debouncedSyncTimerRef.current) {\n clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = undefined;\n syncToParent(String(fieldStateRef.current.value ?? ''));\n }\n }, [syncToParent]);\n\n const handleBlurValidation = useCallback(() => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n\n switch (columnType) {\n case 'url':\n validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n validateEmailField(String(currentValue ?? ''));\n break;\n default:\n validateRequiredField(currentValue);\n break;\n }\n }, [cell?.column?.type]);\n\n const validateAndGetValue = useCallback((): ValidateAndSaveResult => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n const currentCurrency = fieldStateRef.current.currencyCode;\n\n let isValid = true;\n\n switch (columnType) {\n case 'url':\n isValid = validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n isValid = validateEmailField(String(currentValue ?? ''));\n break;\n default:\n isValid = validateRequiredField(currentValue);\n break;\n }\n\n if (!isValid) {\n return { isValid: false };\n }\n\n let meta: ValidateAndSaveResult['meta'] = null;\n if (columnType === 'currency') {\n const latestCurrency = getCurrencyForCell?.(currencyCellId) || currentCurrency;\n meta = { currency_code: latestCurrency };\n }\n\n return {\n isValid: true,\n value: (typeof currentValue === 'number' ? String(currentValue) : currentValue) as string | boolean | null,\n meta,\n };\n }, [cell?.column?.type, currencyCellId, getCurrencyForCell]);\n\n useEffect(() => {\n if (registerValidation && inlineEditing === columnKey) {\n registerValidation(validateAndGetValue);\n }\n }, [registerValidation, validateAndGetValue, inlineEditing, columnKey]);\n\n const renderFieldByType = () => {\n if (cell?.column?.is_master_data && cell?.column?.masterDataName && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula)) {\n const currentPendingEdit = getPendingEdit?.(String(id), columnKey);\n const masterDataValue = selectedMasterData?.value ?? currentPendingEdit?.value ?? cell.value;\n\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <MasterDataInlineField\n id={`master-data-cell-${id}-${cell.column.id}`}\n value={masterDataValue as string | number | null}\n onChange={(value, reference) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: value as string | boolean | null,\n meta: { reference: reference || null },\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value, { reference: reference || undefined });\n validateRequiredField((value as string | boolean | null) ?? '');\n }}\n placeholder={cell.column?.Header as string | undefined}\n masterDataName={cell.column.masterDataName as string}\n masterDataColumnName={cell.column.masterDataColumnName as string}\n masterDataFormula={cell.column.masterDataFormula as string | undefined}\n masterDataFilters={cell.column.masterDataFilters as Record<string, unknown> | undefined}\n onOpenMasterDataModal={openMasterDataModal as never}\n reference={currentPendingEdit?.meta?.reference as Record<string, unknown> | undefined}\n />\n </div>\n );\n }\n\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const rowCellMeta = columnKey\n ? (cell?.row?.original?.__cellMetadata as Record<string, { choices?: string[] }> | undefined)?.[columnKey]\n : undefined;\n\n switch (columnType) {\n case 'choice': {\n const choices = rowCellMeta?.choices ?? (cell?.column?.choices as string[] | undefined);\n return (\n <div onMouseDown={(e) => e.stopPropagation()}>\n <SelectField\n id={`select-cell-${id}-${cell.column.id}`}\n value={fieldState.value || null}\n selectOptions={\n choices?.map((choice: string) => ({\n label: choice,\n value: choice,\n })) || []\n }\n onChange={(selectedOptions: TSelectedOptions) => {\n const value = selectedOptions\n ? Array.isArray(selectedOptions)\n ? selectedOptions[0]?.value?.toString() || ''\n : selectedOptions?.value?.toString() || ''\n : '';\n setFieldState((prev) => ({ ...prev, value }));\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value);\n validateRequiredField(value);\n }}\n allowClear={true}\n inputStyles={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n className='z-[120]'\n />\n </div>\n );\n }\n\n case 'datetime':\n case 'date':\n return (\n <div\n onMouseDown={(e) => {\n e.stopPropagation();\n if ((e.target as HTMLElement).tagName !== 'INPUT') {\n e.preventDefault();\n }\n }}\n >\n <DateTimeField\n id={`date-cell-${id}-${cell.column.id}`}\n value={(fieldState.value as string | undefined) || undefined}\n handleOnChange={(value) => {\n const newValue = value || '';\n setFieldState((prev) => ({ ...prev, value: newValue }));\n handleCellValueChange(createSyntheticChangeEvent(newValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: newValue,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(newValue);\n validateRequiredField(newValue);\n }}\n showTime={columnType === 'datetime'}\n dateFormat={columnType === 'date' ? 'MM/DD/YYYY' : undefined}\n className='z-[120] w-full'\n />\n </div>\n );\n\n case 'currency': {\n const originalCurrencyCode = getCurrencyFromCell();\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <InlineCurrencyField\n id={currencyCellId}\n value={String(fieldState.value ?? '')}\n onChange={(numericValue, currency_code) => {\n setFieldState((prev) => ({\n value: numericValue,\n currencyCode: currency_code || prev.currencyCode,\n }));\n handleCellValueChange(createSyntheticChangeEvent(numericValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: numericValue,\n meta: { currency_code },\n originalValue: cell.value,\n originalMeta: { currency_code: originalCurrencyCode },\n });\n }\n validateRequiredField(numericValue);\n callLiveFieldOperation(numericValue, { currency_code });\n }}\n currencyCode={fieldState.currencyCode}\n inputStyle={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoFocus\n disabled={isAnyFieldOperationLoading}\n />\n </div>\n );\n }\n\n case 'percentage':\n return (\n <label className='relative block h-full' onMouseDown={(e) => e.stopPropagation()}>\n <input\n ref={textInputRef}\n type='number'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // number inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n className='border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400'\n id={`percentage-cell-${id}-${cell.column.id}`}\n style={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoComplete='off'\n disabled={isAnyFieldOperationLoading}\n />\n <span className='absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100'>%</span>\n </label>\n );\n\n case 'boolean': {\n const currentBoolValue =\n fieldState.value === true ||\n fieldState.value === 'true' ||\n fieldState.value === 'Yes' ||\n fieldState.value === 'True' ||\n fieldState.value === 1;\n\n return (\n <div\n onMouseDown={(e) => e.stopPropagation()}\n className='h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]'\n >\n <Toggle\n id={`toggle-cell-${id}-${cell.column.id}`}\n isChecked={currentBoolValue}\n onChange={(checked) => {\n setFieldState((prev) => ({ ...prev, value: checked }));\n handleCellValueChange(createSyntheticChangeEvent(checked));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: checked,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(checked);\n }}\n hideStatus={false}\n labelDirection='right'\n stopClickPropagation={true}\n statusText={currentBoolValue ? 'Yes' : 'No'}\n />\n </div>\n );\n }\n\n case 'url':\n return (\n <input\n ref={textInputRef}\n type='url'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateUrlField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n case 'e-mail':\n return (\n <input\n ref={textInputRef}\n type='email'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // email inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateEmailField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n default:\n return (\n <input\n ref={textInputRef}\n type='text'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n }\n };\n\n return (\n <div ref={cellRef} className='relative h-full w-full overflow-visible'>\n <div\n className={cn(\n 'border p-0.5 rounded-lg h-full',\n displayValidationError ? 'border-error-600' : 'border-neutral-200 dark:border-black-700',\n isAnyFieldOperationLoading && 'pointer-events-none opacity-70',\n )}\n >\n {renderFieldByType()}\n </div>\n {Boolean(cell?.column?.is_live_field) && (\n <div className='absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]'>\n {isFieldOperationLoading ? (\n <LoadingSpinnerIcon className='text-primary-600 dark:text-white' size={8} />\n ) : (\n <BoltOutlined\n sx={{\n fontSize: 12,\n color: 'var(--color-primary-600)',\n }}\n />\n )}\n </div>\n )}\n {displayValidationError && (\n <div className='absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full'>\n {displayValidationError}\n </div>\n )}\n </div>\n );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","_pendingFieldOpCellKey","createSyntheticChangeEvent","value","InlineEditField","cell","id","inlineEditing","cellRef","handleCellValueChange","registerValidation","openMasterDataModal","selectedMasterData","clearSelectedMasterData","getCurrencyForCell","getPendingEdit","addPendingEdit","onFieldOperationFlow","fieldOperationLoading","useContext","TableContext","isFieldOperationLoading","isAnyFieldOperationLoading","callLiveFieldOperation","useCallback","meta","getCurrencyFromCell","rawData","headerKey","columnKey","dataFromHeader","dataFromKey","currencyCellId","contextCurrency","initialPendingEdit","fieldState","setFieldState","useState","validationError","setValidationError","computedValidationError","valueToValidate","result","validateCellValue","pendingError","displayValidationError","previousInlineEditingRef","useRef","useEffect","currencyFromContext","pendingEdit","initialValue","initialCurrency","validateRequiredField","validateUrlField","REGEX","validateEmailField","fieldStateRef","textInputRef","cellEditKey","useLayoutEffect","el","cached","debouncedSyncTimerRef","syncToParent","debouncedSyncToParent","flushSyncToParent","handleBlurValidation","columnType","currentValue","validateAndGetValue","currentCurrency","isValid","renderFieldByType","currentPendingEdit","masterDataValue","jsx","e","MasterDataInlineField","reference","rowCellMeta","choices","SelectField","choice","selectedOptions","prev","DateTimeField","newValue","originalCurrencyCode","InlineCurrencyField","numericValue","currency_code","jsxs","currentBoolValue","Toggle","checked","cn","LoadingSpinnerIcon","BoltOutlined"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),E=require("../../../_virtual/index.cjs.js"),M=require("react-select/creatable"),g=require("@mui/icons-material"),P=require("antd"),V=require("../../data-display/typography/Typography.cjs.js"),T=require("../../icons/HelpIcon.cjs.js"),O=require("../../data-display/label/Label.cjs.js"),$=require("react"),A=require("../shared/InputLabel.cjs.js"),B=require("../../../hooks/useIsDarkMode.cjs.js"),v=({id:l,label:i,errorMessage:n,selectOptions:h,loading:y,isClearable:C,multiSelect:t,selectedValues:c,disabled:d,required:s,value:p,className:S,tooltip:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),E=require("../../../_virtual/index.cjs.js"),M=require("react-select/creatable"),g=require("@mui/icons-material"),P=require("antd"),V=require("../../data-display/typography/Typography.cjs.js"),T=require("../../icons/HelpIcon.cjs.js"),O=require("../../data-display/label/Label.cjs.js"),$=require("react"),A=require("../shared/InputLabel.cjs.js"),B=require("../../../hooks/useIsDarkMode.cjs.js"),v=({id:l,label:i,errorMessage:n,selectOptions:h,loading:y,isClearable:C,multiSelect:t,selectedValues:c,disabled:d,required:s,value:p,className:S,tooltip:b,tags:j,originalCase:w=!1,onChange:x,filterOption:D,placeholder:k,...I})=>{const r=B.useIsDarkMode(),[L,u]=$.useState(!1),f=(e,o)=>{x&&x(e);const m=document.getElementById(l);if(m){const H=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${l}`,value:e,type:"change"}});m.dispatchEvent(H)}},F={control:(e,o)=>({...e,borderColor:n&&s?r?"#F04438":"#fda49b":o.isFocused?"var(--color-primary-600)":r?"#434343":"#d9d9d9",backgroundColor:r?"#141414":o.isDisabled?"#f5f5f5":"#fff",borderRadius:"6px",padding:"0 4px 0 12px",opacity:o.isDisabled?.6:1,cursor:o.isDisabled?"not-allowed":"pointer",boxShadow:o.isFocused?r?"0 0 0 1.5px var(--color-primary-950)":"0 0 0 1.5px var(--color-primary-100)":"none","&:hover":{borderColor:n&&s?r?"#F04438":"#fda49b":"var(--color-primary-600)"}}),valueContainer:e=>({...e,fontSize:"14px",padding:0}),input:e=>({...e,margin:"0",padding:"0",color:r?"rgba(255,255,255,0.85)":"inherit"}),indicatorsContainer:e=>({...e,padding:0}),option:(e,o)=>({...e,fontSize:"14px",lineHeight:"22px",padding:"5px 12px",margin:0,backgroundColor:o.isSelected?r?"var(--color-primary-975)":"var(--color-primary-50)":o.isFocused?r?"var(--color-primary-950)":"var(--color-primary-100)":r?"#141414":"#fff",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?o.isSelected?"var(--color-primary-600)":"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)",cursor:o.isDisabled?"not-allowed":"pointer",opacity:o.isDisabled?.6:1,"&:hover":{backgroundColor:o.isDisabled?r?"#141414":"#fff":r?"var(--color-primary-950)":"var(--color-primary-100)"},"&:active":{backgroundColor:r?"var(--color-primary-950)":"var(--color-primary-50)"}}),singleValue:(e,o)=>({...e,fontSize:"14px",lineHeight:"20px",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)"}),placeholder:e=>({...e,fontSize:"14px",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",color:r?"rgba(255,255,255,0.25)":"#bfbfbf"}),multiValue:e=>({...e,backgroundColor:r?"rgba(255,255,255,0.08)":"#f0f5ff",border:r?"1px solid transparent":"1px solid #adc6ff",borderRadius:"4px"}),multiValueLabel:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)",fontSize:"12px"}),multiValueRemove:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)","&:hover":{backgroundColor:r?"rgba(255,255,255,0.16)":"#e6f4ff",color:r?"#fff":"var(--color-primary-600)"}}),menu:e=>({...e,zIndex:5001,borderRadius:"8px",boxShadow:r?"0 6px 16px 0 rgba(0,0,0,0.45)":"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)",backgroundColor:r?"#141414":"#fff",border:r?"1px solid #303030":"none",overflow:"hidden"}),menuList:e=>({...e,padding:"0",maxHeight:"256px"})},z=!!c?.length,N=L&&!d&&(C?z||!!p:!1),q=e=>{e.stopPropagation(),e.preventDefault(),f(t?[]:null)},R=()=>a.jsx("div",{className:"flex items-center",children:N?a.jsx(g.CancelRounded,{onClick:q,sx:{fontSize:"16px",cursor:"pointer",color:r?"rgba(255,255,255,0.45)":"rgba(0,0,0,0.25)","&:hover":{color:r?"rgba(255,255,255,0.65)":"rgba(0,0,0,0.45)"}}}):a.jsx(g.ChevronLeftRounded,{className:"-rotate-90",sx:{fontSize:"18px",color:r?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.25)"}})});return a.jsxs("div",{id:l,className:E("w-full flex flex-col gap-1",S),onMouseDown:e=>e.stopPropagation(),role:"group","aria-labelledby":i?l+"Label":void 0,children:[i&&a.jsxs("label",{id:l+"Label",htmlFor:"text",className:`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${w?"":"capitalize"}`,children:[a.jsx(A.InputLabel,{label:i||"",required:s||!1}),a.jsx(O.Label,{labels:j}),b&&a.jsx(P.Tooltip,{placement:"top",title:b,children:a.jsx("div",{className:"cursor-pointer",children:a.jsx(T.HelpIcon,{className:"w-icon-sm h-icon-sm"})})})]}),a.jsx("div",{onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:a.jsx(M,{...I,id:"cm"+i,classNamePrefix:"lax-select",required:s,options:h,isClearable:!1,isLoading:y,isDisabled:d,styles:F,isMulti:t,value:t?c:p,onChange:f,filterOption:D,placeholder:k,classNames:{menuList:()=>"nowheel",control:()=>"!min-h-8 !text-sm"},components:{DropdownIndicator:R,IndicatorSeparator:()=>null}})}),n&&a.jsx(V.Typography,{className:"text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:n})]})};v.displayName="CreatableSelectField";exports.CreatableSelectField=v;
|
|
2
2
|
//# sourceMappingURL=CreatableSelect.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatableSelect.cjs.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n /** The value of the option */\n value: string | number;\n /** The label displayed for the option */\n label: string;\n /** Whether the option is disabled */\n isDisabled?: boolean;\n /** Additional data for the option */\n data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n /** Unique identifier for the select */\n id: string;\n /** Label text to display above the select */\n label: string;\n /** Placeholder text for the select */\n placeholder?: string;\n /** Current value for single select */\n value?: any;\n /** Callback function called when selection changes */\n onChange(data: any): void;\n /** Error message to display below the select */\n errorMessage?: string;\n /** Array of available options */\n selectOptions: any[];\n /** Whether the select is in loading state */\n loading?: boolean;\n /** Whether multiple selections are allowed */\n multiSelect?: boolean;\n /** Current values for multi select */\n selectedValues?: any[];\n /** Custom filter function for options */\n filterOption?: any;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Whether the select is disabled */\n disabled?: boolean;\n /** Whether the select is clearable */\n isClearable?: boolean;\n /** Whether the field is required */\n required?: boolean;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n * id=\"tags\"\n * label=\"Tags\"\n * selectOptions={tagOptions}\n * value={selectedTag}\n * onChange={(newValue) => setSelectedTag(newValue)}\n * placeholder=\"Select or create tags...\"\n * multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n id,\n label,\n errorMessage,\n selectOptions,\n loading,\n isClearable,\n multiSelect,\n selectedValues,\n disabled,\n required,\n value,\n className,\n tooltip,\n tags,\n originalCase = false,\n onChange,\n filterOption,\n placeholder,\n ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n const isDarkMode = useIsDarkMode();\n const [isHovered, setIsHovered] = useState(false);\n\n const handleChange = (newValue: any, _actionMeta?: any) => {\n // Call the original onChange handler\n if (onChange) {\n onChange(newValue);\n }\n\n // Dispatch pilot-change event for recording\n const containerElement = document.getElementById(id);\n if (containerElement) {\n const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n bubbles: true,\n detail: {\n selector: `#${id}`,\n value: newValue,\n type: \"change\",\n },\n });\n containerElement.dispatchEvent(pilotChangeEvent);\n }\n };\n\n const styleProps = {\n control: (baseStyles: any, state: any) => ({\n ...baseStyles,\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : state.isFocused\n ? \"var(--color-primary-600)\"\n : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n backgroundColor: isDarkMode\n ? \"#141414\"\n : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n borderRadius: \"6px\",\n padding: \"0 4px 0 12px\",\n opacity: state.isDisabled ? 0.6 : 1,\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n boxShadow: state.isFocused\n ? isDarkMode\n ? \"0 0 0 1.5px var(--color-primary-950)\"\n : \"0 0 0 1.5px var(--color-primary-100)\"\n : \"none\",\n \"&:hover\": {\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : \"var(--color-primary-600)\",\n },\n }),\n valueContainer: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n padding: 0,\n }),\n input: (baseStyles: any) => ({\n ...baseStyles,\n margin: \"0\",\n padding: \"0\",\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n }),\n indicatorsContainer: (baseStyles: any) => ({\n ...baseStyles,\n padding: 0,\n }),\n option: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"22px\",\n padding: \"5px 12px\",\n margin: 0,\n backgroundColor: state.isSelected\n ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n : state.isFocused\n ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n : isDarkMode ? \"#141414\" : \"#fff\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode\n ? state.isSelected\n ? \"var(--color-primary-600)\"\n : \"rgba(255,255,255,0.85)\"\n : \"rgba(0,0,0,0.88)\",\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n opacity: state.isDisabled ? 0.6 : 1,\n \"&:hover\": {\n backgroundColor: state.isDisabled\n ? isDarkMode ? \"#141414\" : \"#fff\"\n : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n },\n \"&:active\": {\n backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n },\n }),\n singleValue: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n }),\n placeholder: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n whiteSpace: \"nowrap\" as const,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n }),\n multiValue: (baseStyles: any) => ({\n ...baseStyles,\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n borderRadius: \"4px\",\n }),\n multiValueLabel: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n fontSize: \"12px\",\n }),\n multiValueRemove: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n \"&:hover\": {\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n },\n }),\n menu: (baseStyles: any) => ({\n ...baseStyles,\n zIndex: 5001,\n borderRadius: \"8px\",\n boxShadow: isDarkMode\n ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n border: isDarkMode ? \"1px solid #303030\" : \"none\",\n overflow: \"hidden\",\n }),\n menuList: (baseStyles: any) => ({\n ...baseStyles,\n padding: \"0\",\n maxHeight: \"256px\",\n }),\n };\n\n const hasSelectedValues = !!selectedValues?.length;\n const hasValue = !!value;\n const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n handleChange(multiSelect ? [] : null);\n };\n\n const DropdownIndicator = () => (\n <div className=\"flex items-center\">\n {showClearIcon ? (\n <CancelRounded\n onClick={handleClear}\n sx={{\n fontSize: \"16px\",\n cursor: \"pointer\",\n color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n \"&:hover\": {\n color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n },\n }}\n />\n ) : (\n <ChevronLeftRounded\n className=\"-rotate-90\"\n sx={{\n fontSize: \"18px\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n }}\n />\n )}\n </div>\n );\n\n return (\n <div\n id={id}\n className={cn(\"w-full flex flex-col gap-1\", className)}\n onMouseDown={(e) => e.stopPropagation()}\n role=\"group\"\n aria-labelledby={label ? id + \"Label\" : undefined}\n >\n {label && (\n <label\n id={id + \"Label\"}\n htmlFor=\"text\"\n className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n >\n <InputLabel label={label || \"\"} required={required || false} />\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n </label>\n )}\n\n <div\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <CreatableSelect\n {...props}\n id={\"cm\" + label}\n classNamePrefix=\"lax-select\"\n required={required}\n options={selectOptions}\n isClearable={false}\n isLoading={loading}\n isDisabled={disabled}\n styles={styleProps}\n isMulti={multiSelect}\n value={multiSelect ? selectedValues : value}\n onChange={handleChange}\n filterOption={filterOption}\n placeholder={placeholder}\n classNames={{\n menuList: () => \"nowheel !text-sm\",\n option: () => \"!text-sm\",\n control: () => \"!min-h-8 !text-sm\",\n valueContainer: () => '!text-sm',\n placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400\"'\n }}\n components={{\n DropdownIndicator,\n IndicatorSeparator: () => null,\n }}\n />\n </div>\n {errorMessage && (\n <Typography\n className=\"text-error-500\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\n </div>\n );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CreatableSelect.cjs.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n /** The value of the option */\n value: string | number;\n /** The label displayed for the option */\n label: string;\n /** Whether the option is disabled */\n isDisabled?: boolean;\n /** Additional data for the option */\n data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n /** Unique identifier for the select */\n id: string;\n /** Label text to display above the select */\n label: string;\n /** Placeholder text for the select */\n placeholder?: string;\n /** Current value for single select */\n value?: any;\n /** Callback function called when selection changes */\n onChange(data: any): void;\n /** Error message to display below the select */\n errorMessage?: string;\n /** Array of available options */\n selectOptions: any[];\n /** Whether the select is in loading state */\n loading?: boolean;\n /** Whether multiple selections are allowed */\n multiSelect?: boolean;\n /** Current values for multi select */\n selectedValues?: any[];\n /** Custom filter function for options */\n filterOption?: any;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Whether the select is disabled */\n disabled?: boolean;\n /** Whether the select is clearable */\n isClearable?: boolean;\n /** Whether the field is required */\n required?: boolean;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n * id=\"tags\"\n * label=\"Tags\"\n * selectOptions={tagOptions}\n * value={selectedTag}\n * onChange={(newValue) => setSelectedTag(newValue)}\n * placeholder=\"Select or create tags...\"\n * multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n id,\n label,\n errorMessage,\n selectOptions,\n loading,\n isClearable,\n multiSelect,\n selectedValues,\n disabled,\n required,\n value,\n className,\n tooltip,\n tags,\n originalCase = false,\n onChange,\n filterOption,\n placeholder,\n ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n const isDarkMode = useIsDarkMode();\n const [isHovered, setIsHovered] = useState(false);\n\n const handleChange = (newValue: any, _actionMeta?: any) => {\n // Call the original onChange handler\n if (onChange) {\n onChange(newValue);\n }\n\n // Dispatch pilot-change event for recording\n const containerElement = document.getElementById(id);\n if (containerElement) {\n const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n bubbles: true,\n detail: {\n selector: `#${id}`,\n value: newValue,\n type: \"change\",\n },\n });\n containerElement.dispatchEvent(pilotChangeEvent);\n }\n };\n\n const styleProps = {\n control: (baseStyles: any, state: any) => ({\n ...baseStyles,\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : state.isFocused\n ? \"var(--color-primary-600)\"\n : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n backgroundColor: isDarkMode\n ? \"#141414\"\n : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n borderRadius: \"6px\",\n padding: \"0 4px 0 12px\",\n opacity: state.isDisabled ? 0.6 : 1,\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n boxShadow: state.isFocused\n ? isDarkMode\n ? \"0 0 0 1.5px var(--color-primary-950)\"\n : \"0 0 0 1.5px var(--color-primary-100)\"\n : \"none\",\n \"&:hover\": {\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : \"var(--color-primary-600)\",\n },\n }),\n valueContainer: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n padding: 0,\n }),\n input: (baseStyles: any) => ({\n ...baseStyles,\n margin: \"0\",\n padding: \"0\",\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n }),\n indicatorsContainer: (baseStyles: any) => ({\n ...baseStyles,\n padding: 0,\n }),\n option: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"22px\",\n padding: \"5px 12px\",\n margin: 0,\n backgroundColor: state.isSelected\n ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n : state.isFocused\n ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n : isDarkMode ? \"#141414\" : \"#fff\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode\n ? state.isSelected\n ? \"var(--color-primary-600)\"\n : \"rgba(255,255,255,0.85)\"\n : \"rgba(0,0,0,0.88)\",\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n opacity: state.isDisabled ? 0.6 : 1,\n \"&:hover\": {\n backgroundColor: state.isDisabled\n ? isDarkMode ? \"#141414\" : \"#fff\"\n : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n },\n \"&:active\": {\n backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n },\n }),\n singleValue: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n }),\n placeholder: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n whiteSpace: \"nowrap\" as const,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n }),\n multiValue: (baseStyles: any) => ({\n ...baseStyles,\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n borderRadius: \"4px\",\n }),\n multiValueLabel: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n fontSize: \"12px\",\n }),\n multiValueRemove: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n \"&:hover\": {\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n },\n }),\n menu: (baseStyles: any) => ({\n ...baseStyles,\n zIndex: 5001,\n borderRadius: \"8px\",\n boxShadow: isDarkMode\n ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n border: isDarkMode ? \"1px solid #303030\" : \"none\",\n overflow: \"hidden\",\n }),\n menuList: (baseStyles: any) => ({\n ...baseStyles,\n padding: \"0\",\n maxHeight: \"256px\",\n }),\n };\n\n const hasSelectedValues = !!selectedValues?.length;\n const hasValue = !!value;\n const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n handleChange(multiSelect ? [] : null);\n };\n\n const DropdownIndicator = () => (\n <div className=\"flex items-center\">\n {showClearIcon ? (\n <CancelRounded\n onClick={handleClear}\n sx={{\n fontSize: \"16px\",\n cursor: \"pointer\",\n color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n \"&:hover\": {\n color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n },\n }}\n />\n ) : (\n <ChevronLeftRounded\n className=\"-rotate-90\"\n sx={{\n fontSize: \"18px\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n }}\n />\n )}\n </div>\n );\n\n return (\n <div\n id={id}\n className={cn(\"w-full flex flex-col gap-1\", className)}\n onMouseDown={(e) => e.stopPropagation()}\n role=\"group\"\n aria-labelledby={label ? id + \"Label\" : undefined}\n >\n {label && (\n <label\n id={id + \"Label\"}\n htmlFor=\"text\"\n className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n >\n <InputLabel label={label || \"\"} required={required || false} />\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n </label>\n )}\n\n <div\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <CreatableSelect\n {...props}\n id={\"cm\" + label}\n classNamePrefix=\"lax-select\"\n required={required}\n options={selectOptions}\n isClearable={false}\n isLoading={loading}\n isDisabled={disabled}\n styles={styleProps}\n isMulti={multiSelect}\n value={multiSelect ? selectedValues : value}\n onChange={handleChange}\n filterOption={filterOption}\n placeholder={placeholder}\n classNames={{\n menuList: () => \"nowheel\",\n control: ()=> \"!min-h-8 !text-sm\"\n }}\n components={{\n DropdownIndicator,\n IndicatorSeparator: () => null,\n }}\n />\n </div>\n {errorMessage && (\n <Typography\n className=\"text-error-500\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\n </div>\n );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as u, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import V from "../../../_virtual/index.es.js";
|
|
3
3
|
import M from "react-select/creatable";
|
|
4
4
|
import { CancelRounded as P, ChevronLeftRounded as j } from "@mui/icons-material";
|
|
@@ -32,8 +32,8 @@ const J = ({
|
|
|
32
32
|
}) => {
|
|
33
33
|
const r = G(), [F, b] = _(!1), x = (o, e) => {
|
|
34
34
|
f && f(o);
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
35
|
+
const g = document.getElementById(l);
|
|
36
|
+
if (g) {
|
|
37
37
|
const R = new CustomEvent("pilot-change", {
|
|
38
38
|
bubbles: !0,
|
|
39
39
|
detail: {
|
|
@@ -42,7 +42,7 @@ const J = ({
|
|
|
42
42
|
type: "change"
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
-
|
|
45
|
+
g.dispatchEvent(R);
|
|
46
46
|
}
|
|
47
47
|
}, L = {
|
|
48
48
|
control: (o, e) => ({
|
|
@@ -162,7 +162,7 @@ const J = ({
|
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
) });
|
|
165
|
-
return /* @__PURE__ */
|
|
165
|
+
return /* @__PURE__ */ u(
|
|
166
166
|
"div",
|
|
167
167
|
{
|
|
168
168
|
id: l,
|
|
@@ -171,7 +171,7 @@ const J = ({
|
|
|
171
171
|
role: "group",
|
|
172
172
|
"aria-labelledby": i ? l + "Label" : void 0,
|
|
173
173
|
children: [
|
|
174
|
-
i && /* @__PURE__ */
|
|
174
|
+
i && /* @__PURE__ */ u(
|
|
175
175
|
"label",
|
|
176
176
|
{
|
|
177
177
|
id: l + "Label",
|
|
@@ -207,11 +207,8 @@ const J = ({
|
|
|
207
207
|
filterOption: D,
|
|
208
208
|
placeholder: k,
|
|
209
209
|
classNames: {
|
|
210
|
-
menuList: () => "nowheel
|
|
211
|
-
|
|
212
|
-
control: () => "!min-h-8 !text-sm",
|
|
213
|
-
valueContainer: () => "!text-sm",
|
|
214
|
-
placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400"'
|
|
210
|
+
menuList: () => "nowheel",
|
|
211
|
+
control: () => "!min-h-8 !text-sm"
|
|
215
212
|
},
|
|
216
213
|
components: {
|
|
217
214
|
DropdownIndicator: H,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatableSelect.es.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n /** The value of the option */\n value: string | number;\n /** The label displayed for the option */\n label: string;\n /** Whether the option is disabled */\n isDisabled?: boolean;\n /** Additional data for the option */\n data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n /** Unique identifier for the select */\n id: string;\n /** Label text to display above the select */\n label: string;\n /** Placeholder text for the select */\n placeholder?: string;\n /** Current value for single select */\n value?: any;\n /** Callback function called when selection changes */\n onChange(data: any): void;\n /** Error message to display below the select */\n errorMessage?: string;\n /** Array of available options */\n selectOptions: any[];\n /** Whether the select is in loading state */\n loading?: boolean;\n /** Whether multiple selections are allowed */\n multiSelect?: boolean;\n /** Current values for multi select */\n selectedValues?: any[];\n /** Custom filter function for options */\n filterOption?: any;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Whether the select is disabled */\n disabled?: boolean;\n /** Whether the select is clearable */\n isClearable?: boolean;\n /** Whether the field is required */\n required?: boolean;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n * id=\"tags\"\n * label=\"Tags\"\n * selectOptions={tagOptions}\n * value={selectedTag}\n * onChange={(newValue) => setSelectedTag(newValue)}\n * placeholder=\"Select or create tags...\"\n * multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n id,\n label,\n errorMessage,\n selectOptions,\n loading,\n isClearable,\n multiSelect,\n selectedValues,\n disabled,\n required,\n value,\n className,\n tooltip,\n tags,\n originalCase = false,\n onChange,\n filterOption,\n placeholder,\n ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n const isDarkMode = useIsDarkMode();\n const [isHovered, setIsHovered] = useState(false);\n\n const handleChange = (newValue: any, _actionMeta?: any) => {\n // Call the original onChange handler\n if (onChange) {\n onChange(newValue);\n }\n\n // Dispatch pilot-change event for recording\n const containerElement = document.getElementById(id);\n if (containerElement) {\n const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n bubbles: true,\n detail: {\n selector: `#${id}`,\n value: newValue,\n type: \"change\",\n },\n });\n containerElement.dispatchEvent(pilotChangeEvent);\n }\n };\n\n const styleProps = {\n control: (baseStyles: any, state: any) => ({\n ...baseStyles,\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : state.isFocused\n ? \"var(--color-primary-600)\"\n : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n backgroundColor: isDarkMode\n ? \"#141414\"\n : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n borderRadius: \"6px\",\n padding: \"0 4px 0 12px\",\n opacity: state.isDisabled ? 0.6 : 1,\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n boxShadow: state.isFocused\n ? isDarkMode\n ? \"0 0 0 1.5px var(--color-primary-950)\"\n : \"0 0 0 1.5px var(--color-primary-100)\"\n : \"none\",\n \"&:hover\": {\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : \"var(--color-primary-600)\",\n },\n }),\n valueContainer: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n padding: 0,\n }),\n input: (baseStyles: any) => ({\n ...baseStyles,\n margin: \"0\",\n padding: \"0\",\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n }),\n indicatorsContainer: (baseStyles: any) => ({\n ...baseStyles,\n padding: 0,\n }),\n option: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"22px\",\n padding: \"5px 12px\",\n margin: 0,\n backgroundColor: state.isSelected\n ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n : state.isFocused\n ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n : isDarkMode ? \"#141414\" : \"#fff\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode\n ? state.isSelected\n ? \"var(--color-primary-600)\"\n : \"rgba(255,255,255,0.85)\"\n : \"rgba(0,0,0,0.88)\",\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n opacity: state.isDisabled ? 0.6 : 1,\n \"&:hover\": {\n backgroundColor: state.isDisabled\n ? isDarkMode ? \"#141414\" : \"#fff\"\n : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n },\n \"&:active\": {\n backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n },\n }),\n singleValue: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n }),\n placeholder: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n whiteSpace: \"nowrap\" as const,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n }),\n multiValue: (baseStyles: any) => ({\n ...baseStyles,\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n borderRadius: \"4px\",\n }),\n multiValueLabel: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n fontSize: \"12px\",\n }),\n multiValueRemove: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n \"&:hover\": {\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n },\n }),\n menu: (baseStyles: any) => ({\n ...baseStyles,\n zIndex: 5001,\n borderRadius: \"8px\",\n boxShadow: isDarkMode\n ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n border: isDarkMode ? \"1px solid #303030\" : \"none\",\n overflow: \"hidden\",\n }),\n menuList: (baseStyles: any) => ({\n ...baseStyles,\n padding: \"0\",\n maxHeight: \"256px\",\n }),\n };\n\n const hasSelectedValues = !!selectedValues?.length;\n const hasValue = !!value;\n const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n handleChange(multiSelect ? [] : null);\n };\n\n const DropdownIndicator = () => (\n <div className=\"flex items-center\">\n {showClearIcon ? (\n <CancelRounded\n onClick={handleClear}\n sx={{\n fontSize: \"16px\",\n cursor: \"pointer\",\n color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n \"&:hover\": {\n color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n },\n }}\n />\n ) : (\n <ChevronLeftRounded\n className=\"-rotate-90\"\n sx={{\n fontSize: \"18px\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n }}\n />\n )}\n </div>\n );\n\n return (\n <div\n id={id}\n className={cn(\"w-full flex flex-col gap-1\", className)}\n onMouseDown={(e) => e.stopPropagation()}\n role=\"group\"\n aria-labelledby={label ? id + \"Label\" : undefined}\n >\n {label && (\n <label\n id={id + \"Label\"}\n htmlFor=\"text\"\n className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n >\n <InputLabel label={label || \"\"} required={required || false} />\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n </label>\n )}\n\n <div\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <CreatableSelect\n {...props}\n id={\"cm\" + label}\n classNamePrefix=\"lax-select\"\n required={required}\n options={selectOptions}\n isClearable={false}\n isLoading={loading}\n isDisabled={disabled}\n styles={styleProps}\n isMulti={multiSelect}\n value={multiSelect ? selectedValues : value}\n onChange={handleChange}\n filterOption={filterOption}\n placeholder={placeholder}\n classNames={{\n menuList: () => \"nowheel !text-sm\",\n option: () => \"!text-sm\",\n control: () => \"!min-h-8 !text-sm\",\n valueContainer: () => '!text-sm',\n placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400\"'\n }}\n components={{\n DropdownIndicator,\n IndicatorSeparator: () => null,\n }}\n />\n </div>\n {errorMessage && (\n <Typography\n className=\"text-error-500\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\n </div>\n );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","e","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CreatableSelect.es.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n /** The value of the option */\n value: string | number;\n /** The label displayed for the option */\n label: string;\n /** Whether the option is disabled */\n isDisabled?: boolean;\n /** Additional data for the option */\n data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n /** Unique identifier for the select */\n id: string;\n /** Label text to display above the select */\n label: string;\n /** Placeholder text for the select */\n placeholder?: string;\n /** Current value for single select */\n value?: any;\n /** Callback function called when selection changes */\n onChange(data: any): void;\n /** Error message to display below the select */\n errorMessage?: string;\n /** Array of available options */\n selectOptions: any[];\n /** Whether the select is in loading state */\n loading?: boolean;\n /** Whether multiple selections are allowed */\n multiSelect?: boolean;\n /** Current values for multi select */\n selectedValues?: any[];\n /** Custom filter function for options */\n filterOption?: any;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Whether the select is disabled */\n disabled?: boolean;\n /** Whether the select is clearable */\n isClearable?: boolean;\n /** Whether the field is required */\n required?: boolean;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n * id=\"tags\"\n * label=\"Tags\"\n * selectOptions={tagOptions}\n * value={selectedTag}\n * onChange={(newValue) => setSelectedTag(newValue)}\n * placeholder=\"Select or create tags...\"\n * multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n id,\n label,\n errorMessage,\n selectOptions,\n loading,\n isClearable,\n multiSelect,\n selectedValues,\n disabled,\n required,\n value,\n className,\n tooltip,\n tags,\n originalCase = false,\n onChange,\n filterOption,\n placeholder,\n ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n const isDarkMode = useIsDarkMode();\n const [isHovered, setIsHovered] = useState(false);\n\n const handleChange = (newValue: any, _actionMeta?: any) => {\n // Call the original onChange handler\n if (onChange) {\n onChange(newValue);\n }\n\n // Dispatch pilot-change event for recording\n const containerElement = document.getElementById(id);\n if (containerElement) {\n const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n bubbles: true,\n detail: {\n selector: `#${id}`,\n value: newValue,\n type: \"change\",\n },\n });\n containerElement.dispatchEvent(pilotChangeEvent);\n }\n };\n\n const styleProps = {\n control: (baseStyles: any, state: any) => ({\n ...baseStyles,\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : state.isFocused\n ? \"var(--color-primary-600)\"\n : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n backgroundColor: isDarkMode\n ? \"#141414\"\n : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n borderRadius: \"6px\",\n padding: \"0 4px 0 12px\",\n opacity: state.isDisabled ? 0.6 : 1,\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n boxShadow: state.isFocused\n ? isDarkMode\n ? \"0 0 0 1.5px var(--color-primary-950)\"\n : \"0 0 0 1.5px var(--color-primary-100)\"\n : \"none\",\n \"&:hover\": {\n borderColor:\n errorMessage && required\n ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n : \"var(--color-primary-600)\",\n },\n }),\n valueContainer: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n padding: 0,\n }),\n input: (baseStyles: any) => ({\n ...baseStyles,\n margin: \"0\",\n padding: \"0\",\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n }),\n indicatorsContainer: (baseStyles: any) => ({\n ...baseStyles,\n padding: 0,\n }),\n option: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"22px\",\n padding: \"5px 12px\",\n margin: 0,\n backgroundColor: state.isSelected\n ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n : state.isFocused\n ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n : isDarkMode ? \"#141414\" : \"#fff\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode\n ? state.isSelected\n ? \"var(--color-primary-600)\"\n : \"rgba(255,255,255,0.85)\"\n : \"rgba(0,0,0,0.88)\",\n cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n opacity: state.isDisabled ? 0.6 : 1,\n \"&:hover\": {\n backgroundColor: state.isDisabled\n ? isDarkMode ? \"#141414\" : \"#fff\"\n : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n },\n \"&:active\": {\n backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n },\n }),\n singleValue: (baseStyles: any, state: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n color: state.isDisabled\n ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n }),\n placeholder: (baseStyles: any) => ({\n ...baseStyles,\n fontSize: \"14px\",\n whiteSpace: \"nowrap\" as const,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n }),\n multiValue: (baseStyles: any) => ({\n ...baseStyles,\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n borderRadius: \"4px\",\n }),\n multiValueLabel: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n fontSize: \"12px\",\n }),\n multiValueRemove: (baseStyles: any) => ({\n ...baseStyles,\n color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n \"&:hover\": {\n backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n },\n }),\n menu: (baseStyles: any) => ({\n ...baseStyles,\n zIndex: 5001,\n borderRadius: \"8px\",\n boxShadow: isDarkMode\n ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n border: isDarkMode ? \"1px solid #303030\" : \"none\",\n overflow: \"hidden\",\n }),\n menuList: (baseStyles: any) => ({\n ...baseStyles,\n padding: \"0\",\n maxHeight: \"256px\",\n }),\n };\n\n const hasSelectedValues = !!selectedValues?.length;\n const hasValue = !!value;\n const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n handleChange(multiSelect ? [] : null);\n };\n\n const DropdownIndicator = () => (\n <div className=\"flex items-center\">\n {showClearIcon ? (\n <CancelRounded\n onClick={handleClear}\n sx={{\n fontSize: \"16px\",\n cursor: \"pointer\",\n color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n \"&:hover\": {\n color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n },\n }}\n />\n ) : (\n <ChevronLeftRounded\n className=\"-rotate-90\"\n sx={{\n fontSize: \"18px\",\n color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n }}\n />\n )}\n </div>\n );\n\n return (\n <div\n id={id}\n className={cn(\"w-full flex flex-col gap-1\", className)}\n onMouseDown={(e) => e.stopPropagation()}\n role=\"group\"\n aria-labelledby={label ? id + \"Label\" : undefined}\n >\n {label && (\n <label\n id={id + \"Label\"}\n htmlFor=\"text\"\n className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n >\n <InputLabel label={label || \"\"} required={required || false} />\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n </label>\n )}\n\n <div\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <CreatableSelect\n {...props}\n id={\"cm\" + label}\n classNamePrefix=\"lax-select\"\n required={required}\n options={selectOptions}\n isClearable={false}\n isLoading={loading}\n isDisabled={disabled}\n styles={styleProps}\n isMulti={multiSelect}\n value={multiSelect ? selectedValues : value}\n onChange={handleChange}\n filterOption={filterOption}\n placeholder={placeholder}\n classNames={{\n menuList: () => \"nowheel\",\n control: ()=> \"!min-h-8 !text-sm\"\n }}\n components={{\n DropdownIndicator,\n IndicatorSeparator: () => null,\n }}\n />\n </div>\n {errorMessage && (\n <Typography\n className=\"text-error-500\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\n </div>\n );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","e","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":";;;;;;;;;;;AA8FO,MAAMA,IAAuB,CAAC;AAAA,EACnC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAuD;AACrD,QAAMC,IAAaC,EAAA,GACb,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAe,CAACC,GAAeC,MAAsB;AAEzD,IAAIX,KACFA,EAASU,CAAQ;AAInB,UAAME,IAAmB,SAAS,eAAe3B,CAAE;AACnD,QAAI2B,GAAkB;AACpB,YAAMC,IAAmB,IAAI,YAAY,gBAAgB;AAAA,QACvD,SAAS;AAAA,QACT,QAAQ;AAAA,UACN,UAAU,IAAI5B,CAAE;AAAA,UAChB,OAAOyB;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR,CACD;AACD,MAAAE,EAAiB,cAAcC,CAAgB;AAAA,IACjD;AAAA,EACF,GAEMC,IAAa;AAAA,IACjB,SAAS,CAACC,GAAiBC,OAAgB;AAAA,MACzC,GAAGD;AAAA,MACH,aACE5B,KAAgBO,IACZU,IAAa,YAAY,YACzBY,EAAM,YACJ,6BACAZ,IAAa,YAAY;AAAA,MACjC,iBAAiBA,IACb,YACAY,EAAM,aAAa,YAAY;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,MACT,SAASA,EAAM,aAAa,MAAM;AAAA,MAClC,QAAQA,EAAM,aAAa,gBAAgB;AAAA,MAC3C,WAAWA,EAAM,YACbZ,IACE,yCACA,yCACF;AAAA,MACJ,WAAW;AAAA,QACT,aACEjB,KAAgBO,IACZU,IAAa,YAAY,YACzB;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,gBAAgB,CAACW,OAAqB;AAAA,MACpC,GAAGA;AAAA,MACH,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO,CAACA,OAAqB;AAAA,MAC3B,GAAGA;AAAA,MACH,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAOX,IAAa,2BAA2B;AAAA,IAAA;AAAA,IAEjD,qBAAqB,CAACW,OAAqB;AAAA,MACzC,GAAGA;AAAA,MACH,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ,CAACA,GAAiBC,OAAgB;AAAA,MACxC,GAAGD;AAAA,MACH,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiBC,EAAM,aACnBZ,IAAa,6BAA6B,4BAC1CY,EAAM,YACJZ,IAAa,6BAA6B,6BAC5CA,IAAa,YAAY;AAAA,MAC7B,OAAOY,EAAM,aACTZ,IAAa,2BAA2B,YACxCA,IACEY,EAAM,aACJ,6BACA,2BACF;AAAA,MACN,QAAQA,EAAM,aAAa,gBAAgB;AAAA,MAC3C,SAASA,EAAM,aAAa,MAAM;AAAA,MAClC,WAAW;AAAA,QACT,iBAAiBA,EAAM,aACnBZ,IAAa,YAAY,SACzBA,IAAa,6BAA6B;AAAA,MAAA;AAAA,MAEhD,YAAY;AAAA,QACV,iBAAiBA,IAAa,6BAA6B;AAAA,MAAA;AAAA,IAC7D;AAAA,IAEF,aAAa,CAACW,GAAiBC,OAAgB;AAAA,MAC7C,GAAGD;AAAA,MACH,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAOC,EAAM,aACTZ,IAAa,2BAA2B,YACxCA,IAAa,2BAA2B;AAAA,IAAA;AAAA,IAE9C,aAAa,CAACW,OAAqB;AAAA,MACjC,GAAGA;AAAA,MACH,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,UAAU;AAAA,MACV,OAAOX,IAAa,2BAA2B;AAAA,IAAA;AAAA,IAEjD,YAAY,CAACW,OAAqB;AAAA,MAChC,GAAGA;AAAA,MACH,iBAAiBX,IAAa,2BAA2B;AAAA,MACzD,QAAQA,IAAa,0BAA0B;AAAA,MAC/C,cAAc;AAAA,IAAA;AAAA,IAEhB,iBAAiB,CAACW,OAAqB;AAAA,MACrC,GAAGA;AAAA,MACH,OAAOX,IAAa,2BAA2B;AAAA,MAC/C,UAAU;AAAA,IAAA;AAAA,IAEZ,kBAAkB,CAACW,OAAqB;AAAA,MACtC,GAAGA;AAAA,MACH,OAAOX,IAAa,2BAA2B;AAAA,MAC/C,WAAW;AAAA,QACT,iBAAiBA,IAAa,2BAA2B;AAAA,QACzD,OAAOA,IAAa,SAAS;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEF,MAAM,CAACW,OAAqB;AAAA,MAC1B,GAAGA;AAAA,MACH,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,WAAWX,IACP,kCACA;AAAA,MACJ,iBAAiBA,IAAa,YAAY;AAAA,MAC1C,QAAQA,IAAa,sBAAsB;AAAA,MAC3C,UAAU;AAAA,IAAA;AAAA,IAEZ,UAAU,CAACW,OAAqB;AAAA,MAC9B,GAAGA;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EACb,GAGIE,IAAoB,CAAC,CAACzB,GAAgB,QAGtC0B,IAAgBZ,KAAa,CAACb,MADXH,IAAc2B,KADtB,CAAC,CAACtB,IACoD,KAGjEwB,IAAc,CAACC,MAAwB;AAC3C,IAAAA,EAAE,gBAAA,GACFA,EAAE,eAAA,GACFX,EAAalB,IAAc,CAAA,IAAK,IAAI;AAAA,EACtC,GAEM8B,IAAoB,MACxB,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAAJ,IACC,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASJ;AAAA,MACT,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAOf,IAAa,2BAA2B;AAAA,QAC/C,WAAW;AAAA,UACT,OAAOA,IAAa,2BAA2B;AAAA,QAAA;AAAA,MACjD;AAAA,IACF;AAAA,EAAA,IAGF,gBAAAkB;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAOpB,IAAa,2BAA2B;AAAA,MAAA;AAAA,IACjD;AAAA,EAAA,GAGN;AAGF,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAxC;AAAA,MACA,WAAWyC,EAAG,8BAA8B9B,CAAS;AAAA,MACrD,aAAa,CAACwB,MAAMA,EAAE,gBAAA;AAAA,MACtB,MAAK;AAAA,MACL,mBAAiBlC,IAAQD,IAAK,UAAU;AAAA,MAEvC,UAAA;AAAA,QAAAC,KACC,gBAAAuC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIxC,IAAK;AAAA,YACT,SAAQ;AAAA,YACR,WAAW,wFAAyFc,IAA8B,KAAf,YAAiB;AAAA,YAEpI,UAAA;AAAA,cAAA,gBAAAuB,EAACK,KAAW,OAAOzC,KAAS,IAAI,UAAUQ,KAAY,IAAO;AAAA,cAC7D,gBAAA4B,EAACM,GAAA,EAAM,QAAQ9B,EAAA,CAAM;AAAA,cACpBD,KACC,gBAAAyB,EAACO,GAAA,EAAQ,WAAU,OAAM,OAAOhC,GAC9B,UAAA,gBAAAyB,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAA,EAACQ,GAAA,EAAS,WAAU,uBAAsB,GAC5C,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKN,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAc,MAAMf,EAAa,EAAI;AAAA,YACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,YAEtC,UAAA,gBAAAe;AAAA,cAACS;AAAA,cAAA;AAAA,gBACE,GAAG5B;AAAA,gBACJ,IAAI,OAAOjB;AAAA,gBACX,iBAAgB;AAAA,gBAChB,UAAAQ;AAAA,gBACA,SAASN;AAAA,gBACT,aAAa;AAAA,gBACb,WAAWC;AAAA,gBACX,YAAYI;AAAA,gBACZ,QAAQqB;AAAA,gBACR,SAASvB;AAAA,gBACT,OAAOA,IAAcC,IAAiBG;AAAA,gBACtC,UAAUc;AAAA,gBACV,cAAAR;AAAA,gBACA,aAAAC;AAAA,gBACA,YAAY;AAAA,kBACV,UAAU,MAAM;AAAA,kBAChB,SAAS,MAAK;AAAA,gBAAA;AAAA,gBAEhB,YAAY;AAAA,kBACV,mBAAAmB;AAAA,kBACA,oBAAoB,MAAM;AAAA,gBAAA;AAAA,cAC5B;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDlC,KACC,gBAAAmC;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,SAAQ;AAAA,YAEP,UAAA7C;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAH,EAAqB,cAAc;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"medium",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
|
|
2
2
|
//# sourceMappingURL=IconPicker.cjs.js.map
|