@powerhousedao/document-engineering 1.38.0 → 1.39.0

package/dist/src/ui/components/data-entry/oid-input/oid-input.stories.js

@@ -0,0 +1,457 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getDefaultArgTypes, getValidationArgTypes, PrebuiltArgTypes, StorybookControlCategory, } from '../../../../scalars/lib/storybook-arg-types.js';
+import { fetchOptions, fetchSelectedOption, mockedOptions } from './mocks.js';
+import { OIDInput } from './oid-input.js';
+/**
+ * ## Autocomplete input component
+ *
+ * `OIDInput` is a specialized input component for handling OIDs (Object Identifiers) with advanced
+ * autocomplete functionality. It allows users to search and select items intuitively as they type.
+ *
+ * ### Important configs:
+ *
+ * **1.`fetchOptionsCallback` (for dynamic autocomplete)**
+ * - Executes while the user types in the input field
+ * - Receives the user's input text as a parameter
+ * - Must return a list of options that match the search criteria
+ * - Enables real-time search from APIs, databases, or others external or internal data sources
+ *
+ * **2.`fetchSelectedOptionCallback` (to update the preview of the selected option)**
+ * - Called when the "refresh" button in the preview of the selected option is clicked
+ * - Receives the selected option's ID/value as a parameter
+ * - Must return the updated details of that specific option or undefined if the option is not found for some reason
+ * - As `fetchOptionsCallback` can be used synchronously or asynchronously
+ *
+ * ### Basic usage example:
+ *
+ * ```tsx
+ * <OIDInput
+ *   name="object-selector"
+ *   label="Select Object"
+ *   placeholder="uuid"
+ *   variant="withValueTitleAndDescription"
+ *
+ *   // search options as the user types
+ *   fetchOptionsCallback={async (userInput) => {
+ *     const results = await searchObjects(userInput)
+ *     return results.map(obj => ({
+ *       value: obj.id, // unique object ID
+ *       title: obj.title, // object title or name
+ *       path: obj.path, // object path or location
+ *       description: obj.description, // object description or summary
+ *       icon: obj.icon // object icon
+ *     }))
+ *   }}
+ *
+ *   // get details of a specific option by its ID/value
+ *   fetchSelectedOptionCallback={async (objectId) => {
+ *     const obj = await getObjectById(objectId)
+ *     return {
+ *       value: obj.id,
+ *       title: obj.title,
+ *       path: obj.path,
+ *       description: obj.description,
+ *       icon: obj.icon
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [OIDField](?path=/docs/scalars-oid-field--readme)
+ * > component.
+ */
+const meta = {
+    title: 'Data Entry/OID Input',
+    component: OIDInput,
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '280px', margin: '1rem auto 0' }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        layout: 'padded',
+        chromatic: {
+            disableSnapshot: true,
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        ...getDefaultArgTypes(),
+        ...getValidationArgTypes({
+            enabledArgTypes: {
+                validators: false,
+                showErrorOnBlur: false,
+                showErrorOnChange: false,
+            },
+        }),
+        ...PrebuiltArgTypes.placeholder,
+        autoComplete: {
+            control: 'boolean',
+            description: 'Enables autocomplete functionality to suggest options while typing',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        fetchOptionsCallback: {
+            control: 'object',
+            description: 'Function to fetch options based on user input and context. ' +
+                'Must return a Promise that resolves to an array of objects or an array of objects with the following properties:\n\n' +
+                'icon?: IconName | React.ReactElement\n\n' +
+                'title?: string\n\n' +
+                'path?: string | { text: string; url: string; }\n\n' +
+                'value: string\n\n' +
+                'description?: string\n\n',
+            table: {
+                type: {
+                    summary: '(userInput: string; context?: {}) => Promise<OIDOption[]> | OIDOption[]',
+                },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+                readonly: true,
+            },
+            if: { arg: 'autoComplete', neq: false },
+        },
+        fetchSelectedOptionCallback: {
+            control: 'object',
+            description: 'Function to fetch details for a selected option. ' +
+                'Must return a Promise that resolves to an object or an object with the following properties:\n\n' +
+                'icon?: IconName | React.ReactElement\n\n' +
+                'title?: string\n\n' +
+                'path?: string | { text: string; url: string; }\n\n' +
+                'value: string\n\n' +
+                'description?: string\n\n' +
+                'or undefined if the option is not found',
+            table: {
+                type: {
+                    summary: '(value: string) => Promise<OIDOption | undefined> | OIDOption | undefined',
+                },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+                readonly: true,
+            },
+            if: { arg: 'autoComplete', neq: false },
+        },
+        initialOptions: {
+            control: 'object',
+            description: 'Array of options to initially populate the autocomplete dropdown',
+            table: {
+                type: { summary: 'OIDOption[]' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+            if: { arg: 'autoComplete', neq: false },
+        },
+        previewPlaceholder: {
+            control: 'object',
+            description: 'Custom placeholder values to show when no option is selected or when there are no matching options. ' +
+                'Can include custom values for:\n\n' +
+                'icon?: IconName | React.ReactElement\n\n' +
+                'title?: string\n\n' +
+                'path?: string | { text: string; url: string; }\n\n' +
+                'value: string\n\n' +
+                'description?: string\n\n',
+            table: {
+                type: { summary: 'OIDOption' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+            if: { arg: 'autoComplete', neq: false },
+        },
+        variant: {
+            control: 'radio',
+            options: ['withValue', 'withValueAndTitle', 'withValueTitleAndDescription'],
+            description: 'Controls the amount of information displayed for each option: value only, value with title, or value with title and description',
+            table: {
+                type: {
+                    summary: '"withValue" | "withValueAndTitle" | "withValueTitleAndDescription"',
+                },
+                defaultValue: { summary: 'withValue' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+            if: { arg: 'autoComplete', neq: false },
+        },
+        ...PrebuiltArgTypes.viewMode,
+        ...PrebuiltArgTypes.baseValue,
+        basePreviewIcon: {
+            control: 'object',
+            description: 'The icon of the base preview',
+            table: {
+                type: { summary: 'IconName | React.ReactElement' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+        basePreviewTitle: {
+            control: 'text',
+            description: 'The title of the base preview',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+        basePreviewPath: {
+            control: 'object',
+            description: 'The path of the base preview',
+            table: {
+                type: { summary: 'string | { text: string; url: string; }' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+        basePreviewDescription: {
+            control: 'text',
+            description: 'The description of the base preview',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+    },
+    args: {
+        name: 'oid-input',
+    },
+};
+export default meta;
+const createCodeExample = (props) => {
+    const propsString = Object.entries(props)
+        .map(([key, value]) => {
+        if (typeof value === 'string')
+            return `  ${key}="${value}"`;
+        if (typeof value === 'boolean')
+            return `  ${key}={${value}}`;
+        if (value && typeof value === 'object') {
+            return `  ${key}={${JSON.stringify(value, null, 4).replace(/\n/g, '\n  ')}}`;
+        }
+        return `  ${key}={${value}}`;
+    })
+        .join('\n');
+    return `<OIDInput
+${propsString}
+  // Example definition of fetchOptionsCallback and fetchSelectedOptionCallback functions.
+  // Please, note that you should implement your own functions.
+  // In this example the functions are async and return a Promise but you can also implement both as sync functions.
+  fetchOptionsCallback={async (userInput: string) => {
+    // fetch objects from your API endpoint
+    const response = await fetch(\`/your-api-endpoint?search=\${userInput}\`)
+    const objects = await response.json()
+    
+    return objects.map(object => ({
+      value: object.id,
+      title: object.title,
+      path: object.path,
+      description: object.description,
+      icon: 'Braces'
+    }))
+  }}
+  fetchSelectedOptionCallback={async (id: string) => {
+    // fetch specific object details from your API endpoint
+    const response = await fetch(\`/your-api-endpoint/\${id}\`)
+    if (!response.ok) return undefined
+    
+    const object = await response.json()
+    return {
+      value: object.id,
+      title: object.title,
+      path: object.path,
+      description: object.description,
+      icon: 'Braces'
+    }
+  }}
+/>`;
+};
+export const Default = {
+    args: {
+        label: 'OID input',
+        placeholder: 'uuid',
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input',
+                    placeholder: 'uuid',
+                }),
+            },
+        },
+    },
+};
+export const Empty = {
+    args: {
+        label: 'OID input',
+        placeholder: 'uuid',
+        isOpenByDefault: true,
+        defaultValue: 'uuid',
+        variant: 'withValueTitleAndDescription',
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input',
+                    placeholder: 'uuid',
+                    isOpenByDefault: true,
+                    defaultValue: 'uuid',
+                    variant: 'withValueTitleAndDescription',
+                }),
+            },
+        },
+    },
+};
+export const Open = {
+    args: {
+        label: 'OID input',
+        placeholder: 'uuid',
+        isOpenByDefault: true,
+        defaultValue: 'uuid',
+        variant: 'withValueTitleAndDescription',
+        initialOptions: mockedOptions,
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input',
+                    placeholder: 'uuid',
+                    isOpenByDefault: true,
+                    defaultValue: 'uuid',
+                    variant: 'withValueTitleAndDescription',
+                    initialOptions: mockedOptions,
+                }),
+            },
+        },
+    },
+};
+export const Filled = {
+    args: {
+        label: 'OID input',
+        placeholder: 'uuid',
+        defaultValue: mockedOptions[0].value,
+        initialOptions: mockedOptions,
+        variant: 'withValueTitleAndDescription',
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input',
+                    placeholder: 'uuid',
+                    defaultValue: mockedOptions[0].value,
+                    initialOptions: mockedOptions,
+                    variant: 'withValueTitleAndDescription',
+                }),
+            },
+        },
+    },
+};
+export const WithDifferencesAddition = {
+    args: {
+        label: 'OID input addition',
+        placeholder: 'uuid',
+        variant: 'withValueTitleAndDescription',
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+        defaultValue: mockedOptions[0].value,
+        initialOptions: mockedOptions,
+        viewMode: 'addition',
+        baseValue: 'abcde2a4-f9a0-4950-8161-fd8d8cc7dea7',
+        basePreviewIcon: 'Braces',
+        basePreviewTitle: 'Old Object A',
+        basePreviewPath: 'old-rwa-portfolio-a',
+        basePreviewDescription: 'Old Object A description',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input addition',
+                    placeholder: 'uuid',
+                    variant: 'withValueTitleAndDescription',
+                    defaultValue: mockedOptions[0].value,
+                    initialOptions: mockedOptions,
+                    viewMode: 'addition',
+                    baseValue: 'abcde2a4-f9a0-4950-8161-fd8d8cc7dea7',
+                    basePreviewIcon: 'Braces',
+                    basePreviewTitle: 'Old Object A',
+                    basePreviewPath: 'old-rwa-portfolio-a',
+                    basePreviewDescription: 'Old Object A description',
+                }),
+            },
+        },
+    },
+};
+export const WithDifferencesRemoval = {
+    args: {
+        label: 'OID input removal',
+        placeholder: 'uuid',
+        variant: 'withValueTitleAndDescription',
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+        defaultValue: mockedOptions[0].value,
+        initialOptions: mockedOptions,
+        viewMode: 'removal',
+        baseValue: 'abcde2a4-f9a0-4950-8161-fd8d8cc7dea7',
+        basePreviewIcon: 'Braces',
+        basePreviewTitle: 'Old Object A',
+        basePreviewPath: 'old-rwa-portfolio-a',
+        basePreviewDescription: 'Old Object A description',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input removal',
+                    placeholder: 'uuid',
+                    variant: 'withValueTitleAndDescription',
+                    defaultValue: mockedOptions[0].value,
+                    initialOptions: mockedOptions,
+                    viewMode: 'removal',
+                    baseValue: 'abcde2a4-f9a0-4950-8161-fd8d8cc7dea7',
+                    basePreviewIcon: 'Braces',
+                    basePreviewTitle: 'Old Object A',
+                    basePreviewPath: 'old-rwa-portfolio-a',
+                    basePreviewDescription: 'Old Object A description',
+                }),
+            },
+        },
+    },
+};
+export const WithDifferencesMixed = {
+    args: {
+        label: 'OID input mixed',
+        placeholder: 'uuid',
+        variant: 'withValueTitleAndDescription',
+        fetchOptionsCallback: fetchOptions,
+        fetchSelectedOptionCallback: fetchSelectedOption,
+        defaultValue: mockedOptions[0].value,
+        initialOptions: mockedOptions,
+        viewMode: 'mixed',
+        baseValue: 'abcde2a4-f9a0-4950-8161-fd8d8cc7dea7',
+        basePreviewIcon: 'Braces',
+        basePreviewTitle: 'Old Object A',
+        basePreviewPath: 'old-rwa-portfolio-a',
+        basePreviewDescription: 'Old Object A description',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: createCodeExample({
+                    label: 'OID input mixed',
+                    placeholder: 'uuid',
+                    variant: 'withValueTitleAndDescription',
+                    defaultValue: mockedOptions[0].value,
+                    initialOptions: mockedOptions,
+                    viewMode: 'mixed',
+                    baseValue: 'abcde2a4-f9a0-4950-8161-fd8d8cc7dea7',
+                    basePreviewIcon: 'Braces',
+                    basePreviewTitle: 'Old Object A',
+                    basePreviewPath: 'old-rwa-portfolio-a',
+                    basePreviewDescription: 'Old Object A description',
+                }),
+            },
+        },
+    },
+};
+//# sourceMappingURL=oid-input.stories.js.map

package/dist/src/ui/components/data-entry/oid-input/oid-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oid-input.stories.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/oid-input/oid-input.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,gDAAgD,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AAEH,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,YACnD,KAAC,KAAK,KAAG,GACL,CACP;KACF;IACD,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE;YACT,eAAe,EAAE,IAAI;SACtB;KACF;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,kBAAkB,EAAE;QACvB,GAAG,qBAAqB,CAAC;YACvB,eAAe,EAAE;gBACf,UAAU,EAAE,KAAK;gBACjB,eAAe,EAAE,KAAK;gBACtB,iBAAiB,EAAE,KAAK;aACzB;SACF,CAAC;QACF,GAAG,gBAAgB,CAAC,WAAW;QAE/B,YAAY,EAAE;YACZ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oEAAoE;YACjF,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;gBACjC,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;aACtD;SACF;QAED,oBAAoB,EAAE;YACpB,OAAO,EAAE,QAAQ;YACjB,WAAW,EACT,6DAA6D;gBAC7D,sHAAsH;gBACtH,0CAA0C;gBAC1C,oBAAoB;gBACpB,oDAAoD;gBACpD,mBAAmB;gBACnB,0BAA0B;YAC5B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,yEAAyE;iBACnF;gBACD,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;gBACrD,QAAQ,EAAE,IAAI;aACf;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE;SACxC;QAED,2BAA2B,EAAE;YAC3B,OAAO,EAAE,QAAQ;YACjB,WAAW,EACT,mDAAmD;gBACnD,kGAAkG;gBAClG,0CAA0C;gBAC1C,oBAAoB;gBACpB,oDAAoD;gBACpD,mBAAmB;gBACnB,0BAA0B;gBAC1B,yCAAyC;YAC3C,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,2EAA2E;iBACrF;gBACD,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;gBACrD,QAAQ,EAAE,IAAI;aACf;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE;SACxC;QAED,cAAc,EAAE;YACd,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;gBAChC,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;aACtD;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE;SACxC;QAED,kBAAkB,EAAE;YAClB,OAAO,EAAE,QAAQ;YACjB,WAAW,EACT,sGAAsG;gBACtG,oCAAoC;gBACpC,0CAA0C;gBAC1C,oBAAoB;gBACpB,oDAAoD;gBACpD,mBAAmB;gBACnB,0BAA0B;YAC5B,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;gBAC9B,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;aACtD;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE;SACxC;QAED,OAAO,EAAE;YACP,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,WAAW,EAAE,mBAAmB,EAAE,8BAA8B,CAAC;YAC3E,WAAW,EACT,iIAAiI;YACnI,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,oEAAoE;iBAC9E;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;gBACtC,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;aACtD;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE;SACxC;QAED,GAAG,gBAAgB,CAAC,QAAQ;QAC5B,GAAG,gBAAgB,CAAC,SAAS;QAC7B,eAAe,EAAE;YACf,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,8BAA8B;YAC3C,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,+BAA+B,EAAE;gBAClD,QAAQ,EAAE,wBAAwB,CAAC,IAAI;aACxC;SACF;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,+BAA+B;YAC5C,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,QAAQ,EAAE,wBAAwB,CAAC,IAAI;aACxC;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,8BAA8B;YAC3C,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,yCAAyC,EAAE;gBAC5D,QAAQ,EAAE,wBAAwB,CAAC,IAAI;aACxC;SACF;QACD,sBAAsB,EAAE;YACtB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;YAClD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,QAAQ,EAAE,wBAAwB,CAAC,IAAI;aACxC;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW;KAClB;CAC8B,CAAA;AAEjC,eAAe,IAAI,CAAA;AAInB,MAAM,iBAAiB,GAAG,CAAC,KAA0B,EAAE,EAAE;IACvD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACtC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACpB,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAO,KAAK,GAAG,KAAK,KAAK,GAAG,CAAA;QAC3D,IAAI,OAAO,KAAK,KAAK,SAAS;YAAE,OAAO,KAAK,GAAG,KAAK,KAAK,GAAG,CAAA;QAC5D,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvC,OAAO,KAAK,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAA;QAC9E,CAAC;QACD,OAAO,KAAK,GAAG,KAAK,KAAK,GAAG,CAAA;IAC9B,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,OAAO;EACP,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,MAAM;QACnB,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,MAAM;iBACpB,CAAC;aACH;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,MAAM;QACnB,eAAe,EAAE,IAAI;QACrB,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,8BAA8B;QACvC,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,MAAM;oBACnB,eAAe,EAAE,IAAI;oBACrB,YAAY,EAAE,MAAM;oBACpB,OAAO,EAAE,8BAA8B;iBACxC,CAAC;aACH;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,MAAM;QACnB,eAAe,EAAE,IAAI;QACrB,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,8BAA8B;QACvC,cAAc,EAAE,aAAa;QAC7B,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,MAAM;oBACnB,eAAe,EAAE,IAAI;oBACrB,YAAY,EAAE,MAAM;oBACpB,OAAO,EAAE,8BAA8B;oBACvC,cAAc,EAAE,aAAa;iBAC9B,CAAC;aACH;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;QACpC,cAAc,EAAE,aAAa;QAC7B,OAAO,EAAE,8BAA8B;QACvC,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,WAAW;oBAClB,WAAW,EAAE,MAAM;oBACnB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;oBACpC,cAAc,EAAE,aAAa;oBAC7B,OAAO,EAAE,8BAA8B;iBACxC,CAAC;aACH;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAU;IAC5C,IAAI,EAAE;QACJ,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,8BAA8B;QACvC,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;QAChD,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;QACpC,cAAc,EAAE,aAAa;QAC7B,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,sCAAsC;QACjD,eAAe,EAAE,QAAQ;QACzB,gBAAgB,EAAE,cAAc;QAChC,eAAe,EAAE,qBAAqB;QACtC,sBAAsB,EAAE,0BAA0B;KACnD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,oBAAoB;oBAC3B,WAAW,EAAE,MAAM;oBACnB,OAAO,EAAE,8BAA8B;oBACvC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;oBACpC,cAAc,EAAE,aAAa;oBAC7B,QAAQ,EAAE,UAAU;oBACpB,SAAS,EAAE,sCAAsC;oBACjD,eAAe,EAAE,QAAQ;oBACzB,gBAAgB,EAAE,cAAc;oBAChC,eAAe,EAAE,qBAAqB;oBACtC,sBAAsB,EAAE,0BAA0B;iBACnD,CAAC;aACH;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC3C,IAAI,EAAE;QACJ,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,8BAA8B;QACvC,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;QAChD,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;QACpC,cAAc,EAAE,aAAa;QAC7B,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,sCAAsC;QACjD,eAAe,EAAE,QAAQ;QACzB,gBAAgB,EAAE,cAAc;QAChC,eAAe,EAAE,qBAAqB;QACtC,sBAAsB,EAAE,0BAA0B;KACnD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,mBAAmB;oBAC1B,WAAW,EAAE,MAAM;oBACnB,OAAO,EAAE,8BAA8B;oBACvC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;oBACpC,cAAc,EAAE,aAAa;oBAC7B,QAAQ,EAAE,SAAS;oBACnB,SAAS,EAAE,sCAAsC;oBACjD,eAAe,EAAE,QAAQ;oBACzB,gBAAgB,EAAE,cAAc;oBAChC,eAAe,EAAE,qBAAqB;oBACtC,sBAAsB,EAAE,0BAA0B;iBACnD,CAAC;aACH;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,8BAA8B;QACvC,oBAAoB,EAAE,YAAY;QAClC,2BAA2B,EAAE,mBAAmB;QAChD,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;QACpC,cAAc,EAAE,aAAa;QAC7B,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,sCAAsC;QACjD,eAAe,EAAE,QAAQ;QACzB,gBAAgB,EAAE,cAAc;QAChC,eAAe,EAAE,qBAAqB;QACtC,sBAAsB,EAAE,0BAA0B;KACnD;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB,CAAC;oBACtB,KAAK,EAAE,iBAAiB;oBACxB,WAAW,EAAE,MAAM;oBACnB,OAAO,EAAE,8BAA8B;oBACvC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK;oBACpC,cAAc,EAAE,aAAa;oBAC7B,QAAQ,EAAE,OAAO;oBACjB,SAAS,EAAE,sCAAsC;oBACjD,eAAe,EAAE,QAAQ;oBACzB,gBAAgB,EAAE,cAAc;oBAChC,eAAe,EAAE,qBAAqB;oBACtC,sBAAsB,EAAE,0BAA0B;iBACnD,CAAC;aACH;SACF;KACF;CACF,CAAA"}

package/dist/src/ui/components/data-entry/oid-input/oid-input.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=oid-input.test.d.ts.map

package/dist/src/ui/components/data-entry/oid-input/oid-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oid-input.test.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/oid-input/oid-input.test.tsx"],"names":[],"mappings":""}

package/dist/src/ui/components/data-entry/oid-input/oid-input.test.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { OIDInput } from './oid-input.js';
+describe('OIDInput Component', () => {
+    const mockedOptions = [
+        {
+            icon: 'Braces',
+            title: 'Object A',
+            path: 'rwa-portfolio-a',
+            value: 'baefc2a4-f9a0-4950-8161-fd8d8cc7dea7',
+            description: 'Object A description',
+        },
+        {
+            icon: 'Braces',
+            title: 'Object B',
+            path: 'rwa-portfolio-b',
+            value: 'baefc2a4-f9a0-4950-8161-fd8d8cc6cdb8',
+            description: 'Object B description',
+        },
+    ];
+    const defaultGetOptions = vi.fn().mockResolvedValue(mockedOptions);
+    const defaultGetSelectedOption = vi.fn().mockImplementation((value) => {
+        return mockedOptions.find((option) => option.value === value);
+    });
+    it('should match snapshot', () => {
+        const { asFragment } = render(_jsx(OIDInput, { name: "oid", label: "OID Input", placeholder: "uuid", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render with label', () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+    });
+    it('should render with description', () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", description: "Test Description", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+    it('should handle disabled state', () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", disabled: true, fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.getByRole('combobox')).toBeDisabled();
+    });
+    it('should display error messages', async () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", errors: ['Invalid OID format'], fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        await waitFor(() => {
+            expect(screen.getByText('Invalid OID format')).toBeInTheDocument();
+        });
+    });
+    it('should display warning messages', () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", warnings: ['OID may be deprecated'], fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.getByText('OID may be deprecated')).toBeInTheDocument();
+    });
+    it('should show autocomplete options', async () => {
+        const user = userEvent.setup();
+        const originalRandom = Math.random;
+        Math.random = vi.fn().mockReturnValue(1);
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", variant: "withValueTitleAndDescription", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await user.clear(input);
+        await user.type(input, 'test');
+        await waitFor(() => {
+            expect(defaultGetOptions).toHaveBeenCalledWith('test', {});
+        });
+        await waitFor(() => {
+            expect(input).toHaveAttribute('aria-expanded', 'true');
+            expect(screen.getByText(mockedOptions[0].title)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[1].title)).toBeInTheDocument();
+        });
+        Math.random = originalRandom;
+    });
+    it('should have correct ARIA attributes', async () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", required: true, errors: ['Error message'], fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        const input = screen.getByRole('combobox');
+        expect(input).toHaveAttribute('aria-required', 'true');
+        await waitFor(() => {
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+        });
+        expect(input).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('should show correct placeholders for different variants', () => {
+        const { rerender } = render(_jsx(OIDInput, { name: "oid", label: "Test Label", variant: "withValueTitleAndDescription", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.getByText('Title not available')).toBeInTheDocument();
+        expect(screen.getByText('Type not available')).toBeInTheDocument();
+        expect(screen.getByText('Description not available')).toBeInTheDocument();
+        rerender(_jsx(OIDInput, { name: "oid", label: "Test Label", variant: "withValueAndTitle", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.getByText('Title not available')).toBeInTheDocument();
+        expect(screen.getByText('Type not available')).toBeInTheDocument();
+        expect(screen.queryByText('Description not available')).not.toBeInTheDocument();
+        rerender(_jsx(OIDInput, { name: "oid", label: "Test Label", variant: "withValue", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        expect(screen.queryByText('Title not available')).not.toBeInTheDocument();
+        expect(screen.queryByText('Type not available')).not.toBeInTheDocument();
+        expect(screen.queryByText('Description not available')).not.toBeInTheDocument();
+    });
+    it('should handle autoComplete disabled', () => {
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", autoComplete: false }));
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+    it('should handle value changes and auto selection', async () => {
+        const user = userEvent.setup();
+        const originalRandom = Math.random;
+        Math.random = vi.fn().mockReturnValue(1);
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", variant: "withValueTitleAndDescription", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await user.type(input, mockedOptions[0].value);
+        await waitFor(() => {
+            expect(input).toHaveAttribute('aria-expanded', 'false');
+        });
+        await waitFor(() => {
+            expect(screen.getByText(mockedOptions[0].title)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].path)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].description)).toBeInTheDocument();
+        });
+        Math.random = originalRandom;
+    });
+    it('should not invoke onChange on mount when it has a defaultValue', () => {
+        const onChange = vi.fn();
+        render(_jsx(OIDInput, { name: "oid", label: "Test Label", defaultValue: mockedOptions[0].value, fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption, onChange: onChange }));
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    // Tests for viewMode and diffs functionality
+    describe('viewMode and diffs', () => {
+        it('should render in edition mode by default', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.getByRole('combobox')).toBeInTheDocument();
+        });
+        it('should render in edition mode when viewMode is explicitly set to edition', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "edition", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.getByRole('combobox')).toBeInTheDocument();
+        });
+        it('should render diff component when viewMode is addition', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "addition", value: mockedOptions[0].value, baseValue: mockedOptions[1].value, fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].value)).toBeInTheDocument();
+            expect(screen.queryByText(mockedOptions[1].value)).not.toBeInTheDocument();
+        });
+        it('should render diff component when viewMode is removal', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "removal", value: mockedOptions[0].value, baseValue: mockedOptions[1].value, fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[1].value)).toBeInTheDocument();
+            expect(screen.queryByText(mockedOptions[0].value)).not.toBeInTheDocument();
+        });
+        it('should render diff component when viewMode is mixed', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "mixed", value: mockedOptions[0].value, baseValue: mockedOptions[1].value, fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].value)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[1].value)).toBeInTheDocument();
+        });
+        it('should pass correct props to diff component', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "mixed", value: mockedOptions[0].value, baseValue: mockedOptions[1].value, required: true, fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+            expect(screen.getByText('*')).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].value)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[1].value)).toBeInTheDocument();
+        });
+        it('should handle empty value in diff mode', () => {
+            const { container } = render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "addition", value: "", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+            const diffSpans = container.querySelectorAll('span');
+            diffSpans.forEach((span) => {
+                expect(span).toHaveTextContent('');
+            });
+        });
+        it('should respect variant in diff mode', () => {
+            render(_jsx(OIDInput, { name: "oid", label: "Test Label", viewMode: "addition", value: mockedOptions[0].value, initialOptions: mockedOptions, variant: "withValueAndTitle", fetchOptionsCallback: defaultGetOptions, fetchSelectedOptionCallback: defaultGetSelectedOption }));
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].value)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].title)).toBeInTheDocument();
+            expect(screen.getByText(mockedOptions[0].path)).toBeInTheDocument();
+            expect(screen.queryByText(mockedOptions[0].description)).not.toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=oid-input.test.js.map