@cryptlex/web-components 6.7.21 → 6.7.23
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{getEmptyLabel as e,isEmptyValue as t}from"../utilities/empty-option.js";import{classNames as n}from"../utilities/theme.js";import{useCtxClient as r}from"../utilities/ctx-client.js";import{useFieldContext as i}from"../utilities/form-context.js";import{FormField as a}from"./form.js";import{getFieldErrorMessage as o}from"../utilities/form.js";import{ComboBox as s,ComboBoxChip as c,ComboBoxChipList as l,ComboBoxFieldGroup as u,ComboBoxInput as d,ComboBoxItem as ee,ComboBoxListBox as f,ComboBoxPopover as p}from"./combobox.js";import{useId as m,useMemo as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{keepPreviousData as y,useQuery as b}from"@tanstack/react-query";function x(e){return e.name??e.displayName??``}function S(e){return Array.isArray(e)&&e.every(e=>{if(!e||typeof e!=`object`||!(`id`in e)||typeof e.id!=`string`)return!1;let t=`name`in e&&typeof e.name==`string`,n=`displayName`in e&&typeof e.displayName==`string`;return t||n})}function C({label:i,description:o,errorMessage:C,requiredIndicator:w,isDisabled:T,isInvalid:E,onBlur:D,path:O,onChange:k,value:A,accessor:j,getItemLabel:M,defaultParams:N,className:P,emptyOption:F,selectionMode:I,...L}){if(O===`/v3/me`)throw Error(`Path "/v3/me" is not supported with IdSearch since it is not a searchable resource.`);let R=m(),z=L.id||R,B=r(),V=M??x,H=e=>String(e[j]??e.id),U=e=>{let t=V(e);return typeof t==`string`?t:x(e)},[W,G]=g(``),{data:K,isError:q,error:J}=b({queryKey:[`get`,O,W],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,search:W,limit:50,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},placeholderData:y}),Y=Array.isArray(A)?A:null,X=Array.isArray(A)?A:typeof A==`string`&&A?[A]:[],Z=X.slice().join(`,`),{data:Q}=b({queryKey:[`get`,O,`selected`,j,Z],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,[j]:{in:Z},limit:X.length,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},enabled:X.length>0,placeholderData:y}),$=e=>K?.find(t=>H(t)===e)??Q?.find(t=>H(t)===e),te=h(()=>{let e=K??[];if(I===`multiple`)return e;let t=X[0],n=e.some(e=>H(e)===t);if(!t||n)return e;let r=$(t);return r?[r,...e]:e},[K,Q,j,X.join(` `),I]),ne=F&&t(A)?e(F):`Search...`;return _(`div`,{className:`group form-field`,"data-invalid":E?``:void 0,children:
|
|
1
|
+
"use client";import{getEmptyLabel as e,isEmptyValue as t}from"../utilities/empty-option.js";import{classNames as n}from"../utilities/theme.js";import{useCtxClient as r}from"../utilities/ctx-client.js";import{useFieldContext as i}from"../utilities/form-context.js";import{FormField as a}from"./form.js";import{getFieldErrorMessage as o}from"../utilities/form.js";import{ComboBox as s,ComboBoxChip as c,ComboBoxChipList as l,ComboBoxFieldGroup as u,ComboBoxInput as d,ComboBoxItem as ee,ComboBoxListBox as f,ComboBoxPopover as p}from"./combobox.js";import{useId as m,useMemo as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{keepPreviousData as y,useQuery as b}from"@tanstack/react-query";function x(e){return e.name??e.displayName??``}function S(e){return Array.isArray(e)&&e.every(e=>{if(!e||typeof e!=`object`||!(`id`in e)||typeof e.id!=`string`)return!1;let t=`name`in e&&typeof e.name==`string`,n=`displayName`in e&&typeof e.displayName==`string`;return t||n})}function C({label:i,description:o,errorMessage:C,requiredIndicator:w,isDisabled:T,isInvalid:E,onBlur:D,path:O,onChange:k,value:A,accessor:j,getItemLabel:M,defaultParams:N,className:P,emptyOption:F,selectionMode:I,...L}){if(O===`/v3/me`)throw Error(`Path "/v3/me" is not supported with IdSearch since it is not a searchable resource.`);let R=m(),z=L.id||R,B=r(),V=M??x,H=e=>String(e[j]??e.id),U=e=>{let t=V(e);return typeof t==`string`?t:x(e)},[W,G]=g(``),{data:K,isError:q,error:J}=b({queryKey:[`get`,O,W],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,search:W,limit:50,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},placeholderData:y}),Y=Array.isArray(A)?A:null,X=Array.isArray(A)?A:typeof A==`string`&&A?[A]:[],Z=X.slice().join(`,`),{data:Q}=b({queryKey:[`get`,O,`selected`,j,Z],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,[j]:{in:Z},limit:X.length,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},enabled:X.length>0,placeholderData:y}),$=e=>K?.find(t=>H(t)===e)??Q?.find(t=>H(t)===e),te=h(()=>{let e=K??[];if(I===`multiple`)return e;let t=X[0],n=e.some(e=>H(e)===t);if(!t||n)return e;let r=$(t);return r?[r,...e]:e},[K,Q,j,X.join(` `),I]),ne=F&&t(A)?e(F):`Search...`;return _(`div`,{className:`group form-field`,"data-invalid":E?``:void 0,children:v(s,{...L,isDisabled:T,isInvalid:E,selectionMode:I,value:A,onChange:e=>{k(Array.isArray(e)?e.map(String):e==null?null:String(e))},inputValue:I===`multiple`?W:void 0,onInputChange:G,menuTrigger:`focus`,allowsEmptyCollection:!0,defaultFilter:()=>!0,onOpenChange:e=>{e||(D?.(A),G(``))},children:[_(a,{label:i,description:o,errorMessage:C,requiredIndicator:w,htmlFor:z,children:v(u,{className:n(Y?`h-auto flex-wrap items-center py-1`:void 0,P),children:[Y&&Y.length>0&&_(l,{"aria-label":typeof i==`string`?`Selected ${i}`:`Selected items`,onRemove:e=>k(Y.filter(t=>!e.has(t))),items:Y.flatMap(e=>{let t=$(e);if(!t)return[];let n=V(t);return[{id:e,label:n,textValue:typeof n==`string`?n:x(t)}]}),children:e=>_(c,{textValue:e.textValue,children:e.label},e.id)}),_(d,{id:z,placeholder:ne})]})}),_(p,{placement:`bottom start`,children:q?_(`div`,{className:`text-destructive p-icon body-sm`,children:J.message}):_(f,{items:te,className:`border-none`,renderEmptyState:()=>_(`div`,{className:`body-sm p-2`,children:`No results found.`}),children:e=>_(ee,{id:H(e),textValue:U(e),children:V(e)},H(e))})})]})})}function w({accessor:e,getItemLabel:n,disallowEmptySelection:r,onChange:i,...a}){return _(C,{...a,accessor:e,getItemLabel:n,selectionMode:`single`,onChange:e=>{Array.isArray(e)||r&&t(e)||i(e)}})}function T({accessor:e,getItemLabel:t,disallowEmptySelection:n,onChange:r,...i}){return _(C,{...i,accessor:e,getItemLabel:t,selectionMode:`multiple`,onChange:e=>{Array.isArray(e)&&(n&&e.length===0||r(e))}})}function E({isDisabled:e,...t}){let n=i({disabled:e});return _(w,{requiredIndicator:n.isRequired,isDisabled:e||n.isSubmitting,value:n.state.value,onBlur:e=>n.handleBlur(),onChange:e=>n.handleChange(e),isInvalid:!!o(n),errorMessage:o(n),...t})}function D({isDisabled:e,...t}){let n=i({disabled:e});return _(T,{requiredIndicator:n.isRequired,isDisabled:e||n.isSubmitting,value:n.state.value,onBlur:e=>n.handleBlur(),onChange:e=>n.handleChange(e),isInvalid:!!o(n),errorMessage:o(n),...t})}export{T as MultipleIdSearchInput,w as SingleIdSearchInput,D as TfMultipleIdSearchInput,E as TfSingleIdSearchInput};
|
|
2
2
|
//# sourceMappingURL=id-search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"id-search.js","names":[],"sources":["../../lib/components/id-search.tsx"],"sourcesContent":["'use client';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport { useId, useMemo, useState } from 'react';\n\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport {\n ComboBox,\n ComboBoxChip,\n ComboBoxChipList,\n ComboBoxFieldGroup,\n ComboBoxInput,\n ComboBoxItem,\n ComboBoxListBox,\n ComboBoxPopover,\n} from '../components/combobox';\nimport { useCtxClient, type CtxClientType } from '../utilities/ctx-client';\nimport { getEmptyLabel, isEmptyValue, type EmptyOption } from '../utilities/empty-option';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './form';\n/**\n * Minimal resource shape used by the ID search inputs.\n * `id` is required; the label comes from `name` or `displayName`.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n * const product: BaseSearchableResource = { id: 'p_123', displayName: 'My Product' };\n */\ntype BaseSearchableResource = {\n /** Unique identifier used as the input value. */\n id: string;\n /** Human-readable label shown to users. */\n name?: string;\n displayName?: string;\n};\n\n/** Resources commonly expose either `name` or `displayName` as their human-readable label. */\nfunction getResourceLabel(item: BaseSearchableResource): string {\n return item.name ?? item.displayName ?? '';\n}\n\n/**\n * Type guard to check if a value is an array of searchable resources\n */\nfunction isSearchableResourceArray<T extends BaseSearchableResource>(value: unknown): value is T[] {\n return (\n Array.isArray(value) &&\n value.every(item => {\n if (!item || typeof item !== 'object' || !('id' in item) || typeof item.id !== 'string') return false;\n const hasName = 'name' in item && typeof item.name === 'string';\n const hasDisplayName = 'displayName' in item && typeof item.displayName === 'string';\n return hasName || hasDisplayName;\n })\n );\n}\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible `ComboBox`: the input itself shows the current selection's label\n * (single) or a row of removable chips (multiple), searching in place as you type.\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id`; label is `name` or `displayName`)\n *\n * @param props - props object (see inline property JSDoc for the most important fields). `value`/`onChange`\n * use the widened `string | string[] | null` shape shared by both selection modes - `SingleIdSearchInput`\n * and `MultipleIdSearchInput` narrow it back down for their own public API.\n *\n * @remarks\n * - Search is automatically handled based on the `path` prop using the API client from context\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `defaultParams` can be used to pass additional query parameters to the search endpoint\n *\n * @example\n * <BaseIdSearchInput\n * label=\"Owner\"\n * path=\"/v3/users\"\n * accessor=\"id\"\n * selectionMode=\"single\"\n * value={ownerId}\n * onChange={setOwnerId}\n * />\n *\n * @testing\n * - Ensure API client is provided via context; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n isDisabled,\n isInvalid,\n onBlur,\n path,\n onChange,\n value,\n accessor,\n getItemLabel,\n defaultParams,\n className,\n emptyOption,\n selectionMode,\n ...props\n}: FormFieldProps & {\n path: ClientPathsWithMethod<CtxClientType, 'get'>;\n /** Disable interactions. */\n isDisabled?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** Key used to access an alternate display accessor on item (kept for compatibility). */\n accessor: keyof BaseSearchableResource;\n getItemLabel?: (item: T) => React.ReactNode;\n /** Controlled value. */\n value: string | string[] | null;\n /** Called when popover closes or the field blurs with the current value. */\n onBlur?: (v: string | string[] | null) => void;\n /** Controlled change handler. */\n onChange: (v: string | string[] | null) => void;\n /** Default parameters to include in the request. This is useful when using /v3/users?role='admin' or /v3/organizations/ID/user-groups */\n defaultParams?: Record<'path' | 'query', any>;\n /** Optional className to customize the trigger button styling. */\n className?: string;\n /* Optional empty option to show when value is empty. */\n emptyOption?: EmptyOption;\n selectionMode: 'single' | 'multiple';\n} & Omit<\n React.ComponentProps<typeof ComboBox>,\n | 'children'\n | 'items'\n | 'className'\n | 'selectionMode'\n | 'value'\n | 'onChange'\n | 'onInputChange'\n | 'inputValue'\n | 'onBlur'\n >) {\n if (path === '/v3/me') {\n throw Error('Path \"/v3/me\" is not supported with IdSearch since it is not a searchable resource.');\n }\n\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const client = useCtxClient();\n const itemLabel = getItemLabel ?? getResourceLabel;\n const getItemId = (item: T) => String(item[accessor] ?? item.id);\n const itemTextValue = (item: T): string => {\n const label = itemLabel(item);\n return typeof label === 'string' ? label : getResourceLabel(item);\n };\n\n const [search, setSearch] = useState('');\n const { data, isError, error } = useQuery({\n queryKey: ['get', path, search],\n queryFn: async (): Promise<T[]> => {\n const result = await client.GET(path, {\n params: {\n query: { ...defaultParams?.query, search, limit: 50, page: 1 },\n path: { ...defaultParams?.path },\n },\n });\n return isSearchableResourceArray<T>(result.data) ? result.data : [];\n },\n placeholderData: keepPreviousData,\n });\n\n const chipValues = Array.isArray(value) ? value : null;\n const selectedIds = Array.isArray(value) ? value : typeof value === 'string' && value ? [value] : [];\n\n const selectedIdsKey = selectedIds.slice().join(',');\n const { data: selectedItemsData } = useQuery({\n queryKey: ['get', path, 'selected', accessor, selectedIdsKey],\n queryFn: async (): Promise<T[]> => {\n const result = await client.GET(path, {\n params: {\n query: {\n ...defaultParams?.query,\n [accessor]: { in: selectedIdsKey },\n limit: selectedIds.length,\n page: 1,\n },\n path: { ...defaultParams?.path },\n },\n });\n return isSearchableResourceArray<T>(result.data) ? result.data : [];\n },\n enabled: selectedIds.length > 0,\n placeholderData: keepPreviousData,\n });\n\n const resolveItem = (id: string): T | undefined =>\n data?.find(item => getItemId(item) === id) ?? selectedItemsData?.find(item => getItemId(item) === id);\n\n const items = useMemo(() => {\n const searchResults = data ?? [];\n if (selectionMode === 'multiple') {\n return searchResults;\n }\n\n const selectedId = selectedIds[0];\n const selectedItemIsPresent = searchResults.some(item => getItemId(item) === selectedId);\n if (!selectedId || selectedItemIsPresent) {\n return searchResults;\n }\n\n const missingSelectedItem = resolveItem(selectedId);\n return missingSelectedItem ? [missingSelectedItem, ...searchResults] : searchResults;\n }, [data, selectedItemsData, accessor, selectedIds.join(' '), selectionMode]);\n\n const placeholder = emptyOption && isEmptyValue(value) ? getEmptyLabel(emptyOption) : 'Search...';\n\n return (\n <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <ComboBox\n {...props}\n id={fieldId}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n selectionMode={selectionMode}\n value={value}\n onChange={v => {\n onChange(Array.isArray(v) ? v.map(String) : v == null ? null : String(v));\n }}\n inputValue={selectionMode === 'multiple' ? search : undefined}\n onInputChange={setSearch}\n allowsEmptyCollection\n defaultFilter={() => true}\n onOpenChange={isOpen => {\n if (!isOpen) {\n onBlur?.(value);\n setSearch('');\n }\n }}\n >\n <ComboBoxFieldGroup\n className={classNames(chipValues ? 'h-auto flex-wrap items-center py-1' : undefined, className)}\n >\n {chipValues && chipValues.length > 0 && (\n <ComboBoxChipList\n onRemove={keys => onChange(chipValues.filter(v => !keys.has(v)))}\n items={chipValues.flatMap(v => {\n const match = resolveItem(v);\n if (!match) return [];\n const label = itemLabel(match);\n const textValue = typeof label === 'string' ? label : getResourceLabel(match);\n return [{ id: v, label, textValue }];\n })}\n >\n {item => (\n <ComboBoxChip key={item.id} textValue={item.textValue}>\n {item.label}\n </ComboBoxChip>\n )}\n </ComboBoxChipList>\n )}\n <ComboBoxInput placeholder={placeholder} />\n </ComboBoxFieldGroup>\n <ComboBoxPopover placement=\"bottom start\">\n {isError ? (\n <div className=\"text-destructive p-icon body-sm\">{error.message}</div>\n ) : (\n <ComboBoxListBox\n items={items}\n className=\"border-none\"\n renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n >\n {item => (\n <ComboBoxItem\n key={getItemId(item)}\n id={getItemId(item)}\n textValue={itemTextValue(item)}\n >\n {itemLabel(item)}\n </ComboBoxItem>\n )}\n </ComboBoxListBox>\n )}\n </ComboBoxPopover>\n </ComboBox>\n </FormField>\n </div>\n );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n * label=\"Reporter\"\n * value={reporterId}\n * onChange={setReporterId}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n accessor,\n getItemLabel,\n disallowEmptySelection,\n onChange,\n ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n disallowEmptySelection?: boolean;\n value: string | null;\n onChange: (v: string | null) => void;\n}) {\n return (\n <BaseIdSearchInput\n {...props}\n accessor={accessor}\n getItemLabel={getItemLabel}\n selectionMode=\"single\"\n onChange={v => {\n if (Array.isArray(v)) return;\n if (disallowEmptySelection && isEmptyValue(v)) return;\n onChange(v);\n }}\n />\n );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n * label=\"Reviewers\"\n * value={reviewerIds}\n * onChange={setReviewerIds}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n accessor,\n getItemLabel,\n disallowEmptySelection,\n onChange,\n ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n disallowEmptySelection?: boolean;\n value: string[];\n onChange: (v: string[]) => void;\n}) {\n return (\n <BaseIdSearchInput\n {...props}\n accessor={accessor}\n getItemLabel={getItemLabel}\n selectionMode=\"multiple\"\n onChange={vals => {\n if (!Array.isArray(vals)) return;\n if (disallowEmptySelection && vals.length === 0) return;\n onChange(vals);\n }}\n />\n );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" />\n \n */\nexport function TfSingleIdSearchInput<T extends BaseSearchableResource>({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput<T>>, 'value' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<string | null>({ disabled: isDisabled });\n return (\n <SingleIdSearchInput\n requiredIndicator={field.isRequired}\n isDisabled={isDisabled || field.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" />\n *\n */\nexport function TfMultipleIdSearchInput<T extends BaseSearchableResource>({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput<T>>, 'value' | 'onChange'>) {\n const field = useFieldContext<string[]>({ disabled: isDisabled });\n return (\n <MultipleIdSearchInput\n requiredIndicator={field.isRequired}\n isDisabled={isDisabled || field.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"id-search.js","names":[],"sources":["../../lib/components/id-search.tsx"],"sourcesContent":["'use client';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport { useId, useMemo, useState } from 'react';\n\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport {\n ComboBox,\n ComboBoxChip,\n ComboBoxChipList,\n ComboBoxFieldGroup,\n ComboBoxInput,\n ComboBoxItem,\n ComboBoxListBox,\n ComboBoxPopover,\n} from '../components/combobox';\nimport { useCtxClient, type CtxClientType } from '../utilities/ctx-client';\nimport { getEmptyLabel, isEmptyValue, type EmptyOption } from '../utilities/empty-option';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './form';\n/**\n * Minimal resource shape used by the ID search inputs.\n * `id` is required; the label comes from `name` or `displayName`.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n * const product: BaseSearchableResource = { id: 'p_123', displayName: 'My Product' };\n */\ntype BaseSearchableResource = {\n /** Unique identifier used as the input value. */\n id: string;\n /** Human-readable label shown to users. */\n name?: string;\n displayName?: string;\n};\n\n/** Resources commonly expose either `name` or `displayName` as their human-readable label. */\nfunction getResourceLabel(item: BaseSearchableResource): string {\n return item.name ?? item.displayName ?? '';\n}\n\n/**\n * Type guard to check if a value is an array of searchable resources\n */\nfunction isSearchableResourceArray<T extends BaseSearchableResource>(value: unknown): value is T[] {\n return (\n Array.isArray(value) &&\n value.every(item => {\n if (!item || typeof item !== 'object' || !('id' in item) || typeof item.id !== 'string') return false;\n const hasName = 'name' in item && typeof item.name === 'string';\n const hasDisplayName = 'displayName' in item && typeof item.displayName === 'string';\n return hasName || hasDisplayName;\n })\n );\n}\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible `ComboBox`: the input itself shows the current selection's label\n * (single) or a row of removable chips (multiple), searching in place as you type.\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id`; label is `name` or `displayName`)\n *\n * @param props - props object (see inline property JSDoc for the most important fields). `value`/`onChange`\n * use the widened `string | string[] | null` shape shared by both selection modes - `SingleIdSearchInput`\n * and `MultipleIdSearchInput` narrow it back down for their own public API.\n *\n * @remarks\n * - Search is automatically handled based on the `path` prop using the API client from context\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `defaultParams` can be used to pass additional query parameters to the search endpoint\n *\n * @example\n * <BaseIdSearchInput\n * label=\"Owner\"\n * path=\"/v3/users\"\n * accessor=\"id\"\n * selectionMode=\"single\"\n * value={ownerId}\n * onChange={setOwnerId}\n * />\n *\n * @testing\n * - Ensure API client is provided via context; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n isDisabled,\n isInvalid,\n onBlur,\n path,\n onChange,\n value,\n accessor,\n getItemLabel,\n defaultParams,\n className,\n emptyOption,\n selectionMode,\n ...props\n}: FormFieldProps & {\n path: ClientPathsWithMethod<CtxClientType, 'get'>;\n /** Disable interactions. */\n isDisabled?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** Key used to access an alternate display accessor on item (kept for compatibility). */\n accessor: keyof BaseSearchableResource;\n getItemLabel?: (item: T) => React.ReactNode;\n /** Controlled value. */\n value: string | string[] | null;\n /** Called when popover closes or the field blurs with the current value. */\n onBlur?: (v: string | string[] | null) => void;\n /** Controlled change handler. */\n onChange: (v: string | string[] | null) => void;\n /** Default parameters to include in the request. This is useful when using /v3/users?role='admin' or /v3/organizations/ID/user-groups */\n defaultParams?: Record<'path' | 'query', any>;\n /** Optional className to customize the trigger button styling. */\n className?: string;\n /* Optional empty option to show when value is empty. */\n emptyOption?: EmptyOption;\n selectionMode: 'single' | 'multiple';\n} & Omit<\n React.ComponentProps<typeof ComboBox>,\n | 'children'\n | 'items'\n | 'className'\n | 'selectionMode'\n | 'value'\n | 'onChange'\n | 'onInputChange'\n | 'inputValue'\n | 'onBlur'\n >) {\n if (path === '/v3/me') {\n throw Error('Path \"/v3/me\" is not supported with IdSearch since it is not a searchable resource.');\n }\n\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const client = useCtxClient();\n const itemLabel = getItemLabel ?? getResourceLabel;\n const getItemId = (item: T) => String(item[accessor] ?? item.id);\n const itemTextValue = (item: T): string => {\n const label = itemLabel(item);\n return typeof label === 'string' ? label : getResourceLabel(item);\n };\n\n const [search, setSearch] = useState('');\n const { data, isError, error } = useQuery({\n queryKey: ['get', path, search],\n queryFn: async (): Promise<T[]> => {\n const result = await client.GET(path, {\n params: {\n query: { ...defaultParams?.query, search, limit: 50, page: 1 },\n path: { ...defaultParams?.path },\n },\n });\n return isSearchableResourceArray<T>(result.data) ? result.data : [];\n },\n placeholderData: keepPreviousData,\n });\n\n const chipValues = Array.isArray(value) ? value : null;\n const selectedIds = Array.isArray(value) ? value : typeof value === 'string' && value ? [value] : [];\n\n const selectedIdsKey = selectedIds.slice().join(',');\n const { data: selectedItemsData } = useQuery({\n queryKey: ['get', path, 'selected', accessor, selectedIdsKey],\n queryFn: async (): Promise<T[]> => {\n const result = await client.GET(path, {\n params: {\n query: {\n ...defaultParams?.query,\n [accessor]: { in: selectedIdsKey },\n limit: selectedIds.length,\n page: 1,\n },\n path: { ...defaultParams?.path },\n },\n });\n return isSearchableResourceArray<T>(result.data) ? result.data : [];\n },\n enabled: selectedIds.length > 0,\n placeholderData: keepPreviousData,\n });\n\n const resolveItem = (id: string): T | undefined =>\n data?.find(item => getItemId(item) === id) ?? selectedItemsData?.find(item => getItemId(item) === id);\n\n const items = useMemo(() => {\n const searchResults = data ?? [];\n if (selectionMode === 'multiple') {\n return searchResults;\n }\n\n const selectedId = selectedIds[0];\n const selectedItemIsPresent = searchResults.some(item => getItemId(item) === selectedId);\n if (!selectedId || selectedItemIsPresent) {\n return searchResults;\n }\n\n const missingSelectedItem = resolveItem(selectedId);\n return missingSelectedItem ? [missingSelectedItem, ...searchResults] : searchResults;\n }, [data, selectedItemsData, accessor, selectedIds.join(' '), selectionMode]);\n\n const placeholder = emptyOption && isEmptyValue(value) ? getEmptyLabel(emptyOption) : 'Search...';\n\n return (\n <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n <ComboBox\n {...props}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n selectionMode={selectionMode}\n value={value}\n onChange={v => {\n onChange(Array.isArray(v) ? v.map(String) : v == null ? null : String(v));\n }}\n inputValue={selectionMode === 'multiple' ? search : undefined}\n onInputChange={setSearch}\n menuTrigger=\"focus\"\n allowsEmptyCollection\n defaultFilter={() => true}\n onOpenChange={open => {\n if (!open) {\n onBlur?.(value);\n setSearch('');\n }\n }}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <ComboBoxFieldGroup\n className={classNames(chipValues ? 'h-auto flex-wrap items-center py-1' : undefined, className)}\n >\n {chipValues && chipValues.length > 0 && (\n <ComboBoxChipList\n aria-label={typeof label === 'string' ? `Selected ${label}` : 'Selected items'}\n onRemove={keys => onChange(chipValues.filter(v => !keys.has(v)))}\n items={chipValues.flatMap(v => {\n const match = resolveItem(v);\n if (!match) return [];\n const label = itemLabel(match);\n const textValue = typeof label === 'string' ? label : getResourceLabel(match);\n return [{ id: v, label, textValue }];\n })}\n >\n {item => (\n <ComboBoxChip key={item.id} textValue={item.textValue}>\n {item.label}\n </ComboBoxChip>\n )}\n </ComboBoxChipList>\n )}\n <ComboBoxInput id={fieldId} placeholder={placeholder} />\n </ComboBoxFieldGroup>\n </FormField>\n <ComboBoxPopover placement=\"bottom start\">\n {isError ? (\n <div className=\"text-destructive p-icon body-sm\">{error.message}</div>\n ) : (\n <ComboBoxListBox\n items={items}\n className=\"border-none\"\n renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n >\n {item => (\n <ComboBoxItem\n key={getItemId(item)}\n id={getItemId(item)}\n textValue={itemTextValue(item)}\n >\n {itemLabel(item)}\n </ComboBoxItem>\n )}\n </ComboBoxListBox>\n )}\n </ComboBoxPopover>\n </ComboBox>\n </div>\n );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n * label=\"Reporter\"\n * value={reporterId}\n * onChange={setReporterId}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n accessor,\n getItemLabel,\n disallowEmptySelection,\n onChange,\n ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n disallowEmptySelection?: boolean;\n value: string | null;\n onChange: (v: string | null) => void;\n}) {\n return (\n <BaseIdSearchInput\n {...props}\n accessor={accessor}\n getItemLabel={getItemLabel}\n selectionMode=\"single\"\n onChange={v => {\n if (Array.isArray(v)) return;\n if (disallowEmptySelection && isEmptyValue(v)) return;\n onChange(v);\n }}\n />\n );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n * label=\"Reviewers\"\n * value={reviewerIds}\n * onChange={setReviewerIds}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n accessor,\n getItemLabel,\n disallowEmptySelection,\n onChange,\n ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n disallowEmptySelection?: boolean;\n value: string[];\n onChange: (v: string[]) => void;\n}) {\n return (\n <BaseIdSearchInput\n {...props}\n accessor={accessor}\n getItemLabel={getItemLabel}\n selectionMode=\"multiple\"\n onChange={vals => {\n if (!Array.isArray(vals)) return;\n if (disallowEmptySelection && vals.length === 0) return;\n onChange(vals);\n }}\n />\n );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" />\n \n */\nexport function TfSingleIdSearchInput<T extends BaseSearchableResource>({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput<T>>, 'value' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<string | null>({ disabled: isDisabled });\n return (\n <SingleIdSearchInput\n requiredIndicator={field.isRequired}\n isDisabled={isDisabled || field.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" />\n *\n */\nexport function TfMultipleIdSearchInput<T extends BaseSearchableResource>({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput<T>>, 'value' | 'onChange'>) {\n const field = useFieldContext<string[]>({ disabled: isDisabled });\n return (\n <MultipleIdSearchInput\n requiredIndicator={field.isRequired}\n isDisabled={isDisabled || field.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.23",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"*.{ts,tsx,css,json}": "prettier --write"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@cryptlex/web-api-types": "2.
|
|
51
|
+
"@cryptlex/web-api-types": "2.179.0",
|
|
52
52
|
"@dnd-kit/core": "6.3.1",
|
|
53
53
|
"@dnd-kit/sortable": "10.0.0",
|
|
54
54
|
"@dnd-kit/utilities": "3.2.2",
|