@pega/cosmos-react-demos 3.0.0-dev.2.0 → 3.0.0-dev.4.1

package/jsx/work/Timeline/Timeline.stories.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
-import { Timeline } from '@pega/cosmos-react-work';
+import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
+import { Timeline, TimelineToolbar } from '@pega/cosmos-react-work';
 import { activity } from './Timeline.mocks';
 export default {
     title: 'Work/Timeline',
@@ -40,4 +41,30 @@ TimelineDemo.argTypes = {
         control: { type: 'select' }
     }
 };
+export const TimelineToolbarDemo = () => {
+    const [sortOrder, setSortOrder] = useState();
+    const [groupBy, setGroupBy] = useState();
+    const [items, setItems] = useState(activity);
+    const onSearchSubmit = useCallback((value) => {
+        setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));
+    }, []);
+    return (<Card>
+      <CardHeader>
+        <TimelineToolbar heading='Timeline Demo' search={{ onSearchSubmit }} count={{ total: items.length }} sort={{
+            selected: sortOrder,
+            onItemClick: (id) => {
+                setSortOrder(id);
+            }
+        }} group={{
+            selected: groupBy,
+            onItemClick: (id) => {
+                setGroupBy(id);
+            }
+        }}/>
+      </CardHeader>
+      <CardContent>
+        <Timeline activity={items} currentTime={new Date()} sortOrder={sortOrder} groupBy={groupBy}/>
+      </CardContent>
+    </Card>);
+};
 //# sourceMappingURL=Timeline.stories.jsx.map

package/jsx/work/Timeline/Timeline.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAiE,CACxF,IAA2D,EAC3D,EAAE;IACF,MAAM,kBAAkB,GAAG,CAAC,CAAC;IAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,GAAG,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAC7B,mBAAmB,EACnB,mBAAmB,GAAG,iBAAiB,CACxC,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;wBACzB,UAAU,CAAC,KAAK,CAAC,CAAC;qBACnB;oBAED,OAAO,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,QAAQ,CACP,QAAQ,CAAC,CAAC,KAAK,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACzC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChF,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps } from '@pega/cosmos-react-work';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n"]}
+{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { Card, CardContent, CardHeader, OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps, TimelineToolbar } from '@pega/cosmos-react-work';\nimport {\n  TimelineGroupBy,\n  TimelineSortOrder\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n\nexport const TimelineToolbarDemo = () => {\n  const [sortOrder, setSortOrder] = useState<TimelineSortOrder>();\n  const [groupBy, setGroupBy] = useState<TimelineGroupBy>();\n  const [items, setItems] = useState<TimelineProps['activity']>(activity);\n\n  const onSearchSubmit = useCallback((value: string) => {\n    setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <TimelineToolbar\n          heading='Timeline Demo'\n          search={{ onSearchSubmit }}\n          count={{ total: items.length }}\n          sort={{\n            selected: sortOrder,\n            onItemClick: (id: TimelineProps['sortOrder']) => {\n              setSortOrder(id);\n            }\n          }}\n          group={{\n            selected: groupBy,\n            onItemClick: (id: TimelineProps['groupBy']) => {\n              setGroupBy(id);\n            }\n          }}\n        />\n      </CardHeader>\n      <CardContent>\n        <Timeline\n          activity={items}\n          currentTime={new Date()}\n          sortOrder={sortOrder}\n          groupBy={groupBy}\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"]}

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+import { DynamicContentEditorProps } from '@pega/cosmos-react-build';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
+}
+export declare const DynamicContentEditorDemo: (args: DynamicContentEditorStoryProps) => JSX.Element;
+//# sourceMappingURL=DynamicContentEditor.stories.d.ts.map

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAexC,OAAO,EAEL,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;;AAIlC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,SAAU,8BAA8B,gBA0G5E,CAAC"}

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from 'react';
+import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
+import { DynamicContentEditor } from '@pega/cosmos-react-build';
+import FieldSelector from './FieldSelector';
+export default {
+    title: 'Build/DynamicContentEditor',
+    component: DynamicContentEditor
+};
+export const DynamicContentEditorDemo = (args) => {
+    const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
+    const rteRef = useRef(null);
+    const fieldItems = [
+        { id: 'CustomerName', primary: 'CustomerName' },
+        { id: 'Address', primary: 'Address' },
+        { id: 'Locality', primary: 'Locality' },
+        { id: 'Country', primary: 'Country' },
+        { id: 'Region', primary: 'Region' },
+        { id: 'Occupation', primary: 'Occupation' },
+        { id: 'City', primary: 'City' },
+        { id: 'Colony', primary: 'Colony' },
+        { id: 'Lastname', primary: 'Lastname' },
+        { id: 'Preference', primary: 'Preference' },
+        { id: 'Currency', primary: 'Currency' },
+        { id: 'Iconname', primary: 'Iconname' }
+    ];
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        rteRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
+    const ref = useRef(null);
+    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
+    const handleShowHtml = () => {
+        resizeTextArea();
+        setHtml(rteRef.current?.getHtml() || '');
+    };
+    const t = useI18n();
+    const [selectedField, setSelectedField] = useState({
+        id: '',
+        text: ''
+    });
+    const updateSelection = (selectedItem) => {
+        setSelectedField(selectedItem);
+    };
+    const onSubmit = useCallback((insertField) => {
+        insertField(selectedField);
+    }, [selectedField]);
+    const dynamicContentPicker = (_jsx(Flex, { container: {
+            gap: 2,
+            direction: 'column'
+        }, children: _jsx(FieldSelector, { itemList: [
+                { id: 'CustomerName', text: 'CustomerName' },
+                { id: 'Address', text: 'Address' },
+                { id: 'Locality', text: 'Locality' },
+                { id: 'Country', text: 'Country' },
+                { id: 'Region', text: 'Region' },
+                { id: 'Occupation', text: 'Occupation' }
+            ], label: 'Field', updateSelection: updateSelection, placeholder: t('select'), defaultSelection: selectedField }, selectedField?.id) }, void 0));
+    const onActiveFieldChange = (field) => setSelectedField(field);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value), autoResize: true, ref: consolidatedRef }, void 0) }, void 0), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }, void 0) }, void 0)] }, void 0), _jsx(DynamicContentEditor, { defaultValue: args.defaultValue || html, onImageAdded: onImageAdded, ref: rteRef, label: 'Dynamic content editor', toolbar: ['inline-styling', 'lists', 'indentation', 'links', 'images'], form: args.form || { onSubmit, dynamicContentPicker }, onActiveFieldChange: args.onActiveFieldChange || onActiveFieldChange, fieldItems: args.fieldItems || fieldItems }, void 0), _jsx(Flex, { container: { gap: 1 }, children: _jsx(Button, { onClick: () => handleShowHtml(), children: "Show HTML" }, void 0) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=DynamicContentEditor.stories.js.map

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContentEditor.stories.js","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  TextArea,\n  useAutoResize,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport {\n  DynamicContentEditor,\n  DynamicContentEditorProps,\n  ItemType\n} from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n  title: 'Build/DynamicContentEditor',\n  component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo = (args: DynamicContentEditorStoryProps) => {\n  const [html, setHtml] = useState(\n    '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n  );\n  const rteRef = useRef<EditorState>(null);\n\n  const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n    { id: 'CustomerName', primary: 'CustomerName' },\n    { id: 'Address', primary: 'Address' },\n    { id: 'Locality', primary: 'Locality' },\n    { id: 'Country', primary: 'Country' },\n    { id: 'Region', primary: 'Region' },\n    { id: 'Occupation', primary: 'Occupation' },\n    { id: 'City', primary: 'City' },\n    { id: 'Colony', primary: 'Colony' },\n    { id: 'Lastname', primary: 'Lastname' },\n    { id: 'Preference', primary: 'Preference' },\n    { id: 'Currency', primary: 'Currency' },\n    { id: 'Iconname', primary: 'Iconname' }\n  ];\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n  const ref = useRef(null);\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const handleShowHtml = () => {\n    resizeTextArea();\n    setHtml(rteRef.current?.getHtml() || '');\n  };\n  const t = useI18n();\n  const [selectedField, setSelectedField] = useState<ItemType>({\n    id: '',\n    text: ''\n  });\n\n  const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n    setSelectedField(selectedItem);\n  };\n  const onSubmit = useCallback(\n    (insertField: (selectedField: ItemType) => void) => {\n      insertField(selectedField);\n    },\n    [selectedField]\n  );\n\n  const dynamicContentPicker = (\n    <Flex\n      container={{\n        gap: 2,\n        direction: 'column'\n      }}\n    >\n      <FieldSelector\n        itemList={[\n          { id: 'CustomerName', text: 'CustomerName' },\n          { id: 'Address', text: 'Address' },\n          { id: 'Locality', text: 'Locality' },\n          { id: 'Country', text: 'Country' },\n          { id: 'Region', text: 'Region' },\n          { id: 'Occupation', text: 'Occupation' }\n        ]}\n        key={selectedField?.id}\n        label='Field'\n        updateSelection={updateSelection}\n        placeholder={t('select')}\n        defaultSelection={selectedField}\n      />\n    </Flex>\n  );\n  const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea\n            value={html}\n            onChange={e => setHtml(e.target.value)}\n            autoResize\n            ref={consolidatedRef}\n          />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <DynamicContentEditor\n        defaultValue={args.defaultValue || html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Dynamic content editor'\n        toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n        form={args.form || { onSubmit, dynamicContentPicker }}\n        onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n        fieldItems={args.fieldItems || fieldItems}\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/lib/build/DynamicContentEditor/FieldSelector.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { ItemType } from '@pega/cosmos-react-build/lib/components/DynamicContentEditor/DynamicContentEditor.types';
+export interface FieldSelectorProps extends NoChildrenProp {
+    /** Array of values for the combobox options. */
+    itemList: ItemType[];
+    /** Return selected item */
+    updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;
+    /** Default selected item */
+    defaultSelection?: ItemType;
+}
+declare const FieldSelector: FunctionComponent<FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>>;
+export default FieldSelector;
+//# sourceMappingURL=FieldSelector.d.ts.map

package/lib/build/DynamicContentEditor/FieldSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,yFAAyF,CAAC;AAEnH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,2BAA2B;IAC3B,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,CAiGxF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/build/DynamicContentEditor/FieldSelector.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from 'react';
+import { ComboBox, createStringMatcher, useI18n } from '@pega/cosmos-react-core';
+const FieldSelector = ({ itemList, label, mode = 'single-select', required = false, updateSelection, placeholder, defaultSelection }) => {
+    const t = useI18n();
+    const [filterValue, setFilterValue] = useState('');
+    const [items, setItems] = useState(() => {
+        return itemList.map(item => {
+            return {
+                id: item.id,
+                primary: item.text,
+                selected: defaultSelection ? defaultSelection.id === item.id : false
+            };
+        });
+    });
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const itemsToRender = useMemo(() => {
+        return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;
+    }, [filterValue, items]);
+    const clearSelection = () => {
+        setItems(curr => {
+            return curr?.map(item => {
+                return {
+                    ...item,
+                    selected: false
+                };
+            });
+        });
+    };
+    const selectItem = useCallback((id) => {
+        setFilterValue('');
+        setItems(curr => curr?.map(item => {
+            if (item.id === id) {
+                return {
+                    ...item,
+                    selected: true
+                };
+            }
+            return { ...item, selected: false };
+        }));
+        const selectedItem = items?.find(item => item.id === id);
+        if (selectedItem?.id)
+            updateSelection({
+                id: selectedItem.id,
+                text: selectedItem.primary
+            }, label);
+    }, [filterValue, items]);
+    const selected = useMemo(() => {
+        return items?.find(item => item.selected);
+    }, [items]);
+    const comboBoxProps = {
+        label,
+        placeholder,
+        mode,
+        value: filterValue,
+        selected: selected
+            ? {
+                items: {
+                    id: selected.id,
+                    text: selected.primary
+                }
+            }
+            : undefined,
+        onChange: (e) => {
+            if (e.target.value)
+                clearSelection();
+            setFilterValue(e.target.value);
+        },
+        onBlur: () => setFilterValue(''),
+        menu: {
+            items: itemsToRender,
+            accent: filterRegex,
+            onItemClick: selectItem,
+            emptyText: t('no_items')
+        },
+        required
+    };
+    return _jsx(ComboBox, { ...comboBoxProps }, void 0);
+};
+export default FieldSelector;
+//# sourceMappingURL=FieldSelector.js.map

package/lib/build/DynamicContentEditor/FieldSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState, useCallback } from 'react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  createStringMatcher,\n  MenuItemProps,\n  NoChildrenProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { ItemType } from '@pega/cosmos-react-build/lib/components/DynamicContentEditor/DynamicContentEditor.types';\n\nexport interface FieldSelectorProps extends NoChildrenProp {\n  /** Array of values for the combobox options. */\n  itemList: ItemType[];\n  /** Return selected item */\n  updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;\n  /** Default selected item */\n  defaultSelection?: ItemType;\n}\n\nconst FieldSelector: FunctionComponent<\n  FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>\n> = ({\n  itemList,\n  label,\n  mode = 'single-select',\n  required = false,\n  updateSelection,\n  placeholder,\n  defaultSelection\n}) => {\n  const t = useI18n();\n\n  const [filterValue, setFilterValue] = useState('');\n  const [items, setItems] = useState(() => {\n    return itemList.map(item => {\n      return {\n        id: item.id,\n        primary: item.text,\n        selected: defaultSelection ? defaultSelection.id === item.id : false\n      };\n    });\n  });\n\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n  const itemsToRender = useMemo(() => {\n    return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;\n  }, [filterValue, items]);\n\n  const clearSelection = () => {\n    setItems(curr => {\n      return curr?.map(item => {\n        return {\n          ...item,\n          selected: false\n        };\n      });\n    });\n  };\n\n  const selectItem = useCallback(\n    (id: MenuItemProps['id']) => {\n      setFilterValue('');\n      setItems(curr =>\n        curr?.map(item => {\n          if (item.id === id) {\n            return {\n              ...item,\n              selected: true\n            };\n          }\n          return { ...item, selected: false };\n        })\n      );\n      const selectedItem = items?.find(item => item.id === id);\n      if (selectedItem?.id)\n        updateSelection(\n          {\n            id: selectedItem.id,\n            text: selectedItem.primary\n          },\n          label\n        );\n    },\n    [filterValue, items]\n  );\n\n  const selected = useMemo(() => {\n    return items?.find(item => item.selected);\n  }, [items]);\n\n  const comboBoxProps: ComboBoxProps = {\n    label,\n    placeholder,\n    mode,\n    value: filterValue,\n    selected: selected\n      ? {\n          items: {\n            id: selected.id,\n            text: selected.primary\n          }\n        }\n      : undefined,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.value) clearSelection();\n      setFilterValue(e.target.value);\n    },\n    onBlur: () => setFilterValue(''),\n    menu: {\n      items: itemsToRender,\n      accent: filterRegex,\n      onItemClick: selectItem,\n      emptyText: t('no_items')\n    },\n    required\n  };\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default FieldSelector;\n"]}

package/lib/build/ObjectSelect/ObjectSelect.mocks.d.ts

@@ -0,0 +1,16 @@
+import { DateFunctionsByType, Field } from '@pega/cosmos-react-condition-builder';
+export declare const skeletonData: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    href: string;
+}[];
+export declare const dataPages: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    href: string;
+}[];
+export declare const demoFields: Field[];
+export declare const demoDateFunctions: DateFunctionsByType;
+//# sourceMappingURL=ObjectSelect.mocks.d.ts.map

package/lib/build/ObjectSelect/ObjectSelect.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.mocks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAElF,eAAO,MAAM,YAAY;;;;;GAmCxB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;GAyBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,EAkD7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,mBAqB/B,CAAC"}

package/lib/build/ObjectSelect/ObjectSelect.mocks.js

@@ -0,0 +1,136 @@
+export const skeletonData = [
+    {
+        id: '01-1',
+        primary: 'primary-link-1',
+        secondary: ['secondary-1'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-2',
+        primary: 'primary-link-2',
+        secondary: [
+            'secondary-1',
+            'secondary-2',
+            'secondary-3',
+            'secondary-4',
+            'secondary-5',
+            'secondary-6',
+            'secondary-7',
+            'secondary-8',
+            'secondary-9'
+        ],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-3',
+        primary: 'primary-link-3',
+        secondary: ['secondary-1', 'secondary-2'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-4',
+        primary: 'primary-link-4',
+        secondary: ['secondary-1', 'secondary-2'],
+        href: 'http://www.pega.com'
+    }
+];
+export const dataPages = [
+    {
+        id: '01-1',
+        primary: 'MortgageRequestList-DataSource',
+        secondary: ['Scope', 'O1XPTI-CCompass-Work-MortgageRequest'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-2',
+        primary: 'Credit Scores List Data Source',
+        secondary: ['Scope', 'CreditScore'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-3',
+        primary: 'GetAutoLoanByIDDataSource',
+        secondary: ['Scope', 'O1XPTI-CCompass-Work-AutoLoan'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-4',
+        primary: 'DS_pyMyWorkList',
+        secondary: ['Scope', 'Assign-Worklist'],
+        href: 'http://www.pega.com'
+    }
+];
+export const demoFields = [
+    { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },
+    { name: 'firstName', label: 'First Name', type: 'TEXT' },
+    { name: 'lastName', label: 'Last Name', type: 'TEXT' },
+    { name: 'gender', label: 'Gender', type: 'TEXT' },
+    {
+        name: 'department',
+        label: 'Department',
+        type: 'TEXT',
+        possibleValues: [
+            'Customer Service',
+            'Engineering',
+            'Facilities',
+            'Finance',
+            'HR',
+            'IT',
+            'Sales'
+        ]
+    },
+    { name: 'age', label: 'Age', type: 'NUMBER' },
+    { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },
+    { name: 'salary', label: 'Salary', type: 'NUMBER' },
+    { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },
+    { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },
+    {
+        name: 'shiftStartTime',
+        label: 'Shift start time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'shiftEndTime',
+        label: 'Shift end time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'lastActivityAt',
+        label: 'Last activity at',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'nextPasswordReset',
+        label: 'Next password reset',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },
+    { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }
+];
+export const demoDateFunctions = {
+    DATE_TIME: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'DAYS',
+        'HOURS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ],
+    DATE_ONLY: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ]
+};
+//# sourceMappingURL=ObjectSelect.mocks.js.map

package/lib/build/ObjectSelect/ObjectSelect.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.mocks.js","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.mocks.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,CAAC,aAAa,CAAC;QAC1B,IAAI,EAAE,qBAAqB;KAC5B;IACD;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE;YACT,aAAa;YACb,aAAa;YACb,aAAa;YACb,aAAa;YACb,aAAa;YACb,aAAa;YACb,aAAa;YACb,aAAa;YACb,aAAa;SACd;QACD,IAAI,EAAE,qBAAqB;KAC5B;IACD;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC;QACzC,IAAI,EAAE,qBAAqB;KAC5B;IACD;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC;QACzC,IAAI,EAAE,qBAAqB;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,gCAAgC;QACzC,SAAS,EAAE,CAAC,OAAO,EAAE,sCAAsC,CAAC;QAC5D,IAAI,EAAE,qBAAqB;KAC5B;IACD;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,gCAAgC;QACzC,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC;QACnC,IAAI,EAAE,qBAAqB;KAC5B;IACD;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,2BAA2B;QACpC,SAAS,EAAE,CAAC,OAAO,EAAE,+BAA+B,CAAC;QACrD,IAAI,EAAE,qBAAqB;KAC5B;IACD;QACE,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,iBAAiB;QAC1B,SAAS,EAAE,CAAC,OAAO,EAAE,iBAAiB,CAAC;QACvC,IAAI,EAAE,qBAAqB;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAY;IACjC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE;IAC1D,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE;IACxD,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE;IACtD,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE;IACjD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,MAAM;QACZ,cAAc,EAAE;YACd,kBAAkB;YAClB,aAAa;YACb,YAAY;YACZ,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,OAAO;SACR;KACF;IACD,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC7C,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE;IACjE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnD,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;IAC3D,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE;IAClE;QACE,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,qBAAqB;QAC5B,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE;IACxE,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE;CAC3E,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAwB;IACpD,SAAS,EAAE;QACT,OAAO;QACP,UAAU;QACV,QAAQ;QACR,OAAO;QACP,MAAM;QACN,OAAO;QACP,gBAAgB;QAChB,eAAe;QACf,cAAc;KACf;IACD,SAAS,EAAE;QACT,OAAO;QACP,UAAU;QACV,QAAQ;QACR,OAAO;QACP,gBAAgB;QAChB,eAAe;QACf,cAAc;KACf;CACF,CAAC","sourcesContent":["// cSpell:words XPTI\nimport { DateFunctionsByType, Field } from '@pega/cosmos-react-condition-builder';\n\nexport const skeletonData = [\n  {\n    id: '01-1',\n    primary: 'primary-link-1',\n    secondary: ['secondary-1'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-2',\n    primary: 'primary-link-2',\n    secondary: [\n      'secondary-1',\n      'secondary-2',\n      'secondary-3',\n      'secondary-4',\n      'secondary-5',\n      'secondary-6',\n      'secondary-7',\n      'secondary-8',\n      'secondary-9'\n    ],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-3',\n    primary: 'primary-link-3',\n    secondary: ['secondary-1', 'secondary-2'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-4',\n    primary: 'primary-link-4',\n    secondary: ['secondary-1', 'secondary-2'],\n    href: 'http://www.pega.com'\n  }\n];\n\nexport const dataPages = [\n  {\n    id: '01-1',\n    primary: 'MortgageRequestList-DataSource',\n    secondary: ['Scope', 'O1XPTI-CCompass-Work-MortgageRequest'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-2',\n    primary: 'Credit Scores List Data Source',\n    secondary: ['Scope', 'CreditScore'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-3',\n    primary: 'GetAutoLoanByIDDataSource',\n    secondary: ['Scope', 'O1XPTI-CCompass-Work-AutoLoan'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-4',\n    primary: 'DS_pyMyWorkList',\n    secondary: ['Scope', 'Assign-Worklist'],\n    href: 'http://www.pega.com'\n  }\n];\n\nexport const demoFields: Field[] = [\n  { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },\n  { name: 'firstName', label: 'First Name', type: 'TEXT' },\n  { name: 'lastName', label: 'Last Name', type: 'TEXT' },\n  { name: 'gender', label: 'Gender', type: 'TEXT' },\n  {\n    name: 'department',\n    label: 'Department',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      'Sales'\n    ]\n  },\n  { name: 'age', label: 'Age', type: 'NUMBER' },\n  { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },\n  { name: 'salary', label: 'Salary', type: 'NUMBER' },\n  { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },\n  { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    name: 'shiftStartTime',\n    label: 'Shift start time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'shiftEndTime',\n    label: 'Shift end time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'lastActivityAt',\n    label: 'Last activity at',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'nextPasswordReset',\n    label: 'Next password reset',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n  DATE_TIME: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'DAYS',\n    'HOURS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ],\n  DATE_ONLY: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ]\n};\n"]}

package/lib/build/ObjectSelect/ObjectSelect.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/react';
+import { MouseEvent } from 'react';
+import { ObjectSelectProps } from '@pega/cosmos-react-build';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export interface ObjectSelectStoryProps extends ObjectSelectProps {
+    onSubmit?: (id: string, e: MouseEvent<HTMLElement>) => void;
+    onCancel?: (id: string, e: MouseEvent<HTMLElement>) => void;
+    popoverContent?: string;
+}
+export declare const ObjectSelectSkeleton: Story<ObjectSelectStoryProps>;
+export declare const ObjectSelectDemo: Story<ObjectSelectStoryProps>;
+export declare const ObjectSelectDemoInForm: () => JSX.Element | null;
+//# sourceMappingURL=ObjectSelect.stories.d.ts.map

package/lib/build/ObjectSelect/ObjectSelect.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.stories.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAOL,UAAU,EAEX,MAAM,OAAO,CAAC;AAuBf,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAoB3E,wBAGU;AAcV,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CA2C9D,CAAC;AA6PF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAK1D,CAAC;AAqFF,eAAO,MAAM,sBAAsB,0BA8ElC,CAAC"}