@talxis/base-controls 1.2503.10 → 1.2503.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { useRef, useMemo } from 'react';
3
3
  import { ThemeProvider, MessageBar, MessageBarButton, MessageBarType } from '@fluentui/react';
4
4
  import { datasetControlTranslations } from './translations.js';
@@ -30,10 +30,10 @@ const DatasetControl = (props) => {
30
30
  },
31
31
  containerProps: {
32
32
  theme: theme,
33
- className: styles.root,
33
+ className: styles.datasetControlRoot,
34
34
  },
35
35
  headerProps: {
36
- className: styles.header,
36
+ headerContainerProps: {},
37
37
  onRender: (renderQuickFind) => renderQuickFind(),
38
38
  onGetQuickFindProps: (props) => props
39
39
  },
@@ -51,8 +51,9 @@ const DatasetControl = (props) => {
51
51
  useMemo(() => {
52
52
  componentProps.onDatasetInit();
53
53
  }, []);
54
- return (jsxs(ThemeProvider, { ...componentProps.containerProps, children: [jsx("div", { ...componentProps.headerProps, children: componentProps.headerProps.onRender(() => {
55
- return jsx(QuickFind, { dataset: dataset, labels: labels, onGetQuickFindComponentProps: (props) => componentProps.headerProps.onGetQuickFindProps(props) });
54
+ return (jsxs(ThemeProvider, { ...componentProps.containerProps, children: [jsx("div", { ...componentProps.headerProps.headerContainerProps, children: componentProps.headerProps.onRender(() => {
55
+ return jsx(Fragment, { children: props.parameters.EnableQuickFind?.raw &&
56
+ jsx(QuickFind, { dataset: dataset, labels: labels, theme: theme, onGetQuickFindComponentProps: (props) => componentProps.headerProps.onGetQuickFindProps(props) }) });
56
57
  }) }), jsx(ErrorBoundary, { fallback: (resetError) => { renderErrorMessageBar(() => resetError()); }, children: jsx(Grid, { ...props, onOverrideComponentProps: (props) => props, context: injectedContextRef.current }) })] }));
57
58
  };
58
59
 
@@ -1 +1 @@
1
- {"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { MessageBar, MessageBarButton, MessageBarType, ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { IQuickFindProps, QuickFind } from \"./QuickFind/QuickFind\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { useRerender } from \"@talxis/react-components\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n const rerender = useRerender();\n const dataset = props.parameters.Grid;\n const injectedContextRef = useRef(props.context);\n const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n //@ts-ignore - private property\n dataset._setRenderer(() => rerender());\n\n //we need to have a way to customize the init behavior from above\n const componentProps = onOverrideComponentProps({\n onDatasetInit: () => {\n if (dataset.paging.pageNumber > 1) {\n dataset.paging.loadExactPage(dataset.paging.pageNumber)\n }\n else {\n dataset.refresh();\n }\n },\n containerProps: {\n theme: theme,\n className: styles.root,\n },\n headerProps: {\n className: styles.header,\n onRender: (renderQuickFind) => renderQuickFind(),\n onGetQuickFindProps: (props) => props\n },\n });\n\n const renderErrorMessageBar = (onReset?: () => void) => {\n <MessageBar\n isMultiline={false}\n actions={<MessageBarButton className={styles.messageBarBtn} text={labels.reload()} onClick={() => {\n onReset?.();\n dataset.refresh();\n }} />}\n messageBarType={MessageBarType.error}>\n {dataset.errorMessage || labels.generalError()}\n </MessageBar>\n }\n\n useMemo(() => {\n //@ts-ignore - private property\n injectedContextRef.current = dataset._patchContext(props.context);\n }, [props.context]);\n\n useMemo(() => {\n componentProps.onDatasetInit();\n }, []);\n\n\n return (\n <ThemeProvider {...componentProps.containerProps}>\n <div {...componentProps.headerProps}>\n {componentProps.headerProps.onRender(() => {\n return <QuickFind dataset={dataset} labels={labels} onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n })}\n </div>\n <ErrorBoundary fallback={(resetError: () => void) => { renderErrorMessageBar(() => resetError()) }}>\n <Grid\n {...props}\n onOverrideComponentProps={(props) => props}\n context={injectedContextRef.current} />\n </ErrorBoundary>\n </ThemeProvider>\n )\n}"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAWa,MAAA,cAAc,GAAG,CAAC,KAAsB,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,EAAE,0BAA0B,CAAC,CAAC;AAC1F,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IACtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/F,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;;IAEtF,OAAO,CAAC,YAAY,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAC;;IAGvC,MAAM,cAAc,GAAG,wBAAwB,CAAC;QAC9C,aAAa,EAAE,MAAK;AAClB,YAAA,IAAI,OAAO,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE;gBACjC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;AACxD,aAAA;AACI,iBAAA;gBACH,OAAO,CAAC,OAAO,EAAE,CAAC;AACnB,aAAA;SACF;AACD,QAAA,cAAc,EAAE;AACd,YAAA,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,MAAM,CAAC,IAAI;AACvB,SAAA;AACD,QAAA,WAAW,EAAE;YACX,SAAS,EAAE,MAAM,CAAC,MAAM;AACxB,YAAA,QAAQ,EAAE,CAAC,eAAe,KAAK,eAAe,EAAE;AAChD,YAAA,mBAAmB,EAAE,CAAC,KAAK,KAAK,KAAK;AACtC,SAAA;AACF,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAoB,KAAI;QACrDA,GAAC,CAAA,UAAU,EACT,EAAA,WAAW,EAAE,KAAK,EAClB,OAAO,EAAEA,GAAA,CAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAK;oBAC/F,OAAO,IAAI,CAAC;oBACZ,OAAO,CAAC,OAAO,EAAE,CAAC;AACpB,iBAAC,GAAI,EACL,cAAc,EAAE,cAAc,CAAC,KAAK,EAAA,QAAA,EACnC,OAAO,CAAC,YAAY,IAAI,MAAM,CAAC,YAAY,EAAE,GACnC,CAAA;AACf,KAAC,CAAA;IAED,OAAO,CAAC,MAAK;;QAEX,kBAAkB,CAAC,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACpE,KAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,CAAC,MAAK;QACX,cAAc,CAAC,aAAa,EAAE,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAGP,QACEC,KAAC,aAAa,EAAA,EAAA,GAAK,cAAc,CAAC,cAAc,aAC9CD,GAAS,CAAA,KAAA,EAAA,EAAA,GAAA,cAAc,CAAC,WAAW,EAAA,QAAA,EAChC,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAK;oBACtC,OAAOA,GAAA,CAAC,SAAS,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,4BAA4B,EAAE,CAAC,KAAK,KAAK,cAAc,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAA,CAAI,CAAA;iBACzJ,CAAC,GACE,EACNA,GAAA,CAAC,aAAa,EAAC,EAAA,QAAQ,EAAE,CAAC,UAAsB,KAAO,EAAA,qBAAqB,CAAC,MAAM,UAAU,EAAE,CAAC,CAAA,EAAE,YAChGA,GAAC,CAAA,IAAI,OACC,KAAK,EACT,wBAAwB,EAAE,CAAC,KAAK,KAAK,KAAK,EAC1C,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAI,CAAA,EAAA,CAC3B,CACF,EAAA,CAAA,EACjB;AACH;;;;"}
1
+ {"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { MessageBar, MessageBarButton, MessageBarType, ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { useRerender } from \"@talxis/react-components\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n const rerender = useRerender();\n const dataset = props.parameters.Grid;\n const injectedContextRef = useRef(props.context);\n const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n //@ts-ignore - private property\n dataset._setRenderer(() => rerender());\n\n //we need to have a way to customize the init behavior from above\n const componentProps = onOverrideComponentProps({\n onDatasetInit: () => {\n if (dataset.paging.pageNumber > 1) {\n dataset.paging.loadExactPage(dataset.paging.pageNumber)\n }\n else {\n dataset.refresh();\n }\n },\n containerProps: {\n theme: theme,\n className: styles.datasetControlRoot,\n },\n headerProps: {\n headerContainerProps: {},\n onRender: (renderQuickFind) => renderQuickFind(),\n onGetQuickFindProps: (props) => props\n },\n });\n\n const renderErrorMessageBar = (onReset?: () => void) => {\n <MessageBar\n isMultiline={false}\n actions={<MessageBarButton className={styles.messageBarBtn} text={labels.reload()} onClick={() => {\n onReset?.();\n dataset.refresh();\n }} />}\n messageBarType={MessageBarType.error}>\n {dataset.errorMessage || labels.generalError()}\n </MessageBar>\n }\n\n useMemo(() => {\n //@ts-ignore - private property\n injectedContextRef.current = dataset._patchContext(props.context);\n }, [props.context]);\n\n useMemo(() => {\n componentProps.onDatasetInit();\n }, []);\n\n\n return (\n <ThemeProvider {...componentProps.containerProps}>\n <div {...componentProps.headerProps.headerContainerProps}>\n {componentProps.headerProps.onRender(() => {\n return <>\n {props.parameters.EnableQuickFind?.raw &&\n <QuickFind \n dataset={dataset} \n labels={labels} \n theme={theme}\n onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n }\n </>\n })}\n </div>\n <ErrorBoundary fallback={(resetError: () => void) => { renderErrorMessageBar(() => resetError()) }}>\n <Grid\n {...props}\n onOverrideComponentProps={(props) => props}\n context={injectedContextRef.current} />\n </ErrorBoundary>\n </ThemeProvider>\n )\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}
@@ -1,11 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  import { IDataset } from "@talxis/client-libraries";
3
- import { ITextFieldProps } from "@talxis/react-components";
3
+ import { ITheme } from "@talxis/react-components";
4
4
  import { datasetControlTranslations } from "../translations";
5
5
  import { ITranslation } from "../../../hooks";
6
- export interface IQuickFindProps {
6
+ import { IQuickFindProps } from "../interfaces";
7
+ export interface IQuickFindComponentProps {
7
8
  labels: ITranslation<typeof datasetControlTranslations>;
8
9
  dataset: IDataset;
9
- onGetQuickFindComponentProps: (props: ITextFieldProps) => ITextFieldProps;
10
+ theme: ITheme;
11
+ onGetQuickFindComponentProps: (props: IQuickFindProps) => IQuickFindProps;
10
12
  }
11
- export declare const QuickFind: (props: IQuickFindProps) => JSX.Element;
13
+ export declare const QuickFind: (props: IQuickFindComponentProps) => JSX.Element;
@@ -1,36 +1,42 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { TextField } from '@talxis/react-components';
3
3
  import { useState, useEffect } from 'react';
4
+ import { ThemeProvider } from '@fluentui/react';
4
5
 
5
6
  const QuickFind = (props) => {
6
- const { dataset, labels } = { ...props };
7
+ const { dataset, labels, theme } = { ...props };
7
8
  const [query, setQuery] = useState('');
8
- const componentProps = props.onGetQuickFindComponentProps({
9
- value: query,
10
- placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
11
- onChange: (e, newValue) => setQuery(newValue ?? ''),
12
- onKeyUp: (e) => {
13
- if (e.key === 'Enter') {
14
- onSearch(query);
15
- }
9
+ const quickFindProps = props.onGetQuickFindComponentProps({
10
+ container: {
11
+ theme: theme
16
12
  },
17
- deleteButtonProps: query ? {
18
- key: 'delete',
19
- iconProps: {
20
- iconName: 'Cancel'
13
+ textFieldProps: {
14
+ value: query,
15
+ placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
16
+ onChange: (e, newValue) => setQuery(newValue ?? ''),
17
+ onKeyUp: (e) => {
18
+ if (e.key === 'Enter') {
19
+ onSearch(query);
20
+ }
21
21
  },
22
- onClick: () => {
23
- setQuery("");
24
- onSearch(undefined);
25
- }
26
- } : undefined,
27
- suffixItems: [{
28
- key: 'search',
22
+ deleteButtonProps: query ? {
23
+ key: 'delete',
29
24
  iconProps: {
30
- iconName: 'Search'
25
+ iconName: 'Cancel'
31
26
  },
32
- onClick: () => onSearch(query)
33
- }]
27
+ onClick: () => {
28
+ setQuery("");
29
+ onSearch(undefined);
30
+ }
31
+ } : undefined,
32
+ suffixItems: [{
33
+ key: 'search',
34
+ iconProps: {
35
+ iconName: 'Search'
36
+ },
37
+ onClick: () => onSearch(query)
38
+ }]
39
+ }
34
40
  });
35
41
  const onSearch = (query) => {
36
42
  dataset.setSearchQuery?.(query ?? "");
@@ -39,7 +45,8 @@ const QuickFind = (props) => {
39
45
  useEffect(() => {
40
46
  setQuery(dataset.getSearchQuery?.() ?? '');
41
47
  }, [dataset.getSearchQuery?.()]);
42
- return jsx(TextField, { ...componentProps });
48
+ //needs to be wrapped within ThemeProvider because the theme context can be lost if we are overriding the header render
49
+ return jsx(ThemeProvider, { ...quickFindProps.container, children: jsx(TextField, { ...quickFindProps.textFieldProps }) });
43
50
  };
44
51
 
45
52
  export { QuickFind };
@@ -1 +1 @@
1
- {"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { ITextFieldProps, TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { useEffect, useState } from \"react\";\n\nexport interface IQuickFindProps {\n labels: ITranslation<typeof datasetControlTranslations>\n dataset: IDataset;\n onGetQuickFindComponentProps: (props: ITextFieldProps) => ITextFieldProps\n}\n\nexport const QuickFind = (props: IQuickFindProps) => {\n const {dataset, labels} = {...props};\n const [query, setQuery] = useState<string>('');\n\n const componentProps = props.onGetQuickFindComponentProps({\n value: query,\n placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,\n onChange: (e, newValue) => setQuery(newValue ?? ''),\n onKeyUp: (e) => {\n if (e.key === 'Enter') {\n onSearch(query);\n }\n },\n deleteButtonProps: query ? {\n key: 'delete',\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => {\n setQuery(\"\");\n onSearch(undefined);\n }\n } : undefined,\n suffixItems: [{\n key: 'search',\n iconProps: {\n iconName: 'Search'\n },\n onClick: () => onSearch(query)\n }]\n });\n\n const onSearch = (query?: string) => {\n dataset.setSearchQuery?.(query ?? \"\");\n dataset.refresh();\n }\n\n useEffect(() => {\n setQuery(dataset.getSearchQuery?.() ?? '');\n }, [dataset.getSearchQuery?.()])\n\n return <TextField {...componentProps} />\n}"],"names":["_jsx"],"mappings":";;;;AAYa,MAAA,SAAS,GAAG,CAAC,KAAsB,KAAI;IAChD,MAAM,EAAC,OAAO,EAAE,MAAM,EAAC,GAAG,EAAC,GAAG,KAAK,EAAC,CAAC;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;AAE/C,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,4BAA4B,CAAC;AACtD,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,WAAW,EAAE,CAAG,EAAA,MAAM,CAAC,MAAM,EAAE,IAAI,OAAO,CAAC,WAAW,EAAE,EAAE,qBAAqB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAK,GAAA,CAAA;AACxG,QAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;AACnD,QAAA,OAAO,EAAE,CAAC,CAAC,KAAI;AACX,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnB,aAAA;SACJ;AACD,QAAA,iBAAiB,EAAE,KAAK,GAAG;AACvB,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;YACD,OAAO,EAAE,MAAK;gBACV,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,QAAQ,CAAC,SAAS,CAAC,CAAC;aACvB;SACJ,GAAG,SAAS;AACb,QAAA,WAAW,EAAE,CAAC;AACV,gBAAA,GAAG,EAAE,QAAQ;AACb,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;AACrB,iBAAA;AACD,gBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;aACjC,CAAC;AACL,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;QAChC,OAAO,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC;QACtC,OAAO,CAAC,OAAO,EAAE,CAAC;AACtB,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;KAC9C,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,CAAA;AAEhC,IAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,cAAc,GAAI,CAAA;AAC5C;;;;"}
1
+ {"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { ITextFieldProps, ITheme, TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { useEffect, useState } from \"react\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IQuickFindProps } from \"../interfaces\";\n\nexport interface IQuickFindComponentProps {\n labels: ITranslation<typeof datasetControlTranslations>\n dataset: IDataset;\n theme: ITheme;\n onGetQuickFindComponentProps: (props: IQuickFindProps) => IQuickFindProps;\n}\n\nexport const QuickFind = (props: IQuickFindComponentProps) => {\n const { dataset, labels, theme } = { ...props };\n const [query, setQuery] = useState<string>('');\n\n const quickFindProps = props.onGetQuickFindComponentProps({\n container: {\n theme: theme\n },\n textFieldProps: {\n value: query,\n placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,\n onChange: (e, newValue) => setQuery(newValue ?? ''),\n onKeyUp: (e) => {\n if (e.key === 'Enter') {\n onSearch(query);\n }\n },\n deleteButtonProps: query ? {\n key: 'delete',\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => {\n setQuery(\"\");\n onSearch(undefined);\n }\n } : undefined,\n suffixItems: [{\n key: 'search',\n iconProps: {\n iconName: 'Search'\n },\n onClick: () => onSearch(query)\n }]\n }\n })\n const onSearch = (query?: string) => {\n dataset.setSearchQuery?.(query ?? \"\");\n dataset.refresh();\n }\n\n useEffect(() => {\n setQuery(dataset.getSearchQuery?.() ?? '');\n }, [dataset.getSearchQuery?.()])\n //needs to be wrapped within ThemeProvider because the theme context can be lost if we are overriding the header render\n return <ThemeProvider {...quickFindProps.container}><TextField {...quickFindProps.textFieldProps} /></ThemeProvider>\n}"],"names":["_jsx"],"mappings":";;;;;AAea,MAAA,SAAS,GAAG,CAAC,KAA+B,KAAI;AACzD,IAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;AAE/C,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,4BAA4B,CAAC;AACtD,QAAA,SAAS,EAAE;AACP,YAAA,KAAK,EAAE,KAAK;AACf,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,WAAW,EAAE,CAAG,EAAA,MAAM,CAAC,MAAM,EAAE,IAAI,OAAO,CAAC,WAAW,EAAE,EAAE,qBAAqB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAK,GAAA,CAAA;AACxG,YAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;AACnD,YAAA,OAAO,EAAE,CAAC,CAAC,KAAI;AACX,gBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnB,iBAAA;aACJ;AACD,YAAA,iBAAiB,EAAE,KAAK,GAAG;AACvB,gBAAA,GAAG,EAAE,QAAQ;AACb,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;AACrB,iBAAA;gBACD,OAAO,EAAE,MAAK;oBACV,QAAQ,CAAC,EAAE,CAAC,CAAC;oBACb,QAAQ,CAAC,SAAS,CAAC,CAAC;iBACvB;aACJ,GAAG,SAAS;AACb,YAAA,WAAW,EAAE,CAAC;AACV,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,SAAS,EAAE;AACP,wBAAA,QAAQ,EAAE,QAAQ;AACrB,qBAAA;AACD,oBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;iBACjC,CAAC;AACL,SAAA;AACJ,KAAA,CAAC,CAAA;AACF,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;QAChC,OAAO,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC;QACtC,OAAO,CAAC,OAAO,EAAE,CAAC;AACtB,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;KAC9C,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,CAAA;;AAEhC,IAAA,OAAOA,GAAC,CAAA,aAAa,EAAK,EAAA,GAAA,cAAc,CAAC,SAAS,EAAA,QAAA,EAAEA,GAAC,CAAA,SAAS,OAAK,cAAc,CAAC,cAAc,EAAA,CAAI,GAAgB,CAAA;AACxH;;;;"}
@@ -6,12 +6,17 @@ import { IGridOutputs, IGridParameters } from "../Grid";
6
6
  import { gridTranslations } from "../Grid/translations";
7
7
  import { datasetControlTranslations } from "./translations";
8
8
  import { ITextFieldProps } from "@talxis/react-components";
9
+ export interface IQuickFindProps {
10
+ textFieldProps: ITextFieldProps;
11
+ container: ThemeProviderProps;
12
+ }
9
13
  export interface IDatasetControlComponentProps {
10
14
  onDatasetInit: () => void;
11
15
  containerProps: ThemeProviderProps;
12
- headerProps: React.HTMLAttributes<HTMLDivElement> & {
16
+ headerProps: {
17
+ headerContainerProps: React.HTMLAttributes<HTMLDivElement>;
13
18
  onRender: (renderQuickFind: () => React.ReactElement) => React.ReactElement;
14
- onGetQuickFindProps: (props: ITextFieldProps) => ITextFieldProps;
19
+ onGetQuickFindProps: (props: IQuickFindProps) => IQuickFindProps;
15
20
  };
16
21
  }
17
22
  export interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps> {
@@ -1,6 +1,6 @@
1
1
  import { ITheme } from "@talxis/react-components";
2
2
  export declare const getDatasetControlStyles: (theme: ITheme, height?: string | null) => import("@fluentui/react").IProcessedStyleSet<{
3
- root: {
3
+ datasetControlRoot: {
4
4
  flexGrow?: number | undefined;
5
5
  paddingLeft?: number | undefined;
6
6
  paddingRight?: number | undefined;
@@ -4,7 +4,7 @@ import { Client } from '@talxis/client-libraries';
4
4
  const client = new Client();
5
5
  const getDatasetControlStyles = (theme, height) => {
6
6
  return mergeStyleSets({
7
- root: {
7
+ datasetControlRoot: {
8
8
  display: 'flex',
9
9
  flexDirection: 'column',
10
10
  gap: 15,
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { Client } from \"@talxis/client-libraries\";\nimport { ITheme } from \"@talxis/react-components\";\n\nconst client = new Client();\n\nexport const getDatasetControlStyles = (theme: ITheme, height?: string | null) => {\n return mergeStyleSets({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: 15,\n ...(height === '100%' ? getFullHeightStyles(theme) : {})\n\n },\n messageBarBtn: {\n minHeight: 'inherit'\n }\n });\n}\n\nconst getFullHeightStyles = (theme: ITheme) => {\n const styles = {\n flexGrow: 1,\n paddingLeft: 15,\n paddingRight: 15,\n paddingTop: 15\n }\n if (!client.isTalxisPortal()) {\n return {\n ...styles,\n boxShadow: theme.effects.elevation8,\n borderRadius: theme.effects.roundedCorner4,\n margin: 16,\n marginRight: 20\n }\n }\n else {\n return styles;\n }\n}"],"names":[],"mappings":";;;AAIA,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;MAEf,uBAAuB,GAAG,CAAC,KAAa,EAAE,MAAsB,KAAI;AAC7E,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAE3D,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAa,KAAI;AAC1C,IAAA,MAAM,MAAM,GAAG;AACX,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,UAAU,EAAE,EAAE;KACjB,CAAA;AACD,IAAA,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE;QAC1B,OAAO;AACH,YAAA,GAAG,MAAM;AACT,YAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;AACnC,YAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;AAC1C,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,WAAW,EAAE,EAAE;SAClB,CAAA;AACJ,KAAA;AACI,SAAA;AACD,QAAA,OAAO,MAAM,CAAC;AACjB,KAAA;AACL,CAAC;;;;"}
1
+ {"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { Client } from \"@talxis/client-libraries\";\nimport { ITheme } from \"@talxis/react-components\";\n\nconst client = new Client();\n\nexport const getDatasetControlStyles = (theme: ITheme, height?: string | null) => {\n return mergeStyleSets({\n datasetControlRoot: {\n display: 'flex',\n flexDirection: 'column',\n gap: 15,\n ...(height === '100%' ? getFullHeightStyles(theme) : {})\n\n },\n messageBarBtn: {\n minHeight: 'inherit'\n }\n });\n}\n\nconst getFullHeightStyles = (theme: ITheme) => {\n const styles = {\n flexGrow: 1,\n paddingLeft: 15,\n paddingRight: 15,\n paddingTop: 15\n }\n if (!client.isTalxisPortal()) {\n return {\n ...styles,\n boxShadow: theme.effects.elevation8,\n borderRadius: theme.effects.roundedCorner4,\n margin: 16,\n marginRight: 20\n }\n }\n else {\n return styles;\n }\n}"],"names":[],"mappings":";;;AAIA,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;MAEf,uBAAuB,GAAG,CAAC,KAAa,EAAE,MAAsB,KAAI;AAC7E,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAE3D,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAa,KAAI;AAC1C,IAAA,MAAM,MAAM,GAAG;AACX,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,UAAU,EAAE,EAAE;KACjB,CAAA;AACD,IAAA,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE;QAC1B,OAAO;AACH,YAAA,GAAG,MAAM;AACT,YAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;AACnC,YAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;AAC1C,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,WAAW,EAAE,EAAE;SAClB,CAAA;AACJ,KAAA;AACI,SAAA;AACD,QAAA,OAAO,MAAM,CAAC;AACjB,KAAA;AACL,CAAC;;;;"}
package/dist/index.d.ts CHANGED
@@ -647,12 +647,17 @@ declare const datasetControlTranslations: {
647
647
  };
648
648
  };
649
649
 
650
+ interface IQuickFindProps {
651
+ textFieldProps: ITextFieldProps;
652
+ container: ThemeProviderProps;
653
+ }
650
654
  interface IDatasetControlComponentProps {
651
655
  onDatasetInit: () => void;
652
656
  containerProps: ThemeProviderProps;
653
- headerProps: React.HTMLAttributes<HTMLDivElement> & {
657
+ headerProps: {
658
+ headerContainerProps: React.HTMLAttributes<HTMLDivElement>;
654
659
  onRender: (renderQuickFind: () => React.ReactElement) => React.ReactElement;
655
- onGetQuickFindProps: (props: ITextFieldProps) => ITextFieldProps;
660
+ onGetQuickFindProps: (props: IQuickFindProps) => IQuickFindProps;
656
661
  };
657
662
  }
658
663
  interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps> {
@@ -1235,4 +1240,4 @@ interface IDurationOutputs extends IOutputs$1 {
1235
1240
 
1236
1241
  declare const Duration: (props: IDuration) => JSX.Element;
1237
1242
 
1238
- export { BaseControl, BaseControls, ControlTheme, DatasetControl, DateTime, Decimal, Duration, Grid, GridCellRenderer, IContext, IControl, IControlController, IDatasetControl, IDatasetControlComponentProps, IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeProperty, IDecimal, IDecimalNumberProperty, IDecimalOutputs, IDecimalParameters, IDefaultTranslations, IDuration, IDurationOutputs, IDurationParameters, IEntity, IFileProperty, IFluentDesignState, IGrid, IGridOutputs, IGridParameters, ILayout, ILookup, ILookupOutputs, ILookupParameters, ILookupProperty, IMetadata, IMultiSelectOptionSet, IMultiSelectOptionSetOutputs, IMultiSelectOptionSetParameters, IMultiSelectOptionSetProperty, IOptionSet, IOptionSetOutputs, IOptionSetParameters, IOptionSetProperty, IOutputs, IParameters$1 as IParameters, IProperty, IStringProperty, ITextField, ITextFieldOutputs, ITextFieldParameters, ITranslation, ITranslations, ITwoOptions, ITwoOptionsOutputs, ITwoOptionsParameters, ITwoOptionsProperty, IWholeNumberProperty, Lookup, MultiSelectOptionSet, NestedControlRenderer, OptionSet, TextField, ThemeWrapper, TwoOptions, useControl, useControlLabels, useControlSizing, useControlTheme, useControlThemeGenerator, useDateTime, useFocusIn, useInputBasedControl, useLookup, useMouseOver };
1243
+ export { BaseControl, BaseControls, ControlTheme, DatasetControl, DateTime, Decimal, Duration, Grid, GridCellRenderer, IContext, IControl, IControlController, IDatasetControl, IDatasetControlComponentProps, IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeProperty, IDecimal, IDecimalNumberProperty, IDecimalOutputs, IDecimalParameters, IDefaultTranslations, IDuration, IDurationOutputs, IDurationParameters, IEntity, IFileProperty, IFluentDesignState, IGrid, IGridOutputs, IGridParameters, ILayout, ILookup, ILookupOutputs, ILookupParameters, ILookupProperty, IMetadata, IMultiSelectOptionSet, IMultiSelectOptionSetOutputs, IMultiSelectOptionSetParameters, IMultiSelectOptionSetProperty, IOptionSet, IOptionSetOutputs, IOptionSetParameters, IOptionSetProperty, IOutputs, IParameters$1 as IParameters, IProperty, IQuickFindProps, IStringProperty, ITextField, ITextFieldOutputs, ITextFieldParameters, ITranslation, ITranslations, ITwoOptions, ITwoOptionsOutputs, ITwoOptionsParameters, ITwoOptionsProperty, IWholeNumberProperty, Lookup, MultiSelectOptionSet, NestedControlRenderer, OptionSet, TextField, ThemeWrapper, TwoOptions, useControl, useControlLabels, useControlSizing, useControlTheme, useControlThemeGenerator, useDateTime, useFocusIn, useInputBasedControl, useLookup, useMouseOver };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@talxis/base-controls",
3
- "version": "1.2503.10",
3
+ "version": "1.2503.12",
4
4
  "description": "Set of React components that natively work with Power Apps Component Framework API's",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",