@talxis/base-controls 1.2602.3 → 1.2603.1

package/README.md

@@ -2,5 +2,80 @@
 
 [![npm](https://img.shields.io/npm/v/@talxis/base-controls)](https://www.npmjs.com/package/@talxis/base-controls)
 
-## Developing
-Refer to [Developing](./docs/developing.md) for more information.
+A set of React components made specifically to work with the [Power Apps Component Framework (PCF)](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview). Each supported PCF binding datatype has its own React component, so you can render fully functional Power Apps controls—like Lookups, DateTimes, and Decimals—as standard React components in both Portal and Power Apps.
+
+## Why Base Controls?
+
+Before this package, embedding a nested `Lookup` or other native control inside your PCF required the Nested PCF API, which didn't support binding updates and was cumbersome to work with. With Base Controls you simply render a React component and update its props to trigger a rerender:
+
+```jsx
+<Lookup
+    context={context}
+    parameters={{
+        value: {
+            raw: [{ entityType: 'account', id: '000', name: 'Account 1' }],
+            attributes: { Targets: ['account'] },
+            getAllViews: async (entityName) => {
+                return [{ viewId: '000', viewName: 'View 1', isDefault: true }];
+            }
+        }
+    }}
+/>
+```
+
+More sophisticated controls like `Lookup` or `DateTime` also expose custom hooks, so you can use the business logic while building your own presentation layer.
+
+Base Controls handle the many small details that are easy to overlook—number formatting from User Settings, decimal/group separators, precision, error states, translations, and more—so every control behaves consistently without extra effort.
+
+## Available Controls
+
+| Control | Description |
+|---|---|
+| `Decimal` | Decimal, currency and whole number fields |
+| `DateTime` | Date and time picker |
+| `Lookup` | Entity lookup field |
+| `OptionSet` | Single-select option set |
+| `MultiSelectOptionSet` | Multi-select option set |
+| `TwoOptions` | Boolean / two-option toggle |
+| `TextField` | Single-line and multi-line text |
+| `Duration` | Duration field |
+| `Grid` | Data grid |
+| `DatasetControl` | Dataset-based control |
+
+## Quick Start
+
+Install the package:
+
+```bash
+npm install @talxis/base-controls
+```
+
+Then import and use a control:
+
+```tsx
+import { Decimal } from '@talxis/base-controls';
+
+const [value, setValue] = React.useState<number | null>(3000);
+
+return (
+    <Decimal
+        context={context}
+        onNotifyOutputChanged={(outputs) => setValue(outputs.value ?? null)}
+        parameters={{
+            value: { raw: value, type: 'Decimal' }
+        }}
+    />
+);
+```
+
+See the [Usage Guide](./docs/usage.md) for detailed examples covering precision, error handling, translations, component prop overrides, and context method overrides.
+
+## Documentation
+
+- [**Usage Guide**](./docs/usage.md) — How to use Base Controls in your PCF, including extensibility and advanced examples
+- [**Developing**](./docs/developing.md) — Running a local build in PCF or Portal, and troubleshooting
+- [**Releasing**](./docs/releasing.md) — How to create a new release and publish to NPM
+
+## License
+
+See [LICENSE.md](./LICENSE.md) for details.

package/dist/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.js

@@ -8,7 +8,7 @@ import { Attribute } from '@talxis/client-libraries';
 
 const ColumnSelector = (props) => {
     const { openMenuOnMount } = props;
-    const editColumnsModel = useEditColumns();
+    const editColumnsModel = useEditColumns().model;
     const styles = useMemo(() => getColumnSelectorStyles(), []);
     const model = useModel();
     const labels = model.getLabels();
@@ -45,7 +45,7 @@ const ColumnSelector = (props) => {
             setDefaultOptions(options);
         })();
     }, []);
-    return jsx(Selector, { onOverrideComponentProps: (props) => {
+    return jsx(Selector, { context: "columnSelector", onOverrideComponentProps: (props) => {
             return {
                 ...props,
                 ref: ref,
@@ -53,7 +53,7 @@ const ColumnSelector = (props) => {
                 inputValue: inputValue,
                 className: styles.root,
                 backspaceRemovesValue: false,
-                value: editColumnsModel.getColumns(),
+                value: editColumnsModel.getColumns().filter(col => !col.isHidden),
                 closeMenuOnSelect: false,
                 hideSelectedOptions: true,
                 defaultOptions: defaultOptions,

package/dist/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { InputActionMeta } from \"react-select\";\nimport { getColumnSelectorStyles } from \"./styles\";\nimport { useModel } from \"../../useModel\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { SelectInstance } from 'react-select';\nimport { Attribute, IColumn } from \"@talxis/client-libraries\";\n\ninterface IColumnSelectorProps {\n    openMenuOnMount?: boolean;\n}\n\n\nexport const ColumnSelector = (props: IColumnSelectorProps) => {\n    const { openMenuOnMount } = props;\n    const editColumnsModel = useEditColumns();\n    const styles = useMemo(() => getColumnSelectorStyles(), []);\n    const model = useModel();\n    const labels = model.getLabels();\n    const ref = React.useRef<SelectInstance>(null);\n    const [defaultOptions, setDefaultOptions] = React.useState<IColumn[]>([]);\n    const [inputValue, setInputValue] = React.useState<string>('');\n\n    const onChange = (columns: IColumn[]) => {\n        editColumnsModel.addColumn(columns[columns.length - 1]);\n        setDefaultOptions([...defaultOptions]);\n        setTimeout(() => {\n            ref.current?.focusInput();\n        }, 0);\n    }\n\n    const onInputChange = (value: string, actionMeta: InputActionMeta) => {\n        switch (actionMeta.action) {\n            case 'menu-close':\n            case 'input-blur':\n            case 'set-value': {\n                value = actionMeta.prevInputValue;\n                break;\n            }\n        }\n        setInputValue(value);\n        return value;\n    }\n\n    useEffect(() => {\n        if (openMenuOnMount) {\n            ref.current?.focus();\n            ref.current?.openMenu('first');\n        }\n        (async () => {\n            const options = await editColumnsModel.getAvailableColumns();\n            //forces refresh of defaultOptions\n            setDefaultOptions(options);\n        })();\n    }, []);\n\n\n    return <Selector<true> onOverrideComponentProps={(props) => {\n        return {\n            ...props,\n            ref: ref,\n            isMulti: true,\n            inputValue: inputValue,\n            className: styles.root,\n            backspaceRemovesValue: false,\n            value: editColumnsModel.getColumns(),\n            closeMenuOnSelect: false,\n            hideSelectedOptions: true,\n            defaultOptions: defaultOptions,\n            placeholder: `${labels[\"add-column\"]()}...`,\n            controlShouldRenderValue: false,\n            onInputChange: onInputChange,\n            getOptionValue: (column) => Attribute.GetNameFromAlias(column.name),\n            onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),\n            loadOptions: (inputValue: string) => editColumnsModel.getAvailableColumns(inputValue),\n            onChange: (columns) => onChange(columns as IColumn[]),\n        }\n    }} />\n}"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ColumnSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { InputActionMeta } from \"react-select\";\nimport { getColumnSelectorStyles } from \"./styles\";\nimport { useModel } from \"../../useModel\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { SelectInstance } from 'react-select';\nimport { Attribute, IColumn } from \"@talxis/client-libraries\";\n\ninterface IColumnSelectorProps {\n    openMenuOnMount?: boolean;\n}\n\n\nexport const ColumnSelector = (props: IColumnSelectorProps) => {\n    const { openMenuOnMount } = props;\n    const editColumnsModel = useEditColumns().model;\n    const styles = useMemo(() => getColumnSelectorStyles(), []);\n    const model = useModel();\n    const labels = model.getLabels();\n    const ref = React.useRef<SelectInstance>(null);\n    const [defaultOptions, setDefaultOptions] = React.useState<IColumn[]>([]);\n    const [inputValue, setInputValue] = React.useState<string>('');\n\n    const onChange = (columns: IColumn[]) => {\n        editColumnsModel.addColumn(columns[columns.length - 1]);\n        setDefaultOptions([...defaultOptions]);\n        setTimeout(() => {\n            ref.current?.focusInput();\n        }, 0);\n    }\n\n    const onInputChange = (value: string, actionMeta: InputActionMeta) => {\n        switch (actionMeta.action) {\n            case 'menu-close':\n            case 'input-blur':\n            case 'set-value': {\n                value = actionMeta.prevInputValue;\n                break;\n            }\n        }\n        setInputValue(value);\n        return value;\n    }\n\n    useEffect(() => {\n        if (openMenuOnMount) {\n            ref.current?.focus();\n            ref.current?.openMenu('first');\n        }\n        (async () => {\n            const options = await editColumnsModel.getAvailableColumns();\n            //forces refresh of defaultOptions\n            setDefaultOptions(options);\n        })();\n    }, []);\n\n\n    return <Selector<true> context=\"columnSelector\" onOverrideComponentProps={(props) => {\n        return {\n            ...props,\n            ref: ref,\n            isMulti: true,\n            inputValue: inputValue,\n            className: styles.root,\n            backspaceRemovesValue: false,\n            value: editColumnsModel.getColumns().filter(col => !col.isHidden),\n            closeMenuOnSelect: false,\n            hideSelectedOptions: true,\n            defaultOptions: defaultOptions,\n            placeholder: `${labels[\"add-column\"]()}...`,\n            controlShouldRenderValue: false,\n            onInputChange: onInputChange,\n            getOptionValue: (column) => Attribute.GetNameFromAlias(column.name),\n            onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),\n            loadOptions: (inputValue: string) => editColumnsModel.getAvailableColumns(inputValue),\n            onChange: (columns) => onChange(columns as IColumn[]),\n        }\n    }} />\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/DatasetControl/EditColumns/CommandBar/CommandBar.d.ts

@@ -0,0 +1,2 @@
+import { ICommandBarProps } from "@talxis/react-components";
+export declare const CommandBar: (props: ICommandBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/CommandBar/CommandBar.js

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { CommandBar as CommandBar$1 } from '@talxis/react-components';
+
+const CommandBar = (props) => {
+    const { items = [], farItems = [] } = props;
+    if (items.length === 0 && farItems.length === 0) {
+        return jsx(Fragment, {});
+    }
+    else {
+        return jsx(CommandBar$1, { ...props });
+    }
+};
+
+export { CommandBar };
+//# sourceMappingURL=CommandBar.js.map

package/dist/components/DatasetControl/EditColumns/CommandBar/CommandBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandBar.js","sources":["../../../../../src/components/DatasetControl/EditColumns/CommandBar/CommandBar.tsx"],"sourcesContent":["import { CommandBar as BaseCommandBar, ICommandBarProps} from \"@talxis/react-components\";\n\nexport const CommandBar = (props: ICommandBarProps) => {\n    const {items = [], farItems = []} = props;\n    if(items.length === 0 && farItems.length === 0) {\n        return <></>\n    }\n    else {\n        return <BaseCommandBar {...props} />\n    }\n}"],"names":["_jsx","BaseCommandBar"],"mappings":";;;AAEa,MAAA,UAAU,GAAG,CAAC,KAAuB,KAAI;IAClD,MAAM,EAAC,KAAK,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAC,GAAG,KAAK,CAAC;IAC1C,IAAG,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5C,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;AACI,SAAA;AACD,QAAA,OAAOA,GAAC,CAAAC,YAAc,EAAK,EAAA,GAAA,KAAK,GAAI,CAAA;AACvC,KAAA;AACL;;;;"}

package/dist/components/DatasetControl/EditColumns/EditColumns.d.ts

@@ -1,5 +1,18 @@
-interface IEditColumnsProps {
+import { IPanelProps } from "@fluentui/react";
+import { IEditColumns } from "../../../utils/dataset-control/EditColumns";
+import { IComponents } from "./components";
+import { IColumn } from "@talxis/client-libraries";
+export interface IEditColumnsRef {
+    remountColumnSelector: () => void;
+    editColumnsModel: IEditColumns;
+}
+export interface IEditColumnsProps {
     onDismiss: () => void;
+    isLoading?: boolean;
+    showScopeSelector?: boolean;
+    components?: Partial<IComponents>;
+    panelProps?: IPanelProps;
+    onGetRef?: (ref: IEditColumnsRef) => void;
+    onFilterVisibleColumns?: (columns: IColumn[]) => IColumn[];
 }
 export declare const EditColumns: (props: IEditColumnsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DatasetControl/EditColumns/EditColumns.js

@@ -1,17 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useTheme, Panel, PrimaryButton, DefaultButton, Label } from '@fluentui/react';
+import { useTheme, Panel, PrimaryButton, DefaultButton, Overlay, Label } from '@fluentui/react';
 import { useModel } from '../useModel.js';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState, useEffect } from 'react';
 import { getEditColumnsStyles } from './styles.js';
 import { useSensor, PointerSensor, DndContext } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { SortableItem } from './SortableItem/SortableItem.js';
-import { useRerender } from '@talxis/react-components';
+import { useRerender, Spinner } from '@talxis/react-components';
 import { ColumnSelector } from './ColumnSelector/ColumnSelector.js';
 import { useShouldRemount } from '../../../hooks/useShouldRemount.js';
 import { ScopeSelector } from './ScopeSelector/ScopeSelector.js';
 import { EditColumnsContext } from './useEditColumns.js';
+import { components } from './components.js';
 import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
 
 const EditColumns = (props) => {
@@ -23,11 +24,14 @@ const EditColumns = (props) => {
     const labels = model.getLabels();
     const styles = useMemo(() => getEditColumnsStyles(theme), []);
     const editColumnsModel = useMemo(() => datasetControl.editColumns, []);
-    const columns = editColumnsModel.getColumns();
+    const columns = props.onFilterVisibleColumns?.(editColumnsModel.getColumns()) ?? editColumnsModel.getColumns();
     const sensor = useSensor(PointerSensor);
     const scrollableContainerRef = useRef(null);
+    const { isLoading, showScopeSelector = true } = props;
     const [shouldRemountColumnSelector, remountColumnSelector] = useShouldRemount();
     const [openColumnSelectorOnMount, setOpenColumnSelectorOnMount] = useState(false);
+    //TODO: unify via hook?
+    const components$1 = { ...components, ...props.components };
     const rerender = useRerender();
     useEventEmitter(editColumnsModel, 'onColumnsChanged', rerender);
     useEventEmitter(editColumnsModel, 'onRelatedEntityColumnChanged', () => {
@@ -35,6 +39,12 @@ const EditColumns = (props) => {
         setOpenColumnSelectorOnMount(true);
     });
     useEventEmitter(editColumnsModel, 'onColumnAdded', () => scrollableContainerRef.current?.scrollTo({ top: 0 }));
+    useEffect(() => {
+        props.onGetRef?.({
+            remountColumnSelector,
+            editColumnsModel
+        });
+    }, []);
     const getTitle = () => {
         const collectionName = provider.getMetadata().DisplayCollectionName;
         let title = labels["edit-columns"]();
@@ -46,7 +56,7 @@ const EditColumns = (props) => {
     const onDismiss = (ev) => {
         return ev?.key === 'Escape' ? ev?.preventDefault() : props.onDismiss();
     };
-    return jsx(EditColumnsContext.Provider, { value: editColumnsModel, children: jsxs(Panel, { headerText: getTitle(), isOpen: true, onDismiss: onDismiss, styles: {
+    return jsx(EditColumnsContext.Provider, { value: { model: editColumnsModel, components: components$1 }, children: jsxs(Panel, { headerText: getTitle(), isOpen: true, onDismiss: onDismiss, styles: {
                 footer: styles.panelFooter,
                 commands: styles.panelCommands,
                 scrollableContent: styles.panelScrollableContent,
@@ -56,8 +66,7 @@ const EditColumns = (props) => {
                                 editColumnsModel.save();
                                 props.onDismiss();
                             }, text: labels['save'](), disabled: columns.filter(col => !col.isHidden).length === 0 }), jsx(DefaultButton, { text: labels['cancel'](), onClick: props.onDismiss })] });
-            }, children: [jsx("div", { className: styles.header, children: jsxs("div", { className: styles.selectors, children: [jsxs("div", { className: styles.selector, children: [jsx(Label, { children: labels["column-source"]() }), jsx(ScopeSelector, {})] }), !shouldRemountColumnSelector &&
-                                jsx("div", { className: styles.selector, children: jsx(ColumnSelector, { openMenuOnMount: openColumnSelectorOnMount }) })] }) }), jsx("div", { ref: scrollableContainerRef, className: styles.scrollableContainer, children: jsx(DndContext, { sensors: [sensor], onDragEnd: (e) => editColumnsModel.onColumnMoved(e.active.id.toString(), e.over?.id.toString() ?? ''), modifiers: [restrictToVerticalAxis], children: jsx(SortableContext, { strategy: verticalListSortingStrategy, items: editColumnsModel.getColumns(), children: jsx("div", { className: styles.sortableItemsWrapper, children: columns.filter(col => !col.isHidden).map(col => {
+            }, ...props.panelProps, children: [isLoading && jsx(Overlay, { className: styles.loadingOverlay, children: jsx(Spinner, {}) }), jsxs("div", { className: styles.header, children: [jsx(components$1.CommandBar, { items: [] }), jsxs("div", { className: styles.selectors, children: [showScopeSelector && (jsxs("div", { className: styles.selector, children: [jsx(Label, { children: labels["column-source"]() }), jsx(ScopeSelector, {})] })), jsx("div", { style: { height: 38 }, className: styles.selector, children: !shouldRemountColumnSelector && jsx(ColumnSelector, { openMenuOnMount: openColumnSelectorOnMount }) })] })] }), jsx("div", { ref: scrollableContainerRef, className: styles.scrollableContainer, children: jsx(DndContext, { sensors: [sensor], onDragEnd: (e) => editColumnsModel.moveColumn(e.active.id.toString(), e.over?.id.toString() ?? ''), modifiers: [restrictToVerticalAxis], children: jsx(SortableContext, { strategy: verticalListSortingStrategy, items: editColumnsModel.getColumns(), children: jsx("div", { className: styles.sortableItemsWrapper, children: columns.filter(col => !col.isHidden).map(col => {
                                     return jsx(SortableItem, { column: col }, col.name);
                                 }) }) }) }) })] }) });
 };

package/dist/components/DatasetControl/EditColumns/EditColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditColumns.js","sources":["../../../../src/components/DatasetControl/EditColumns/EditColumns.tsx"],"sourcesContent":["import { DefaultButton, Label, Panel, PanelType, PrimaryButton, useTheme } from \"@fluentui/react\";\nimport { useModel } from \"../useModel\";\nimport { Key, useMemo, useRef, useState } from \"react\";\nimport { getEditColumnsStyles } from \"./styles\";\nimport { DndContext, PointerSensor, useSensor } from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport { SortableContext, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { SortableItem } from \"./SortableItem/SortableItem\";\nimport { useEventEmitter } from \"../../../hooks\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { ColumnSelector } from \"./ColumnSelector/ColumnSelector\";\nimport { useShouldRemount } from \"../../../hooks/useShouldRemount\";\nimport { ScopeSelector } from \"./ScopeSelector/ScopeSelector\";\nimport { IEditColumnsEvents } from \"../../../utils/dataset-control/EditColumns\";\nimport { EditColumnsContext } from \"./useEditColumns\";\n\ninterface IEditColumnsProps {\n    onDismiss: () => void;\n}\n\nexport const EditColumns = (props: IEditColumnsProps) => {\n    const model = useModel();\n    const datasetControl = model.getDatasetControl();\n    const dataset = datasetControl.getDataset();\n    const provider = dataset.getDataProvider();\n    const theme = useTheme();\n    const labels = model.getLabels();\n    const styles = useMemo(() => getEditColumnsStyles(theme), []);\n    const editColumnsModel = useMemo(() => datasetControl.editColumns, []);\n    const columns = editColumnsModel.getColumns();\n    const sensor = useSensor(PointerSensor);\n    const scrollableContainerRef = useRef<HTMLDivElement>(null);\n    const [shouldRemountColumnSelector, remountColumnSelector] = useShouldRemount();\n    const [openColumnSelectorOnMount, setOpenColumnSelectorOnMount] = useState(false);\n    const rerender = useRerender();\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onColumnsChanged', rerender);\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onRelatedEntityColumnChanged', () => {\n        remountColumnSelector();\n        setOpenColumnSelectorOnMount(true);\n    });\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onColumnAdded', () => scrollableContainerRef.current?.scrollTo({ top: 0 }));\n\n    const getTitle = () => {\n        const collectionName = provider.getMetadata().DisplayCollectionName;\n        let title = labels[\"edit-columns\"]();\n        if (collectionName) {\n            title += `: ${collectionName}`;\n        }\n        return title;\n    }\n\n    const onDismiss = (ev?: React.SyntheticEvent<HTMLElement, Event> | KeyboardEvent | undefined) => {\n        return (ev as KeyboardEvent)?.key === 'Escape' ? ev?.preventDefault() : props.onDismiss();\n    };\n\n    return <EditColumnsContext.Provider value={editColumnsModel}>\n        <Panel\n            headerText={getTitle()}\n            isOpen={true}\n            onDismiss={onDismiss}\n            styles={{\n                footer: styles.panelFooter,\n                commands: styles.panelCommands,\n                scrollableContent: styles.panelScrollableContent,\n                content: styles.panelContent\n            }}\n            isFooterAtBottom\n            onRenderFooterContent={() => {\n                return <div className={styles.panelFooterButtons}>\n                    <PrimaryButton\n                        onClick={() => {\n                            editColumnsModel.save();\n                            props.onDismiss();\n                        }}\n                        text={labels['save']()}\n                        disabled={columns.filter(col => !col.isHidden).length === 0}\n                    />\n                    <DefaultButton\n                        text={labels['cancel']()}\n                        onClick={props.onDismiss}\n                    />\n                </div>\n            }}\n        >\n            <div className={styles.header}>\n                <div className={styles.selectors}>\n                    <div className={styles.selector}>\n                        <Label>{labels[\"column-source\"]()}</Label>\n                        <ScopeSelector />\n                    </div>\n                    {!shouldRemountColumnSelector &&\n                        <div className={styles.selector}>\n                            <ColumnSelector \n                                openMenuOnMount={openColumnSelectorOnMount} />\n                        </div>\n                    }\n                </div>\n            </div>\n            <div ref={scrollableContainerRef} className={styles.scrollableContainer}>\n                <DndContext\n                    sensors={[sensor]}\n                    onDragEnd={(e) => editColumnsModel.onColumnMoved(e.active.id.toString(), e.over?.id.toString() ?? '')}\n                    modifiers={[restrictToVerticalAxis]}\n                >\n                    <SortableContext\n                        strategy={verticalListSortingStrategy}\n                        items={editColumnsModel.getColumns()}>\n                        <div className={styles.sortableItemsWrapper}>\n                            {columns.filter(col => !col.isHidden).map(col => {\n                                return <SortableItem key={col.name} column={col} />\n                            })}\n                        </div>\n                    </SortableContext>\n                </DndContext>\n            </div>\n        </Panel>\n    </EditColumnsContext.Provider>\n}\n\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"EditColumns.js","sources":["../../../../src/components/DatasetControl/EditColumns/EditColumns.tsx"],"sourcesContent":["import { DefaultButton, IPanelProps, Label, Overlay, Panel, PrimaryButton, useTheme } from \"@fluentui/react\";\nimport { useModel } from \"../useModel\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { getEditColumnsStyles } from \"./styles\";\nimport { DndContext, PointerSensor, useSensor } from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport { SortableContext, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { SortableItem } from \"./SortableItem/SortableItem\";\nimport { useEventEmitter } from \"../../../hooks\";\nimport { useRerender, Spinner } from \"@talxis/react-components\";\nimport { ColumnSelector } from \"./ColumnSelector/ColumnSelector\";\nimport { useShouldRemount } from \"../../../hooks/useShouldRemount\";\nimport { ScopeSelector } from \"./ScopeSelector/ScopeSelector\";\nimport { IEditColumns, IEditColumnsEvents } from \"../../../utils/dataset-control/EditColumns\";\nimport { EditColumnsContext } from \"./useEditColumns\";\nimport { IComponents } from \"./components\";\nimport { components as defaultComponents } from \"./components\";\nimport { IColumn } from \"@talxis/client-libraries\";\n\nexport interface IEditColumnsRef {\n    remountColumnSelector: () => void;\n    editColumnsModel: IEditColumns;\n}\n\nexport interface IEditColumnsProps {\n    onDismiss: () => void;\n    isLoading?: boolean;\n    showScopeSelector?: boolean;\n    components?: Partial<IComponents>;\n    panelProps?: IPanelProps;\n    onGetRef?: (ref: IEditColumnsRef) => void;\n    onFilterVisibleColumns?: (columns: IColumn[]) => IColumn[];\n}\n\n\nexport const EditColumns = (props: IEditColumnsProps) => {\n    const model = useModel();\n    const datasetControl = model.getDatasetControl();\n    const dataset = datasetControl.getDataset();\n    const provider = dataset.getDataProvider();\n    const theme = useTheme();\n    const labels = model.getLabels();\n    const styles = useMemo(() => getEditColumnsStyles(theme), []);\n    const editColumnsModel = useMemo(() => datasetControl.editColumns, []);\n    const columns = props.onFilterVisibleColumns?.(editColumnsModel.getColumns()) ?? editColumnsModel.getColumns();\n    const sensor = useSensor(PointerSensor);\n    const scrollableContainerRef = useRef<HTMLDivElement>(null);\n    const { isLoading, showScopeSelector = true } = props;\n    const [shouldRemountColumnSelector, remountColumnSelector] = useShouldRemount();\n    const [openColumnSelectorOnMount, setOpenColumnSelectorOnMount] = useState(false);\n    //TODO: unify via hook?\n    const components = { ...defaultComponents, ...props.components };\n    const rerender = useRerender();\n\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onColumnsChanged', rerender);\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onRelatedEntityColumnChanged', () => {\n        remountColumnSelector();\n        setOpenColumnSelectorOnMount(true);\n    });\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onColumnAdded', () => scrollableContainerRef.current?.scrollTo({ top: 0 }));\n\n    useEffect(() => {\n        props.onGetRef?.({\n            remountColumnSelector,\n            editColumnsModel\n        })\n    }, []);\n\n    const getTitle = () => {\n        const collectionName = provider.getMetadata().DisplayCollectionName;\n        let title = labels[\"edit-columns\"]();\n        if (collectionName) {\n            title += `: ${collectionName}`;\n        }\n        return title;\n    }\n\n    const onDismiss = (ev?: React.SyntheticEvent<HTMLElement, Event> | KeyboardEvent | undefined) => {\n        return (ev as KeyboardEvent)?.key === 'Escape' ? ev?.preventDefault() : props.onDismiss();\n    };\n\n    return <EditColumnsContext.Provider value={{ model: editColumnsModel, components }}>\n        <Panel\n            headerText={getTitle()}\n            isOpen={true}\n            onDismiss={onDismiss}\n            styles={{\n                footer: styles.panelFooter,\n                commands: styles.panelCommands,\n                scrollableContent: styles.panelScrollableContent,\n                content: styles.panelContent\n            }}\n            isFooterAtBottom\n            onRenderFooterContent={() => {\n                return <div className={styles.panelFooterButtons}>\n                    <PrimaryButton\n                        onClick={() => {\n                            editColumnsModel.save();\n                            props.onDismiss();\n                        }}\n                        text={labels['save']()}\n                        disabled={columns.filter(col => !col.isHidden).length === 0}\n                    />\n                    <DefaultButton\n                        text={labels['cancel']()}\n                        onClick={props.onDismiss}\n                    />\n                </div>\n            }}\n            {...props.panelProps}\n        >\n            {isLoading && <Overlay className={styles.loadingOverlay}>\n                <Spinner />\n            </Overlay>}\n            <div className={styles.header}>\n                <components.CommandBar items={[]} />\n                <div className={styles.selectors}>\n                    {showScopeSelector && (\n                        <div className={styles.selector}>\n                            <Label>{labels[\"column-source\"]()}</Label>\n                            <ScopeSelector />\n                        </div>\n                    )}\n                    <div style={{height: 38}} className={styles.selector}>\n                        {!shouldRemountColumnSelector && <ColumnSelector\n                            openMenuOnMount={openColumnSelectorOnMount} />}\n                    </div>\n                </div>\n            </div>\n            <div ref={scrollableContainerRef} className={styles.scrollableContainer}>\n                <DndContext\n                    sensors={[sensor]}\n                    onDragEnd={(e) => editColumnsModel.moveColumn(e.active.id.toString(), e.over?.id.toString() ?? '')}\n                    modifiers={[restrictToVerticalAxis]}\n                >\n                    <SortableContext\n                        strategy={verticalListSortingStrategy}\n                        items={editColumnsModel.getColumns()}>\n                        <div className={styles.sortableItemsWrapper}>\n                            {columns.filter(col => !col.isHidden).map(col => {\n                                return <SortableItem key={col.name} column={col} />\n                            })}\n                        </div>\n                    </SortableContext>\n                </DndContext>\n            </div>\n        </Panel>\n    </EditColumnsContext.Provider>\n}\n\n"],"names":["components","defaultComponents","_jsx","_jsxs"],"mappings":"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"}

package/dist/components/DatasetControl/EditColumns/OptionCommandBar/OptionCommandBar.d.ts

@@ -0,0 +1,2 @@
+import { IOptionCommandBarProps } from "../components";
+export declare const OptionCommandBar: (props: IOptionCommandBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/OptionCommandBar/OptionCommandBar.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { CommandBar } from '../CommandBar/CommandBar.js';
+
+const OptionCommandBar = (props) => {
+    const { context, ...rest } = props;
+    return jsx(CommandBar, { ...rest });
+};
+
+export { OptionCommandBar };
+//# sourceMappingURL=OptionCommandBar.js.map

package/dist/components/DatasetControl/EditColumns/OptionCommandBar/OptionCommandBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCommandBar.js","sources":["../../../../../src/components/DatasetControl/EditColumns/OptionCommandBar/OptionCommandBar.tsx"],"sourcesContent":["import { CommandBar } from \"../CommandBar/CommandBar\";\nimport { IOptionCommandBarProps } from \"../components\";\n\nexport const OptionCommandBar = (props: IOptionCommandBarProps) => {\n    const { context, ...rest } = props;\n    return <CommandBar {...rest} />\n}"],"names":["_jsx"],"mappings":";;;AAGa,MAAA,gBAAgB,GAAG,CAAC,KAA6B,KAAI;IAC9D,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;AACnC,IAAA,OAAOA,GAAC,CAAA,UAAU,EAAK,EAAA,GAAA,IAAI,GAAI,CAAA;AACnC;;;;"}

package/dist/components/DatasetControl/EditColumns/OptionText/OptionText.d.ts

@@ -0,0 +1,3 @@
+import { IColumn } from "@talxis/client-libraries";
+import { GroupBase, OptionProps } from "react-select";
+export declare const OptionText: (props: React.PropsWithChildren<OptionProps<IColumn, boolean, GroupBase<IColumn>>>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/OptionText/OptionText.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getOptionTextStyles } from './styles.js';
+import { Text } from '@fluentui/react';
+
+const OptionText = (props) => {
+    const styles = useMemo(() => getOptionTextStyles(), []);
+    return jsx(Text, { className: styles.optionText, children: props.children });
+};
+
+export { OptionText };
+//# sourceMappingURL=OptionText.js.map

package/dist/components/DatasetControl/EditColumns/OptionText/OptionText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionText.js","sources":["../../../../../src/components/DatasetControl/EditColumns/OptionText/OptionText.tsx"],"sourcesContent":["import { IColumn } from \"@talxis/client-libraries\";\nimport { useMemo } from \"react\";\nimport { GroupBase, OptionProps } from \"react-select\";\nimport { getOptionTextStyles } from \"./styles\";\nimport { Text } from \"@fluentui/react\";\n\nexport const OptionText = (props: React.PropsWithChildren<OptionProps<IColumn, boolean, GroupBase<IColumn>>>) => {\n    const styles = useMemo(() => getOptionTextStyles(), []);\n    \n    return <Text className={styles.optionText}>{props.children}</Text>\n}"],"names":["_jsx"],"mappings":";;;;;AAMa,MAAA,UAAU,GAAG,CAAC,KAAiF,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,mBAAmB,EAAE,EAAE,EAAE,CAAC,CAAC;AAExD,IAAA,OAAOA,GAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAG,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAQ,CAAA;AACtE;;;;"}

package/dist/components/DatasetControl/EditColumns/OptionText/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const getOptionTextStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    optionText: {
+        flexGrow: number;
+        gap: number;
+    };
+}>;

package/dist/components/DatasetControl/EditColumns/OptionText/styles.js

@@ -0,0 +1,13 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getOptionTextStyles = () => {
+    return mergeStyleSets({
+        optionText: {
+            flexGrow: 1,
+            gap: 10
+        }
+    });
+};
+
+export { getOptionTextStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DatasetControl/EditColumns/OptionText/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/DatasetControl/EditColumns/OptionText/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getOptionTextStyles = () => {\n    return mergeStyleSets({\n        optionText: {\n            flexGrow: 1,\n            gap: 10\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,mBAAmB,GAAG,MAAK;AACpC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,UAAU,EAAE;AACR,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.js

@@ -5,7 +5,7 @@ import { useState, useEffect } from 'react';
 import { useModel } from '../../useModel.js';
 
 const ScopeSelector = () => {
-    const editColumnsModel = useEditColumns();
+    const editColumnsModel = useEditColumns().model;
     const [isDisabled, setIsDisabled] = useState(true);
     const labels = useModel().getLabels();
     const getOptionLabel = (column) => {
@@ -18,7 +18,7 @@ const ScopeSelector = () => {
             setIsDisabled(options.length === 1);
         })();
     }, []);
-    return jsx(Selector, { onOverrideComponentProps: (props) => {
+    return jsx(Selector, { context: "scopeSelector", onOverrideComponentProps: (props) => {
             return {
                 ...props,
                 isMulti: false,

package/dist/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScopeSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.tsx"],"sourcesContent":["import { IAvailableRelatedColumn } from \"@talxis/client-libraries\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { useEffect, useState } from \"react\";\nimport { useModel } from \"../../useModel\";\n\n\nexport const ScopeSelector = () => {\n    const editColumnsModel = useEditColumns();\n    const [isDisabled, setIsDisabled] = useState(true);\n    const labels = useModel().getLabels();\n\n    const getOptionLabel = (column: IAvailableRelatedColumn): string => {\n        const relatedEntityDisplayName = column.relatedEntityDisplayName;\n        return relatedEntityDisplayName ? `${column.displayName} (${relatedEntityDisplayName})` : column.displayName ?? labels['no-name']();\n    }\n\n    useEffect(() => {\n        (async () => {\n            const options = await editColumnsModel.getAvailableRelatedColumns();\n            setIsDisabled(options.length === 1);\n        })();\n    }, []);\n\n    return <Selector<false, IAvailableRelatedColumn> onOverrideComponentProps={(props) => {\n        return {\n            ...props,\n            isMulti: false,\n            isDisabled: isDisabled,\n            defaultValue: editColumnsModel.getMainEntityColumn(),\n            getOptionValue: (column) => `${column.relatedEntityPrimaryIdAttribute}_${column.name}`,\n            getOptionLabel: (column) => getOptionLabel(column),\n            loadOptions: (inputValue: string) => editColumnsModel.getAvailableRelatedColumns(inputValue),\n            onChange: (column) => editColumnsModel.selectRelatedEntityColumn(column!),\n        }\n    }} />\n}"],"names":["_jsx"],"mappings":";;;;;;AAOO,MAAM,aAAa,GAAG,MAAK;AAC9B,IAAA,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnD,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;AAEtC,IAAA,MAAM,cAAc,GAAG,CAAC,MAA+B,KAAY;AAC/D,QAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,wBAAwB,CAAC;QACjE,OAAO,wBAAwB,GAAG,GAAG,MAAM,CAAC,WAAW,CAAA,EAAA,EAAK,wBAAwB,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;AACxI,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,CAAC,YAAW;AACR,YAAA,MAAM,OAAO,GAAG,MAAM,gBAAgB,CAAC,0BAA0B,EAAE,CAAC;AACpE,YAAA,aAAa,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;SACvC,GAAG,CAAC;KACR,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOA,GAAA,CAAC,QAAQ,EAAiC,EAAA,wBAAwB,EAAE,CAAC,KAAK,KAAI;YACjF,OAAO;AACH,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,UAAU,EAAE,UAAU;AACtB,gBAAA,YAAY,EAAE,gBAAgB,CAAC,mBAAmB,EAAE;AACpD,gBAAA,cAAc,EAAE,CAAC,MAAM,KAAK,CAAA,EAAG,MAAM,CAAC,+BAA+B,CAAA,CAAA,EAAI,MAAM,CAAC,IAAI,CAAE,CAAA;gBACtF,cAAc,EAAE,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC;gBAClD,WAAW,EAAE,CAAC,UAAkB,KAAK,gBAAgB,CAAC,0BAA0B,CAAC,UAAU,CAAC;gBAC5F,QAAQ,EAAE,CAAC,MAAM,KAAK,gBAAgB,CAAC,yBAAyB,CAAC,MAAO,CAAC;aAC5E,CAAA;AACL,SAAC,GAAI,CAAA;AACT;;;;"}
+{"version":3,"file":"ScopeSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.tsx"],"sourcesContent":["import { IAvailableRelatedColumn } from \"@talxis/client-libraries\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { useEffect, useState } from \"react\";\nimport { useModel } from \"../../useModel\";\n\n\nexport const ScopeSelector = () => {\n    const editColumnsModel = useEditColumns().model;\n    const [isDisabled, setIsDisabled] = useState(true);\n    const labels = useModel().getLabels();\n\n    const getOptionLabel = (column: IAvailableRelatedColumn): string => {\n        const relatedEntityDisplayName = column.relatedEntityDisplayName;\n        return relatedEntityDisplayName ? `${column.displayName} (${relatedEntityDisplayName})` : column.displayName ?? labels['no-name']();\n    }\n\n    useEffect(() => {\n        (async () => {\n            const options = await editColumnsModel.getAvailableRelatedColumns();\n            setIsDisabled(options.length === 1);\n        })();\n    }, []);\n\n    return <Selector<false, IAvailableRelatedColumn> context=\"scopeSelector\" onOverrideComponentProps={(props) => {\n        return {\n            ...props,\n            isMulti: false,\n            isDisabled: isDisabled,\n            defaultValue: editColumnsModel.getMainEntityColumn(),\n            getOptionValue: (column) => `${column.relatedEntityPrimaryIdAttribute}_${column.name}`,\n            getOptionLabel: (column) => getOptionLabel(column),\n            loadOptions: (inputValue: string) => editColumnsModel.getAvailableRelatedColumns(inputValue),\n            onChange: (column) => editColumnsModel.selectRelatedEntityColumn(column!),\n        }\n    }} />\n}"],"names":["_jsx"],"mappings":";;;;;;AAOO,MAAM,aAAa,GAAG,MAAK;AAC9B,IAAA,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAC,KAAK,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnD,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;AAEtC,IAAA,MAAM,cAAc,GAAG,CAAC,MAA+B,KAAY;AAC/D,QAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,wBAAwB,CAAC;QACjE,OAAO,wBAAwB,GAAG,GAAG,MAAM,CAAC,WAAW,CAAA,EAAA,EAAK,wBAAwB,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;AACxI,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,CAAC,YAAW;AACR,YAAA,MAAM,OAAO,GAAG,MAAM,gBAAgB,CAAC,0BAA0B,EAAE,CAAC;AACpE,YAAA,aAAa,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;SACvC,GAAG,CAAC;KACR,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAOA,GAAC,CAAA,QAAQ,EAAiC,EAAA,OAAO,EAAC,eAAe,EAAC,wBAAwB,EAAE,CAAC,KAAK,KAAI;YACzG,OAAO;AACH,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,UAAU,EAAE,UAAU;AACtB,gBAAA,YAAY,EAAE,gBAAgB,CAAC,mBAAmB,EAAE;AACpD,gBAAA,cAAc,EAAE,CAAC,MAAM,KAAK,CAAA,EAAG,MAAM,CAAC,+BAA+B,CAAA,CAAA,EAAI,MAAM,CAAC,IAAI,CAAE,CAAA;gBACtF,cAAc,EAAE,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC;gBAClD,WAAW,EAAE,CAAC,UAAkB,KAAK,gBAAgB,CAAC,0BAA0B,CAAC,UAAU,CAAC;gBAC5F,QAAQ,EAAE,CAAC,MAAM,KAAK,gBAAgB,CAAC,yBAAyB,CAAC,MAAO,CAAC;aAC5E,CAAA;AACL,SAAC,GAAI,CAAA;AACT;;;;"}

package/dist/components/DatasetControl/EditColumns/Selector/Selector.d.ts

@@ -3,6 +3,7 @@ import { GroupBase } from 'react-select';
 import { AsyncProps } from 'react-select/dist/declarations/src/useAsync';
 type ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;
 interface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {
+    context: 'scopeSelector' | 'columnSelector';
     onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>;
 }
 export declare const Selector: <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/Selector/Selector.js

@@ -1,16 +1,25 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DatasetConstants } from '@talxis/client-libraries';
 import { useTheme, Callout, DirectionalHint, TooltipHost } from '@fluentui/react';
 import AsyncSelect from 'react-select/async';
 import { useModel } from '../../useModel.js';
 import { components } from 'react-select';
 import React, { useMemo } from 'react';
+import { getSelectorStyles } from './styles.js';
+import { useEditColumns } from '../useEditColumns.js';
 
 const Selector = (props) => {
     const theme = useTheme();
     const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);
     const labels = useModel().getLabels();
     const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);
+    const styles = useMemo(() => getSelectorStyles(), []);
+    const { components: editColumnsComponents } = useEditColumns();
+    const { context } = props;
     const MemoizedMenu = useMemo(() => React.memo((props) => (jsx(Callout, { directionalHint: DirectionalHint.leftTopEdge, target: `#${id}`, children: jsx(components.Menu, { ...props }) }))), [id]);
+    const getTooltipContent = (columnName) => {
+        return columnName.endsWith(DatasetConstants.CUSTOM_COLUMN_NAME_SUFFIX) ? 'user_column' : columnName;
+    };
     const componentProps = onOverrideComponentProps({
         id: id,
         getOptionValue: (column) => column.name,
@@ -31,6 +40,12 @@ const Selector = (props) => {
                 return {
                     width: 300
                 };
+            },
+            menuList: (base) => {
+                return {
+                    ...base,
+                    scrollbarWidth: 'thin'
+                };
             }
         },
         theme: (base) => {
@@ -46,7 +61,7 @@ const Selector = (props) => {
             };
         },
         components: {
-            Option: (props) => jsx(components.Option, { ...props, children: jsx(TooltipHost, { content: props.data.name, children: jsx("div", { style: { padding: '8px 12px' }, children: props.children }) }) }),
+            Option: (props) => jsx(components.Option, { ...props, children: jsx(TooltipHost, { content: getTooltipContent(props.data.name), children: jsxs("div", { className: styles.optionContainer, children: [jsx(editColumnsComponents.OptionText, { ...props }), jsx(editColumnsComponents.OptionCommandBar, { items: [], context: context, column: props.data })] }) }) }),
             Menu: MemoizedMenu
         }
     });

package/dist/components/DatasetControl/EditColumns/Selector/Selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/Selector/Selector.tsx"],"sourcesContent":["import { Attribute, IColumn } from \"@talxis/client-libraries\";\nimport { GroupBase, MenuProps } from 'react-select';\nimport { Callout, DirectionalHint, TooltipHost, useTheme } from \"@fluentui/react\";\nimport AsyncSelect from 'react-select/async';\nimport { AsyncProps } from 'react-select/dist/declarations/src/useAsync';\nimport { useModel } from \"../../useModel\";\nimport { components } from 'react-select';\nimport { useMemo } from \"react\";\nimport React from \"react\";\n\ntype ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;\n\ninterface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {\n    onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>\n}\n\nexport const Selector = <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => {\n    const theme = useTheme();\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);\n    const labels = useModel().getLabels();\n    const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);\n\n    const MemoizedMenu = useMemo(() =>\n        React.memo((props: any) => (\n            <Callout\n                directionalHint={DirectionalHint.leftTopEdge}\n                target={`#${id}`}>\n                <components.Menu {...props} />\n            </Callout>\n        )),\n        [id]);\n\n    const componentProps = onOverrideComponentProps({\n        id: id,\n        getOptionValue: (column) => column.name,\n        getOptionLabel: (column) => column.displayName ?? labels['no-name'](),\n        noOptionsMessage: () => labels['no-result-found'](),\n        maxMenuHeight: 600,\n        isClearable: false,\n        defaultOptions: true,\n        styles: {\n            option: (base) => {\n                return {\n                    ...base,\n                    padding: 0,\n                    cursor: 'pointer',\n                }\n            },\n            menu: () => {\n                return {\n                    width: 300\n                }\n            }\n        },\n        theme: (base: any) => {\n            return {\n                ...base,\n                colors: {\n                    ...base.colors,\n                    primary: theme.palette.themePrimary,\n                    primary75: theme.palette.themeLighterAlt,\n                    primary50: theme.palette.themeLight,\n                    primary25: theme.palette.themeLighter,\n                }\n            }\n        },\n        components: {\n            Option: (props) => <components.Option {...props}>\n                <TooltipHost\n                    content={props.data.name}\n                >\n                    <div style={{ padding: '8px 12px' }}>\n                        {props.children}\n                    </div>\n                </TooltipHost>\n            </components.Option>,\n            Menu: MemoizedMenu\n        }\n    })\n\n    return <AsyncSelect {...componentProps} />\n}"],"names":["_jsx"],"mappings":";;;;;;;AAgBa,MAAA,QAAQ,GAAG,CAAqE,KAAuC,KAAI;AACpI,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9E,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;AACtC,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAY,SAAA,EAAA,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAG,OAAO,CAAC,MACzB,KAAK,CAAC,IAAI,CAAC,CAAC,KAAU,MAClBA,GAAC,CAAA,OAAO,EACJ,EAAA,eAAe,EAAE,eAAe,CAAC,WAAW,EAC5C,MAAM,EAAE,CAAA,CAAA,EAAI,EAAE,CAAE,CAAA,EAAA,QAAA,EAChBA,GAAC,CAAA,UAAU,CAAC,IAAI,OAAK,KAAK,EAAA,CAAI,GACxB,CACb,CAAC,EACF,CAAC,EAAE,CAAC,CAAC,CAAC;IAEV,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,EAAE,EAAE,EAAE;QACN,cAAc,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI;AACvC,QAAA,cAAc,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QACrE,gBAAgB,EAAE,MAAM,MAAM,CAAC,iBAAiB,CAAC,EAAE;AACnD,QAAA,aAAa,EAAE,GAAG;AAClB,QAAA,WAAW,EAAE,KAAK;AAClB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,CAAC,IAAI,KAAI;gBACb,OAAO;AACH,oBAAA,GAAG,IAAI;AACP,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,MAAM,EAAE,SAAS;iBACpB,CAAA;aACJ;YACD,IAAI,EAAE,MAAK;gBACP,OAAO;AACH,oBAAA,KAAK,EAAE,GAAG;iBACb,CAAA;aACJ;AACJ,SAAA;AACD,QAAA,KAAK,EAAE,CAAC,IAAS,KAAI;YACjB,OAAO;AACH,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE;oBACJ,GAAG,IAAI,CAAC,MAAM;AACd,oBAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACnC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;AACxC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;AACnC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACxC,iBAAA;aACJ,CAAA;SACJ;AACD,QAAA,UAAU,EAAE;AACR,YAAA,MAAM,EAAE,CAAC,KAAK,KAAKA,GAAC,CAAA,UAAU,CAAC,MAAM,OAAK,KAAK,EAAA,QAAA,EAC3CA,IAAC,WAAW,EAAA,EACR,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAA,QAAA,EAExBA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAC9B,QAAA,EAAA,KAAK,CAAC,QAAQ,EAAA,CACb,GACI,EACE,CAAA;AACpB,YAAA,IAAI,EAAE,YAAY;AACrB,SAAA;AACJ,KAAA,CAAC,CAAA;AAEF,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,cAAc,GAAI,CAAA;AAC9C;;;;"}
+{"version":3,"file":"Selector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/Selector/Selector.tsx"],"sourcesContent":["import { DatasetConstants, IColumn } from \"@talxis/client-libraries\";\nimport { GroupBase } from 'react-select';\nimport { Callout, DirectionalHint, TooltipHost, useTheme, Text } from \"@fluentui/react\";\nimport AsyncSelect from 'react-select/async';\nimport { AsyncProps } from 'react-select/dist/declarations/src/useAsync';\nimport { useModel } from \"../../useModel\";\nimport { components } from 'react-select';\nimport { useMemo } from \"react\";\nimport React from \"react\";\nimport { getSelectorStyles } from \"./styles\";\nimport { useEditColumns } from \"../useEditColumns\";\n\ntype ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;\n\ninterface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {\n    context: 'scopeSelector' | 'columnSelector';\n    onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>\n}\n\nexport const Selector = <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => {\n    const theme = useTheme();\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);\n    const labels = useModel().getLabels();\n    const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);\n    const styles = useMemo(() => getSelectorStyles(), []);\n    const { components: editColumnsComponents } = useEditColumns();\n    const { context } = props;\n\n    const MemoizedMenu = useMemo(() =>\n        React.memo((props: any) => (\n            <Callout\n                directionalHint={DirectionalHint.leftTopEdge}\n                target={`#${id}`}>\n                <components.Menu {...props} />\n            </Callout>\n        )),\n        [id]\n    );\n\n    const getTooltipContent = (columnName: string): string => {\n        return columnName.endsWith(DatasetConstants.CUSTOM_COLUMN_NAME_SUFFIX) ? 'user_column' : columnName;\n    }\n\n    const componentProps = onOverrideComponentProps({\n        id: id,\n        getOptionValue: (column) => column.name,\n        getOptionLabel: (column) => column.displayName ?? labels['no-name'](),\n        noOptionsMessage: () => labels['no-result-found'](),\n        maxMenuHeight: 600,\n        isClearable: false,\n        defaultOptions: true,\n        styles: {\n            option: (base) => {\n                return {\n                    ...base,\n                    padding: 0,\n                    cursor: 'pointer',\n                }\n            },\n            menu: () => {\n                return {\n                    width: 300\n                }\n            },\n            menuList: (base) => {\n                return {\n                    ...base,\n                    scrollbarWidth: 'thin'\n                }\n            }\n        },\n        theme: (base: any) => {\n            return {\n                ...base,\n                colors: {\n                    ...base.colors,\n                    primary: theme.palette.themePrimary,\n                    primary75: theme.palette.themeLighterAlt,\n                    primary50: theme.palette.themeLight,\n                    primary25: theme.palette.themeLighter,\n                }\n            }\n        },\n        components: {\n            Option: (props) => <components.Option {...props}>\n                <TooltipHost\n                    content={getTooltipContent(props.data.name)}\n                >\n                    <div className={styles.optionContainer}>\n                        <editColumnsComponents.OptionText {...props as any} />\n                        <editColumnsComponents.OptionCommandBar items={[]} context={context} column={props.data} />\n                    </div>\n                </TooltipHost>\n            </components.Option>,\n            Menu: MemoizedMenu\n\n        }\n    })\n\n    return <AsyncSelect {...componentProps} />\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/DatasetControl/EditColumns/Selector/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const getSelectorStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    optionContainer: {
+        display: string;
+        alignItems: string;
+        padding: string;
+    };
+}>;

package/dist/components/DatasetControl/EditColumns/Selector/styles.js

@@ -0,0 +1,14 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getSelectorStyles = () => {
+    return mergeStyleSets({
+        optionContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 12px'
+        },
+    });
+};
+
+export { getSelectorStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DatasetControl/EditColumns/Selector/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/DatasetControl/EditColumns/Selector/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getSelectorStyles = () => {\n    return mergeStyleSets({\n        optionContainer: {\n            display: 'flex',\n            alignItems: 'center',\n            padding: '8px 12px'\n        },\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB,GAAG,MAAK;AAClC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,eAAe,EAAE;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,OAAO,EAAE,UAAU;AACtB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/DatasetControl/EditColumns/SortableItem/SortableItem.js

@@ -3,29 +3,32 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { getSortableItemStyles } from './styles.js';
 import { useMemo } from 'react';
-import { useTheme, Text, IconButton } from '@fluentui/react';
+import { useTheme, ThemeProvider, Text } from '@fluentui/react';
 import { useModel } from '../../useModel.js';
 import { useEditColumns } from '../useEditColumns.js';
+import { useThemeGenerator } from '@talxis/react-components';
 
 const SortableItem = (props) => {
     const { column } = props;
-    const editColumnsModel = useEditColumns();
+    const { model, components } = useEditColumns();
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.name });
     const theme = useTheme();
     const styles = useMemo(() => getSortableItemStyles(theme), []);
     const labels = useModel().getLabels();
     const displayName = column.displayName ?? labels['no-name']();
+    const sortableItemTheme = useThemeGenerator(theme.palette.themePrimary, theme.semanticColors.buttonBackgroundPressed, theme.semanticColors.bodyText);
     const style = {
         transform: CSS.Transform.toString(transform),
         transition,
     };
-    return (jsxs("div", { className: styles.sortableItem, ref: setNodeRef, style: style, ...attributes, ...listeners, children: [jsx(Text, { title: displayName, children: displayName }), jsx(IconButton
-            //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp
-            , { 
-                //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp
-                onMouseUp: () => editColumnsModel.deleteColumn(column.name), iconProps: {
-                    iconName: 'Delete'
-                } })] }));
+    return (jsxs(ThemeProvider, { theme: sortableItemTheme, className: styles.sortableItem, ref: setNodeRef, style: style, ...attributes, ...listeners, children: [jsx(Text, { title: displayName, children: displayName }), jsx(components.SortableItemCommandBar, { column: column, items: [], farItems: [{
+                        key: 'delete',
+                        iconProps: {
+                            iconName: 'Cancel',
+                        },
+                        //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp
+                        onMouseUp: () => model.deleteColumn(column.name)
+                    }] })] }));
 };
 
 export { SortableItem };

package/dist/components/DatasetControl/EditColumns/SortableItem/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../../../src/components/DatasetControl/EditColumns/SortableItem/SortableItem.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from '@dnd-kit/utilities';\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { getSortableItemStyles } from \"./styles\";\nimport { useMemo } from \"react\";\nimport { useTheme, Text, IconButton } from \"@fluentui/react\";\nimport { useModel } from \"../../useModel\";\nimport { useEditColumns } from \"../useEditColumns\";\n\nexport const SortableItem = (props: { column: IColumn }) => {\n    const { column} = props;\n    const editColumnsModel = useEditColumns();\n    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.name });\n    const theme = useTheme();\n    const styles = useMemo(() => getSortableItemStyles(theme), []);\n    const labels = useModel().getLabels();\n    const displayName = column.displayName ?? labels['no-name']();\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    return (\n        <div className={styles.sortableItem} ref={setNodeRef} style={style} {...attributes} {...listeners}>\n            <Text title={displayName}>{displayName}</Text>\n                <IconButton\n                    //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp\n                    onMouseUp={() => editColumnsModel.deleteColumn(column.name)}\n                    iconProps={{\n                        iconName: 'Delete'\n                    }}\n                />\n        </div>\n    );\n}"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AASa,MAAA,YAAY,GAAG,CAAC,KAA0B,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC;AACxB,IAAA,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;AACtG,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,qBAAqB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/D,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;AAE9D,IAAA,MAAM,KAAK,GAAG;QACV,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACb,CAAC;AAEF,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,UAAU,EAAM,GAAA,SAAS,EAC7F,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,KAAK,EAAE,WAAW,EAAG,QAAA,EAAA,WAAW,EAAQ,CAAA,EAC1CA,IAAC,UAAU;;;;AAEP,gBAAA,SAAS,EAAE,MAAM,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,EAC3D,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;iBACrB,EACH,CAAA,CAAA,EAAA,CACJ,EACR;AACN;;;;"}
+{"version":3,"file":"SortableItem.js","sources":["../../../../../src/components/DatasetControl/EditColumns/SortableItem/SortableItem.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from '@dnd-kit/utilities';\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { getSortableItemStyles } from \"./styles\";\nimport { useMemo } from \"react\";\nimport { useTheme, Text, ThemeProvider } from \"@fluentui/react\";\nimport { useModel } from \"../../useModel\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { useThemeGenerator } from \"@talxis/react-components\";\n\nexport const SortableItem = (props: { column: IColumn }) => {\n    const { column } = props;\n    const { model, components } = useEditColumns()\n    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.name });\n    const theme = useTheme();\n    const styles = useMemo(() => getSortableItemStyles(theme), []);\n    const labels = useModel().getLabels();\n    const displayName = column.displayName ?? labels['no-name']();\n    const sortableItemTheme = useThemeGenerator(theme.palette.themePrimary, theme.semanticColors.buttonBackgroundPressed, theme.semanticColors.bodyText);\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    return (\n        <ThemeProvider theme={sortableItemTheme} className={styles.sortableItem} ref={setNodeRef} style={style} {...attributes} {...listeners}>\n            <Text title={displayName}>{displayName}</Text>\n            <components.SortableItemCommandBar column={column} items={[]} farItems={[{\n                key: 'delete',\n                iconProps: {\n                    iconName: 'Cancel',\n                },\n                //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp\n                onMouseUp: () => model.deleteColumn(column.name)\n            }]} />\n        </ThemeProvider>\n    );\n}"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUa,MAAA,YAAY,GAAG,CAAC,KAA0B,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9C,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;AACtG,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,qBAAqB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/D,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;IAC9D,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErJ,IAAA,MAAM,KAAK,GAAG;QACV,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACb,CAAC;IAEF,QACIA,KAAC,aAAa,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,UAAU,EAAM,GAAA,SAAS,aACjIC,GAAC,CAAA,IAAI,EAAC,EAAA,KAAK,EAAE,WAAW,YAAG,WAAW,EAAA,CAAQ,EAC9CA,GAAA,CAAC,UAAU,CAAC,sBAAsB,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC;AACrE,wBAAA,GAAG,EAAE,QAAQ;AACb,wBAAA,SAAS,EAAE;AACP,4BAAA,QAAQ,EAAE,QAAQ;AACrB,yBAAA;;wBAED,SAAS,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;qBACnD,CAAC,EAAA,CAAI,CACM,EAAA,CAAA,EAClB;AACN;;;;"}

package/dist/components/DatasetControl/EditColumns/SortableItem/SortableItemCommandBar/SortableItemCommandBar.d.ts

@@ -0,0 +1,2 @@
+import { ISortableItemCommandBarProps } from "../../components";
+export declare const SortableItemCommandBar: (props: ISortableItemCommandBarProps) => import("react/jsx-runtime").JSX.Element;