npm - @talxis/base-controls - Versions diffs - 1.2507.2 → 1.2509.1-alpha.0 - Mend

@talxis/base-controls 1.2507.2 → 1.2509.1-alpha.0

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.

Files changed (477) hide show

package/dist/components/NestedControlRenderer/NestedControlRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NestedControlRenderer.js","sources":["../../../src/components/NestedControlRenderer/NestedControlRenderer.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { NestedControl } from './NestedControl';\nimport { INestedControlRenderer, INestedControlRendererComponentProps, INestedControlRendererParameters } from './interfaces';\nimport { TextField } from '../TextField';\nimport { Decimal } from '../Decimal';\nimport { Duration } from '../Duration';\nimport { TwoOptions } from '../TwoOptions';\nimport { DateTime } from '../DateTime';\nimport { MultiSelectOptionSet } from '../MultiSelectOptionSet';\nimport { Lookup } from '../Lookup';\nimport { OptionSet } from '../OptionSet';\nimport { GridCellRenderer } from '../GridCellRenderer/GridCellRenderer';\nimport { BaseControls } from '../../utils';\nimport { getNestedControlStyles } from './styles';\nimport { Spinner, useRerender } from '@talxis/react-components';\nimport { MessageBar, MessageBarButton, MessageBarType, Shimmer, SpinnerSize } from '@fluentui/react';\nimport ReactDOM from 'react-dom';\nimport { useControlLabels } from '../../hooks';\nimport { getDefaultNestedControlRendererTranslations } from './translations';\n\ninterface IRef {\n control: NestedControl \| null;\n props: INestedControlRenderer;\n controlName: string;\n componentProps: INestedControlRendererComponentProps;\n isBaseControl: boolean;\n mounted: boolean;\n controlContainer: HTMLDivElement \| null;\n}\n\nexport const NestedControlRenderer = (props: INestedControlRenderer) => {\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n const labels = useControlLabels({\n translations: props.translations,\n languageId : props.context.userSettings.languageId,\n defaultTranslations: getDefaultNestedControlRendererTranslations()\n })\n const rerender = useRerender();\n const isBaseControl = useMemo(() => {\n return BaseControls.IsBaseControl(props.parameters.ControlName);\n }, [props.parameters.ControlName]);\n\n const styles = useMemo(() => getNestedControlStyles(isBaseControl), [isBaseControl]);\n const internalControlRendererRef = useRef<IInternalNestedControlRendererRef>(null);\n const ref = useRef<Partial<IRef>>();\n \n ref.current = {\n ...ref.current,\n props: props,\n isBaseControl: isBaseControl,\n controlName: props.parameters.ControlName \n }\n\n ref.current.componentProps = onOverrideComponentProps({\n rootContainerProps: {},\n controlContainerProps: {},\n messageBarProps: {\n //@ts-ignore - typescript\n messageBarType: MessageBarType.error,\n buttonProps: {\n className: styles.messageBarBtn\n }\n },\n loadingProps: {\n containerProps: {},\n spinnerProps: {\n size: SpinnerSize.xSmall\n },\n shimmerProps: {\n styles: {\n root: styles.shimmerRoot,\n shimmerWrapper: {\n height: 32\n }\n }\n },\n },\n onOverrideRender: (control, isCustomPcfComponent, defaultRender) => defaultRender(),\n onOverrideUnmount: (control, defaultUnmount) => defaultUnmount(),\n onOverrideControlProps: (props) => props,\n });\n\n const getRef = (): IRef => {\n return ref.current as any;\n }\n\n const getBaseControl = (): any => {\n switch (getRef().controlName) {\n case 'TextField':\n return TextField\n case 'OptionSet':\n return OptionSet;\n case 'Lookup':\n return Lookup;\n case 'MultiSelectOptionSet':\n return MultiSelectOptionSet;\n case 'TwoOptions':\n return TwoOptions;\n case 'DateTime':\n return DateTime;\n case 'Decimal':\n return Decimal;\n case 'Duration':\n return Duration;\n case 'GridCellRenderer':\n return GridCellRenderer;\n default:\n return GridCellRenderer;\n }\n };\n\n const onRender = (control: NestedControl, defaultRender: () => Promise<void>) => {\n if (getRef().isBaseControl) {\n const controlProps = control.getProps();\n return ReactDOM.render(React.createElement(getBaseControl(), controlProps), control.getContainer());\n }\n return defaultRender();\n }\n\n const onUmount = (control: NestedControl, defaultUnmount: () => void) => {\n if (control.isMountedPcfComponent()) {\n return defaultUnmount();\n }\n return ReactDOM.unmountComponentAtNode(control.getContainer())\n }\n\n const createControlInstance = () => {\n new NestedControl({\n parentPcfContext: getRef().props.context,\n onGetContainerElement: () => getRef().controlContainer!,\n onGetControlName: () => getRef().controlName,\n onGetBindings: () => {\n return getRef().props.parameters.Bindings ?? {};\n },\n callbacks: {\n //onInit could either by sync or async\n onInit: (instance) => {\n getRef().control = instance;\n //if we are already mounted, we need to rerender\n if (getRef().mounted) {\n rerender();\n }\n },\n onControlStateChanged: () => internalControlRendererRef.current?.rerender(),\n onGetControlStates: () => getRef().props.parameters.ControlStates,\n onNotifyOutputChanged: (outputs) => getRef().props.onNotifyOutputChanged?.(outputs)\n },\n overrides: {\n onGetProps: getRef().componentProps.onOverrideControlProps,\n onRender: (control: NestedControl, defaultRender) => {\n getRef().componentProps.onOverrideRender(control, !getRef().isBaseControl, () => {\n onRender(control, defaultRender);\n })\n },\n onUnmount: (control, defaultUnmount) => {\n getRef().componentProps.onOverrideUnmount(control, () => onUmount(control, defaultUnmount))\n }\n },\n })\n\n }\n useMemo(() => {\n createControlInstance();\n }, []);\n\n useEffect(() => {\n const ref = getRef();\n ref.mounted = true;\n ref.controlContainer = internalControlRendererRef.current!.getContainer();\n return () => {\n const ref = getRef();\n ref.control?.unmount();\n ref.controlContainer = null;\n ref.control = null;\n }\n }, []);\n\n useEffect(() => {\n getRef().control?.render();\n })\n\n return <InternalNestedControlRenderer\n ref={internalControlRendererRef}\n labels={labels}\n control={getRef().control ?? undefined}\n parameters={getRef().props.parameters}\n componentProps={getRef().componentProps} />\n}\n\ninterface IInternalNestedControlRendererProps {\n parameters: INestedControlRendererParameters;\n componentProps: INestedControlRendererComponentProps;\n labels: any;\n loadingType?: 'spinner' \| 'shimmer';\n control?: NestedControl;\n\n}\n\ninterface IInternalNestedControlRendererRef {\n getContainer: () => HTMLDivElement;\n rerender: () => void;\n}\n\n\nconst InternalNestedControlRenderer = forwardRef<IInternalNestedControlRendererRef, IInternalNestedControlRendererProps>((props, ref) => {\n //once control is defined, it is initialized\n const { control, parameters, componentProps, labels } = props;\n const customControlContainerRef = useRef<HTMLDivElement>(null);\n const errorMessage = control?.getErrorMessage();\n const rerender = useRerender();\n\n useImperativeHandle(ref, () => {\n return {\n getContainer: () => customControlContainerRef.current!,\n rerender: () => rerender()\n }\n })\n\n const renderLoading = () => {\n if (parameters.LoadingType === 'shimmer') {\n return <Shimmer {...componentProps?.loadingProps?.shimmerProps} />\n }\n return <Spinner {...componentProps?.loadingProps?.spinnerProps} />\n }\n\n const onShowErrorDialog = () => {\n if(window.Xrm?.Navigation) {\n window.Xrm.Navigation.openErrorDialog({\n message: errorMessage\n })\n return;\n }\n alert(errorMessage);\n }\n\n return (\n <div {...componentProps.rootContainerProps}>\n {(!control \|\| control.isLoading()) && <div {...componentProps?.loadingProps?.containerProps}>{renderLoading()}</div>\n }\n {errorMessage &&\n <MessageBar messageBarType={MessageBarType.error} isMultiline={false} actions={<div>\n <MessageBarButton className={componentProps.messageBarProps.buttonProps.className} onClick={() => onShowErrorDialog()}>{labels.detail()}</MessageBarButton>\n </div>} {...componentProps?.messageBarProps}>\n {labels.control()} <b>{parameters.ControlName}</b> {labels.failedToLoad()}.\n </MessageBar>\n }\n <div ref={customControlContainerRef} style={errorMessage ? {display: 'none'} : undefined} {...componentProps.controlContainerProps} />\n </div>)\n})\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8Ba,MAAA,qBAAqB,GAAG,CAAC,KAA6B,KAAI;AACnE,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IACtF,MAAM,MAAM,GAAG,gBAAgB,CAAC;QAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;AAChC,QAAA,UAAU,EAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU;QAClD,mBAAmB,EAAE,2CAA2C,EAAE;AACrE,KAAA,CAAC,CAAA;AACF,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;QAC/B,OAAO,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;KACnE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC;AAEnC,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,sBAAsB,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACrF,IAAA,MAAM,0BAA0B,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAC;AACnF,IAAA,MAAM,GAAG,GAAG,MAAM,EAAiB,CAAC;IAEpC,GAAG,CAAC,OAAO,GAAG;QACV,GAAG,GAAG,CAAC,OAAO;AACd,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,aAAa,EAAE,aAAa;AAC5B,QAAA,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;KAC5C,CAAA;AAED,IAAA,GAAG,CAAC,OAAO,CAAC,cAAc,GAAG,wBAAwB,CAAC;AAClD,QAAA,kBAAkB,EAAE,EAAE;AACtB,QAAA,qBAAqB,EAAE,EAAE;AACzB,QAAA,eAAe,EAAE;;YAEb,cAAc,EAAE,cAAc,CAAC,KAAK;AACpC,YAAA,WAAW,EAAE;gBACT,SAAS,EAAE,MAAM,CAAC,aAAa;AAClC,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,cAAc,EAAE,EAAE;AAClB,YAAA,YAAY,EAAE;gBACV,IAAI,EAAE,WAAW,CAAC,MAAM;AAC3B,aAAA;AACD,YAAA,YAAY,EAAE;AACV,gBAAA,MAAM,EAAE;oBACJ,IAAI,EAAE,MAAM,CAAC,WAAW;AACxB,oBAAA,cAAc,EAAE;AACZ,wBAAA,MAAM,EAAE,EAAE;AACb,qBAAA;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;QACD,gBAAgB,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,aAAa,KAAK,aAAa,EAAE;QACnF,iBAAiB,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,cAAc,EAAE;AAChE,QAAA,sBAAsB,EAAE,CAAC,KAAK,KAAK,KAAK;AAC3C,KAAA,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,MAAW;QACtB,OAAO,GAAG,CAAC,OAAc,CAAC;AAC9B,KAAC,CAAA;IAED,MAAM,cAAc,GAAG,MAAU;AAC7B,QAAA,QAAQ,MAAM,EAAE,CAAC,WAAW;AACxB,YAAA,KAAK,WAAW;AACZ,gBAAA,OAAO,SAAS,CAAA;AACpB,YAAA,KAAK,WAAW;AACZ,gBAAA,OAAO,SAAS,CAAC;AACrB,YAAA,KAAK,QAAQ;AACT,gBAAA,OAAO,MAAM,CAAC;AAClB,YAAA,KAAK,sBAAsB;AACvB,gBAAA,OAAO,oBAAoB,CAAC;AAChC,YAAA,KAAK,YAAY;AACb,gBAAA,OAAO,UAAU,CAAC;AACtB,YAAA,KAAK,UAAU;AACX,gBAAA,OAAO,QAAQ,CAAC;AACpB,YAAA,KAAK,SAAS;AACV,gBAAA,OAAO,OAAO,CAAC;AACnB,YAAA,KAAK,UAAU;AACX,gBAAA,OAAO,QAAQ,CAAC;AACpB,YAAA,KAAK,kBAAkB;AACnB,gBAAA,OAAO,gBAAgB,CAAC;AAC5B,YAAA;AACI,gBAAA,OAAO,gBAAgB,CAAC;AAC/B,SAAA;AACL,KAAC,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,CAAC,OAAsB,EAAE,aAAkC,KAAI;AAC5E,QAAA,IAAI,MAAM,EAAE,CAAC,aAAa,EAAE;AACxB,YAAA,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;AACxC,YAAA,OAAO,QAAQ,CAAC,MAAM,CAACA,cAAK,CAAC,aAAa,CAAC,cAAc,EAAE,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;AACvG,SAAA;QACD,OAAO,aAAa,EAAE,CAAC;AAC3B,KAAC,CAAA;AAED,IAAA,MAAM,QAAQ,GAAG,CAAC,OAAsB,EAAE,cAA0B,KAAI;AACpE,QAAA,IAAI,OAAO,CAAC,qBAAqB,EAAE,EAAE;YACjC,OAAO,cAAc,EAAE,CAAC;AAC3B,SAAA;QACD,OAAO,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAA;AAClE,KAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,MAAK;AAC/B,QAAA,IAAI,aAAa,CAAC;AACd,YAAA,gBAAgB,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,OAAO;AACxC,YAAA,qBAAqB,EAAE,MAAM,MAAM,EAAE,CAAC,gBAAiB;AACvD,YAAA,gBAAgB,EAAE,MAAM,MAAM,EAAE,CAAC,WAAW;YAC5C,aAAa,EAAE,MAAK;gBAChB,OAAO,MAAM,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,IAAI,EAAE,CAAC;aACnD;AACD,YAAA,SAAS,EAAE;;AAEP,gBAAA,MAAM,EAAE,CAAC,QAAQ,KAAI;AACjB,oBAAA,MAAM,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC;;AAE5B,oBAAA,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE;AAClB,wBAAA,QAAQ,EAAE,CAAC;AACd,qBAAA;iBACJ;gBACD,qBAAqB,EAAE,MAAM,0BAA0B,CAAC,OAAO,EAAE,QAAQ,EAAE;gBAC3E,kBAAkB,EAAE,MAAM,MAAM,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa;AACjE,gBAAA,qBAAqB,EAAE,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC,KAAK,CAAC,qBAAqB,GAAG,OAAO,CAAC;AACtF,aAAA;AACD,YAAA,SAAS,EAAE;AACP,gBAAA,UAAU,EAAE,MAAM,EAAE,CAAC,cAAc,CAAC,sBAAsB;AAC1D,gBAAA,QAAQ,EAAE,CAAC,OAAsB,EAAE,aAAa,KAAI;AAChD,oBAAA,MAAM,EAAE,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,MAAK;AAC5E,wBAAA,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;AACrC,qBAAC,CAAC,CAAA;iBACL;AACD,gBAAA,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,KAAI;AACnC,oBAAA,MAAM,EAAE,CAAC,cAAc,CAAC,iBAAiB,CAAC,OAAO,EAAE,MAAM,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAA;iBAC9F;AACJ,aAAA;AACJ,SAAA,CAAC,CAAA;AAEN,KAAC,CAAA;IACD,OAAO,CAAC,MAAK;AACT,QAAA,qBAAqB,EAAE,CAAC;KAC3B,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACrB,QAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;QACnB,GAAG,CAAC,gBAAgB,GAAG,0BAA0B,CAAC,OAAQ,CAAC,YAAY,EAAE,CAAC;AAC1E,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACrB,YAAA,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,YAAA,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC;AAC5B,YAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACvB,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;AAC/B,KAAC,CAAC,CAAA;AAEF,IAAA,OAAOC,IAAC,6BAA6B,EAAA,EACjC,GAAG,EAAE,0BAA0B,EAC/B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EAAE,CAAC,OAAO,IAAI,SAAS,EACtC,UAAU,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,UAAU,EACrC,cAAc,EAAE,MAAM,EAAE,CAAC,cAAc,GAAI,CAAA;AACnD,EAAC;AAiBD,MAAM,6BAA6B,GAAG,UAAU,CAAyE,CAAC,KAAK,EAAE,GAAG,KAAI;;IAEpI,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;AAC9D,IAAA,MAAM,yBAAyB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC/D,IAAA,MAAM,YAAY,GAAG,OAAO,EAAE,eAAe,EAAE,CAAC;AAChD,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAE/B,IAAA,mBAAmB,CAAC,GAAG,EAAE,MAAK;QAC1B,OAAO;AACH,YAAA,YAAY,EAAE,MAAM,yBAAyB,CAAC,OAAQ;AACtD,YAAA,QAAQ,EAAE,MAAM,QAAQ,EAAE;SAC7B,CAAA;AACL,KAAC,CAAC,CAAA;IAEF,MAAM,aAAa,GAAG,MAAK;AACvB,QAAA,IAAI,UAAU,CAAC,WAAW,KAAK,SAAS,EAAE;YACtC,OAAOA,GAAA,CAAC,OAAO,EAAK,EAAA,GAAA,cAAc,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,CAAA;AACrE,SAAA;QACD,OAAOA,GAAA,CAAC,OAAO,EAAK,EAAA,GAAA,cAAc,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,CAAA;AACtE,KAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,MAAK;AAC3B,QAAA,IAAG,MAAM,CAAC,GAAG,EAAE,UAAU,EAAE;AACvB,YAAA,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,eAAe,CAAC;AAClC,gBAAA,OAAO,EAAE,YAAY;AACxB,aAAA,CAAC,CAAA;YACF,OAAO;AACV,SAAA;QACD,KAAK,CAAC,YAAY,CAAC,CAAC;AACxB,KAAC,CAAA;IAED,QACIC,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,cAAc,CAAC,kBAAkB,EACrC,QAAA,EAAA,CAAA,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,SAAS,EAAE,KAAKD,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,cAAc,EAAE,YAAY,EAAE,cAAc,EAAA,QAAA,EAAG,aAAa,EAAE,EAAO,CAAA,EAEnH,YAAY;AACT,gBAAAC,IAAA,CAAC,UAAU,EAAC,EAAA,cAAc,EAAE,cAAc,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAED,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAC3EA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,cAAc,CAAC,eAAe,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,EAAE,EAAA,QAAA,EAAG,MAAM,CAAC,MAAM,EAAE,EAAoB,CAAA,EAAA,CACzJ,KAAM,cAAc,EAAE,eAAe,EACtC,QAAA,EAAA,CAAA,MAAM,CAAC,OAAO,EAAE,OAAEA,GAAI,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,UAAU,CAAC,WAAW,EAAA,CAAK,OAAE,MAAM,CAAC,YAAY,EAAE,EAAA,GAAA,CAAA,EAAA,CAChE,EAEjBA,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,yBAAyB,EAAE,KAAK,EAAE,YAAY,GAAG,EAAC,OAAO,EAAE,MAAM,EAAC,GAAG,SAAS,KAAM,cAAc,CAAC,qBAAqB,EAAI,CAAA,CAAA,EAAA,CACpI,EAAC;AACf,CAAC,CAAC;;;;"}
1	+ {"version":3,"file":"NestedControlRenderer.js","sources":["../../../src/components/NestedControlRenderer/NestedControlRenderer.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { NestedControl } from './NestedControl';\nimport { INestedControlRenderer, INestedControlRendererComponentProps, INestedControlRendererParameters } from './interfaces';\nimport { TextField } from '../TextField';\nimport { Decimal } from '../Decimal';\nimport { Duration } from '../Duration';\nimport { TwoOptions } from '../TwoOptions';\nimport { DateTime } from '../DateTime';\nimport { MultiSelectOptionSet } from '../MultiSelectOptionSet';\nimport { Lookup } from '../Lookup';\nimport { OptionSet } from '../OptionSet';\nimport { BaseControls } from '../../utils';\nimport { getNestedControlStyles } from './styles';\nimport { Spinner, useRerender } from '@talxis/react-components';\nimport { MessageBar, MessageBarButton, MessageBarType, Shimmer, SpinnerSize } from '@fluentui/react';\nimport ReactDOM from 'react-dom';\nimport { useControlLabels } from '../../hooks';\nimport { getDefaultNestedControlRendererTranslations } from './translations';\nimport { GridCellRenderer } from '../GridCellRenderer/GridCellRenderer';\nimport { GridColumnHeader } from '../GridColumnHeader/GridColumnHeader';\n\ninterface IRef {\n control: NestedControl \| null;\n props: INestedControlRenderer;\n controlName: string;\n componentProps: INestedControlRendererComponentProps;\n isBaseControl: boolean;\n mounted: boolean;\n controlContainer: HTMLDivElement \| null;\n}\n\nexport const NestedControlRenderer = (props: INestedControlRenderer) => {\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n const labels = useControlLabels({\n translations: props.translations,\n languageId : props.context.userSettings.languageId,\n defaultTranslations: getDefaultNestedControlRendererTranslations()\n })\n const rerender = useRerender();\n const isBaseControl = useMemo(() => {\n return BaseControls.IsBaseControl(props.parameters.ControlName);\n }, [props.parameters.ControlName]);\n\n const styles = useMemo(() => getNestedControlStyles(isBaseControl), [isBaseControl]);\n const internalControlRendererRef = useRef<IInternalNestedControlRendererRef>(null);\n const ref = useRef<Partial<IRef>>();\n \n ref.current = {\n ...ref.current,\n props: props,\n isBaseControl: isBaseControl,\n controlName: props.parameters.ControlName \n }\n\n ref.current.componentProps = onOverrideComponentProps({\n rootContainerProps: {},\n controlContainerProps: {},\n messageBarProps: {\n //@ts-ignore - typescript\n messageBarType: MessageBarType.error,\n buttonProps: {\n className: styles.messageBarBtn\n }\n },\n loadingProps: {\n containerProps: {},\n spinnerProps: {\n size: SpinnerSize.xSmall\n },\n shimmerProps: {\n styles: {\n root: styles.shimmerRoot,\n shimmerWrapper: {\n height: 32\n }\n }\n },\n },\n onOverrideRender: (control, isCustomPcfComponent, defaultRender) => defaultRender(),\n onOverrideUnmount: (control, defaultUnmount) => defaultUnmount(),\n onOverrideControlProps: (props) => props,\n });\n\n const getRef = (): IRef => {\n return ref.current as any;\n }\n\n const getBaseControl = (): any => {\n switch (getRef().controlName) {\n case 'TextField':\n return TextField\n case 'OptionSet':\n return OptionSet;\n case 'Lookup':\n return Lookup;\n case 'MultiSelectOptionSet':\n return MultiSelectOptionSet;\n case 'TwoOptions':\n return TwoOptions;\n case 'DateTime':\n return DateTime;\n case 'Decimal':\n return Decimal;\n case 'Duration':\n return Duration;\n case 'GridCellRenderer':\n return GridCellRenderer;\n case 'GridColumnHeader': {\n return GridColumnHeader;\n }\n default:\n return GridCellRenderer;\n }\n };\n\n const onRender = (control: NestedControl, defaultRender: () => Promise<void>) => {\n if (getRef().isBaseControl) {\n const controlProps = control.getProps();\n return ReactDOM.render(React.createElement(getBaseControl(), controlProps), control.getContainer());\n }\n return defaultRender();\n }\n\n const onUmount = (control: NestedControl, defaultUnmount: () => void) => {\n if (control.isMountedPcfComponent()) {\n return defaultUnmount();\n }\n return ReactDOM.unmountComponentAtNode(control.getContainer())\n }\n\n const createControlInstance = () => {\n new NestedControl({\n parentPcfContext: getRef().props.context,\n onGetContainerElement: () => getRef().controlContainer!,\n onGetControlName: () => getRef().controlName,\n onGetBindings: () => {\n return getRef().props.parameters.Bindings ?? {};\n },\n callbacks: {\n //onInit could either by sync or async\n onInit: (instance) => {\n getRef().control = instance;\n //if we are already mounted, we need to rerender\n if (getRef().mounted) {\n rerender();\n }\n },\n onControlStateChanged: () => internalControlRendererRef.current?.rerender(),\n onGetControlStates: () => getRef().props.parameters.ControlStates,\n onNotifyOutputChanged: (outputs) => getRef().props.onNotifyOutputChanged?.(outputs)\n },\n overrides: {\n onGetProps: getRef().componentProps.onOverrideControlProps,\n onRender: (control: NestedControl, defaultRender) => {\n getRef().componentProps.onOverrideRender(control, !getRef().isBaseControl, () => {\n onRender(control, defaultRender);\n })\n },\n onUnmount: (control, defaultUnmount) => {\n getRef().componentProps.onOverrideUnmount(control, () => onUmount(control, defaultUnmount))\n },\n onIsLoading: () => getRef().componentProps.onOverrideIsLoading?.()\n },\n })\n\n }\n useMemo(() => {\n createControlInstance();\n }, []);\n\n useEffect(() => {\n const ref = getRef();\n ref.mounted = true;\n ref.controlContainer = internalControlRendererRef.current!.getContainer();\n return () => {\n const ref = getRef();\n ref.control?.unmount();\n ref.controlContainer = null;\n ref.control = null;\n }\n }, []);\n\n useEffect(() => {\n getRef().control?.render();\n })\n\n return <InternalNestedControlRenderer\n ref={internalControlRendererRef}\n labels={labels}\n control={getRef().control ?? undefined}\n parameters={getRef().props.parameters}\n componentProps={getRef().componentProps} />\n}\n\ninterface IInternalNestedControlRendererProps {\n parameters: INestedControlRendererParameters;\n componentProps: INestedControlRendererComponentProps;\n labels: any;\n loadingType?: 'spinner' \| 'shimmer';\n control?: NestedControl;\n\n}\n\ninterface IInternalNestedControlRendererRef {\n getContainer: () => HTMLDivElement;\n rerender: () => void;\n}\n\n\nconst InternalNestedControlRenderer = forwardRef<IInternalNestedControlRendererRef, IInternalNestedControlRendererProps>((props, ref) => {\n //once control is defined, it is initialized\n const { control, parameters, componentProps, labels } = props;\n const customControlContainerRef = useRef<HTMLDivElement>(null);\n const errorMessage = control?.getErrorMessage();\n const rerender = useRerender();\n\n useImperativeHandle(ref, () => {\n return {\n getContainer: () => customControlContainerRef.current!,\n rerender: () => rerender()\n }\n })\n\n const renderLoading = () => {\n if (parameters.LoadingType === 'shimmer') {\n return <Shimmer {...componentProps?.loadingProps?.shimmerProps} />\n }\n return <Spinner {...componentProps?.loadingProps?.spinnerProps} />\n }\n\n const onShowErrorDialog = () => {\n if(window.Xrm?.Navigation) {\n window.Xrm.Navigation.openErrorDialog({\n message: errorMessage\n })\n return;\n }\n alert(errorMessage);\n }\n\n return (\n <div {...componentProps.rootContainerProps}>\n {(!control \|\| control.isLoading() \|\| props.componentProps.onOverrideIsLoading?.()) && <div {...componentProps?.loadingProps?.containerProps}>{renderLoading()}</div>\n }\n {errorMessage &&\n <MessageBar messageBarType={MessageBarType.error} isMultiline={false} actions={<div>\n <MessageBarButton className={componentProps.messageBarProps.buttonProps.className} onClick={() => onShowErrorDialog()}>{labels.detail()}</MessageBarButton>\n </div>} {...componentProps?.messageBarProps}>\n {labels.control()} <b>{parameters.ControlName}</b> {labels.failedToLoad()}.\n </MessageBar>\n }\n <div ref={customControlContainerRef} style={errorMessage ? {display: 'none'} : undefined} {...componentProps.controlContainerProps} />\n </div>)\n})\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/NestedControlRenderer/interfaces.d.ts CHANGED Viewed

@@ -64,6 +64,10 @@ export interface INestedControlRendererComponentProps {
      * Callback function that allows you to override the default control unmount behavior.
      */
     onOverrideUnmount: (control: NestedControl, defaultUnmount: () => void) => void;
+    /**
+     * Can be used to override the loading state of the control.
+     */
+    onOverrideIsLoading: () => boolean;
 }
 export interface IBinding {
     /**

package/dist/components/NestedControlRenderer/properties/FileProperty.js CHANGED Viewed

@@ -5,7 +5,7 @@ class FileProperty extends Property {
         const value = this.getValue();
         return {
             raw: value,
-            formatted: this.getFormattedValue() ?? ''
+            formatted: this.getFormattedValue()
         };
     }
 }

package/dist/components/NestedControlRenderer/properties/FileProperty.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileProperty.js","sources":["../../../../src/components/NestedControlRenderer/properties/FileProperty.ts"],"sourcesContent":["import { ~~FieldValue } from \"@talxis/client-libraries\";\nimport {~~ Property } from \"./Property\";\nimport { IFileProperty } from \"../../../interfaces\";\n\nexport class FileProperty extends Property {\n public getParameter(): IFileProperty {\n const value = this.getValue();\n return {\n raw: value,\n formatted: this.getFormattedValue() ~~?? ''~~\n }\n }\n}"],"names":[],"mappings":";;~~AAIM~~,MAAO,YAAa,SAAQ,QAAQ,CAAA;IAC/B,YAAY,GAAA;AACf,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,OAAO;AACH,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE~~,IAAI,EAAE~~;~~SAC5C~~,CAAA;KACJ;AACJ;;;;"}
1	+ {"version":3,"file":"FileProperty.js","sources":["../../../../src/components/NestedControlRenderer/properties/FileProperty.ts"],"sourcesContent":["import { Property } from \"./Property\";\nimport { IFileProperty } from \"../../../interfaces\";\n\nexport class FileProperty extends Property {\n public getParameter(): IFileProperty {\n const value = this.getValue();\n return {\n raw: value,\n formatted: this.getFormattedValue()\n }\n }\n}"],"names":[],"mappings":";;AAGM,MAAO,YAAa,SAAQ,QAAQ,CAAA;IAC/B,YAAY,GAAA;AACf,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,OAAO;AACH,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE;SACtC,CAAA;KACJ;AACJ;;;;"}

package/dist/components/NestedControlRenderer/properties/Property.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 /// <reference types="@types/powerapps-component-framework" />
+/// <reference types="powerapps-component-framework" />
 import { IOptions } from "../NestedControl";
 import { IBinding } from "../interfaces";
 export declare abstract class Property {

package/dist/components/OptionSet/OptionSet.js CHANGED Viewed

@@ -16,6 +16,7 @@ const OptionSet = (props) => {
     const boundValue = parameters.value;
     const { Options } = parameters.value.attributes;
     const context = props.context;
+    const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;
     const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
     const comboBoxOptions = Options.map(option => ({
         key: option.Value.toString(),
@@ -45,10 +46,10 @@ const OptionSet = (props) => {
         useComboBoxAsMenuWidth: true,
         hideErrorMessage: !parameters.ShowErrorMessage?.raw,
         styles: { root: styles.root, callout: styles.callout },
-        onRenderContainer: (containerProps, defaultRender) => jsx(ThemeProvider, { theme: props.context.fluentDesignLanguage?.applicationTheme, children: defaultRender?.(containerProps) }),
-        calloutProps: {
-            theme: props.context.fluentDesignLanguage?.applicationTheme
-        },
+        onRenderContainer: (containerProps, defaultRender) => jsx(ThemeProvider, { theme: applicationTheme, children: defaultRender?.(containerProps) }),
+        calloutProps: applicationTheme ? {
+            theme: applicationTheme
+        } : undefined,
         ...(parameters.EnableCopyButton?.raw === true && {
             clickToCopyProps: {
                 key: 'copy',

package/dist/components/OptionSet/OptionSet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useComboBoxTheme } from './useComboBoxTheme';\nimport { getComboBoxStyles } from './styles';\nimport { onRenderColorfulOption } from './shared';\n\n\nexport const OptionSet = (props: IOptionSet) => {\n const componentRef = useRef<IComboBox>(null);\n const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n const styles = useMemo(() => getComboBoxStyles(sizing.width, sizing.height), [sizing.width, sizing.height]);\n const [colorFeatureEnabled, overridenTheme] = useComboBoxTheme(props, theme);\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const { Options } = parameters.value.attributes;\n const context = props.context;\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n key: option.Value.toString(),\n text: option.Label,\n title: option.Label\n }));\n\n useEffect(() => {\n if (parameters.AutoFocus?.raw) {\n componentRef.current?.focus(true);\n }\n }, []);\n\n const handleChange = (option?: IComboBoxOption \| null): void => {\n let value = undefined;\n if (option) {\n value = parseInt(option.key as string);\n }\n onNotifyOutputChanged({\n value: value\n });\n };\n\n const componentProps = onOverrideComponentProps({\n componentRef: componentRef,\n options: comboBoxOptions,\n readOnly: context.mode.isControlDisabled,\n selectedKey: boundValue.raw?.toString() ?? null,\n errorMessage: boundValue.errorMessage,\n useComboBoxAsMenuWidth: true,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n styles: { root: styles.root, callout: styles.callout },\n onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={~~props.context.fluentDesignLanguage?.~~applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\n calloutProps: {\n theme: ~~props.context.fluentDesignLanguage?.~~applicationTheme\n },\n ...(parameters.EnableCopyButton?.raw === true && {\n clickToCopyProps: {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy',\n },\n },\n }),\n ...(parameters.EnableDeleteButton?.raw === true && {\n deleteButtonProps: {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel',\n },\n onClick: (e, value) => {\n handleChange(null);\n },\n },\n }),\n onChange: (e, option) => handleChange(option),\n onRenderOption: colorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,\n });\n\n return (\n <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n <ComboBox\n {...componentProps} />\n </ThemeProvider>);\n};"],"names":["_jsx"],"mappings":";;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,KAAiB,KAAI;AAC3C,IAAA,MAAM,YAAY,GAAG,MAAM,CAAY,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAChF,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,iBAAiB,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAC5G,IAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,GAAG,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC7E,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;~~AAC9B~~,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAEtF,MAAM,eAAe,GAAsB,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;AAC9D,QAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;QAC5B,IAAI,EAAE,MAAM,CAAC,KAAK;QAClB,KAAK,EAAE,MAAM,CAAC,KAAK;AACtB,KAAA,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;AAC3B,YAAA,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;AACrC,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,YAAY,GAAG,CAAC,MAA+B,KAAU;QAC3D,IAAI,KAAK,GAAG,SAAS,CAAC;AACtB,QAAA,IAAI,MAAM,EAAE;AACR,YAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAa,CAAC,CAAC;AAC1C,SAAA;AACD,QAAA,qBAAqB,CAAC;AAClB,YAAA,KAAK,EAAE,KAAK;AACf,SAAA,CAAC,CAAC;AACP,KAAC,CAAC;IAEF,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,YAAY,EAAE,YAAY;AAC1B,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB;QACxC,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,IAAI;QAC/C,YAAY,EAAE,UAAU,CAAC,YAAY;AACrC,QAAA,sBAAsB,EAAE,IAAI;AAC5B,QAAA,gBAAgB,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG;AACnD,QAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE;QACtD,iBAAiB,EAAE,CAAC,cAAc,EAAE,aAAa,KAAKA,~~GAAA~~,~~CAAC~~,aAAa,~~EAAA~~,~~EAAC,~~KAAK,EAAE,~~KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,~~gBAAgB,EAAG,QAAA,EAAA,aAAa,GAAG,cAAc,CAAC,EAAiB,CAAA;~~AACnL~~,QAAA,YAAY,EAAE;~~AACV~~,YAAA,KAAK,EAAE,~~KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,~~gBAAgB;~~AAC9D~~,~~SAAA~~;~~QACD~~,IAAI,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,IAAI,IAAI;AAC7C,YAAA,gBAAgB,EAAE;AACd,gBAAA,GAAG,EAAE,MAAM;AACX,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,MAAM;AACnB,iBAAA;AACJ,aAAA;SACJ,CAAC;QACF,IAAI,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,IAAI,IAAI;AAC/C,YAAA,iBAAiB,EAAE;AACf,gBAAA,GAAG,EAAE,QAAQ;AACb,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;AACrB,iBAAA;AACD,gBAAA,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;oBAClB,YAAY,CAAC,IAAI,CAAC,CAAC;iBACtB;AACJ,aAAA;SACJ,CAAC;QACF,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,MAAM,CAAC;QAC7C,cAAc,EAAE,mBAAmB,GAAG,CAAC,MAAM,KAAK,sBAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,SAAS;AAC/G,KAAA,CAAC,CAAC;AAEH,IAAA,QACIA,GAAC,CAAA,aAAa,IAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAC,MAAM,EAAA,QAAA,EAChDA,IAAC,QAAQ,EAAA,EAAA,GACD,cAAc,EAAI,CAAA,EAAA,CACd,EAAE;AAC1B;;;;"}
1	+ {"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useComboBoxTheme } from './useComboBoxTheme';\nimport { getComboBoxStyles } from './styles';\nimport { onRenderColorfulOption } from './shared';\n\n\nexport const OptionSet = (props: IOptionSet) => {\n const componentRef = useRef<IComboBox>(null);\n const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n const styles = useMemo(() => getComboBoxStyles(sizing.width, sizing.height), [sizing.width, sizing.height]);\n const [colorFeatureEnabled, overridenTheme] = useComboBoxTheme(props, theme);\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const { Options } = parameters.value.attributes;\n const context = props.context;\n const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n key: option.Value.toString(),\n text: option.Label,\n title: option.Label\n }));\n\n useEffect(() => {\n if (parameters.AutoFocus?.raw) {\n componentRef.current?.focus(true);\n }\n }, []);\n\n const handleChange = (option?: IComboBoxOption \| null): void => {\n let value = undefined;\n if (option) {\n value = parseInt(option.key as string);\n }\n onNotifyOutputChanged({\n value: value\n });\n };\n\n const componentProps = onOverrideComponentProps({\n componentRef: componentRef,\n options: comboBoxOptions,\n readOnly: context.mode.isControlDisabled,\n selectedKey: boundValue.raw?.toString() ?? null,\n errorMessage: boundValue.errorMessage,\n useComboBoxAsMenuWidth: true,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n styles: { root: styles.root, callout: styles.callout },\n onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\n calloutProps: applicationTheme ? {\n theme: applicationTheme\n } : undefined,\n ...(parameters.EnableCopyButton?.raw === true && {\n clickToCopyProps: {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy',\n },\n },\n }),\n ...(parameters.EnableDeleteButton?.raw === true && {\n deleteButtonProps: {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel',\n },\n onClick: (e, value) => {\n handleChange(null);\n },\n },\n }),\n onChange: (e, option) => handleChange(option),\n onRenderOption: colorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,\n });\n\n return (\n <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n <ComboBox\n {...componentProps} />\n </ThemeProvider>);\n};"],"names":["_jsx"],"mappings":"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"}

package/dist/components/OptionSet/shared.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 /// <reference types="@types/powerapps-component-framework" />
+/// <reference types="powerapps-component-framework" />
 /// <reference types="react" />
 import { IComboBoxOption, ITheme } from "@fluentui/react";
 export declare const onRenderColorfulOption: (options: ComponentFramework.PropertyHelper.OptionMetadata[], option: IComboBoxOption | undefined, theme: ITheme) => JSX.Element | null;

package/dist/components/Ribbon/Ribbon.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IRibbon } from "./interfaces";
+export declare const Ribbon: (props: IRibbon) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Ribbon/Ribbon.js ADDED Viewed

@@ -0,0 +1,97 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRerender, CommandBar } from '@talxis/react-components';
+import { useMemo } from 'react';
+import { getRibbonStyles } from './styles.js';
+import { Shimmer } from '@fluentui/react';
+import { useControl } from '../../hooks/useControl.js';
+const fluentIconMap = {
+    'Activate': 'ActivateOrders',
+    'DeActivate': 'DeactivateOrders',
+    'ExportToExcel': 'ExcelDocument',
+    'ConnectionToOther': 'Assign',
+    'EmailLink': 'Link',
+    'Flows': 'Dataflows',
+    'RunReport': 'CRMReport',
+    'Report': 'CRMReport',
+    'Remove': 'Delete',
+    'WordTemplates': 'WordDocument',
+    'DocumentTemplates': 'ExcelDocument',
+    'New': 'Add',
+};
+const Ribbon = (props) => {
+    useControl('Ribbon', props, {});
+    const isDisabled = props.context.mode.isControlDisabled;
+    const commands = props.parameters.Commands?.raw ?? [];
+    const isLoading = props.parameters.Loading?.raw ?? false;
+    const styles = useMemo(() => getRibbonStyles(), []);
+    const pendingActionsSet = useMemo(() => new Set(), []);
+    const rerender = useRerender();
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const componentProps = onOverrideComponentProps({
+        onRenderCommandBar: (props, defaultRender) => defaultRender(props),
+        onRenderLoading: (props, defaultRender) => defaultRender(props)
+    });
+    const onCommandClick = async (command) => {
+        pendingActionsSet.add(command.commandId);
+        rerender();
+        try {
+            await command.execute();
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            pendingActionsSet.delete(command.commandId);
+            rerender();
+        }
+    };
+    const getCommandBarItems = () => {
+        const result = [];
+        commands.map(command => {
+            if (!command.shouldBeVisible) {
+                return;
+            }
+            let iconName = command.icon;
+            if (fluentIconMap[iconName]) {
+                iconName = fluentIconMap[iconName];
+            }
+            result.push({
+                key: command.commandId,
+                text: command.label,
+                disabled: !command.canExecute || pendingActionsSet.has(command.commandId) || isDisabled,
+                ["data-id"]: command?.commandButtonId,
+                ["data-command"]: command?.commandId,
+                title: command?.tooltip,
+                iconProps: {
+                    iconName: iconName
+                },
+                onClick: () => { onCommandClick(command); },
+                //TODO: svg support
+                //onRenderIcon: iconName?.includes('svg') ? () => <Icon name={iconName} /> : undefined,
+            });
+        });
+        return result;
+    };
+    if (isLoading) {
+        return componentProps.onRenderLoading({
+            styles: {
+                root: styles.shimmerRoot,
+                shimmerWrapper: styles.shimmerWrapper
+            }
+        }, (props) => {
+            return jsx(Shimmer, { ...props });
+        });
+    }
+    else {
+        return componentProps.onRenderCommandBar({
+            className: styles.ribbonRoot,
+            items: getCommandBarItems(),
+        }, (props) => {
+            return jsx(CommandBar, { ...props });
+        });
+    }
+};
+export { Ribbon };
+//# sourceMappingURL=Ribbon.js.map

package/dist/components/Ribbon/Ribbon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Ribbon.js","sources":["../../../src/components/Ribbon/Ribbon.tsx"],"sourcesContent":["import { CommandBar, ICommandBarItemProps, useRerender } from \"@talxis/react-components\";\nimport { useControl } from \"../../hooks\"\nimport { IRibbon } from \"./interfaces\"\nimport { useMemo } from \"react\";\nimport { getRibbonStyles } from \"./styles\";\nimport { ICommand } from \"@talxis/client-libraries\";\nimport { Shimmer } from \"@fluentui/react\";\n\nconst fluentIconMap: { [key: string]: string } = {\n 'Activate': 'ActivateOrders',\n 'DeActivate': 'DeactivateOrders',\n 'ExportToExcel': 'ExcelDocument',\n 'ConnectionToOther': 'Assign',\n 'EmailLink': 'Link',\n 'Flows': 'Dataflows',\n 'RunReport': 'CRMReport',\n 'Report': 'CRMReport',\n 'Remove': 'Delete',\n 'WordTemplates': 'WordDocument',\n 'DocumentTemplates': 'ExcelDocument',\n 'New': 'Add',\n}\n\nexport const Ribbon = (props: IRibbon) => {\n const { className } = useControl('Ribbon', props, {});\n const isDisabled = props.context.mode.isControlDisabled;\n const commands = props.parameters.Commands?.raw ?? [];\n const isLoading = props.parameters.Loading?.raw ?? false;\n const styles = useMemo(() => getRibbonStyles(), []);\n const pendingActionsSet = useMemo(() => new Set<string>(), []);\n const rerender = useRerender();\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n const componentProps = onOverrideComponentProps({\n onRenderCommandBar: (props, defaultRender) => defaultRender(props),\n onRenderLoading: (props, defaultRender) => defaultRender(props)\n })\n\n const onCommandClick = async (command: ICommand) => {\n pendingActionsSet.add(command.commandId);\n rerender();\n try {\n await command.execute();\n }\n catch (err) {\n console.error(err);\n }\n finally {\n pendingActionsSet.delete(command.commandId);\n rerender();\n }\n }\n\n const getCommandBarItems = (): ICommandBarItemProps[] => {\n const result: ICommandBarItemProps[] = [];\n commands.map(command => {\n if (!command.shouldBeVisible) {\n return;\n }\n let iconName = command.icon;\n if (fluentIconMap[iconName]) {\n iconName = fluentIconMap[iconName];\n }\n result.push({\n key: command.commandId,\n text: command.label,\n disabled: !command.canExecute || pendingActionsSet.has(command.commandId) || isDisabled,\n [\"data-id\"]: command?.commandButtonId,\n [\"data-command\"]: command?.commandId,\n title: command?.tooltip,\n iconProps: {\n iconName: iconName\n },\n onClick: () => { onCommandClick(command) },\n //TODO: svg support\n //onRenderIcon: iconName?.includes('svg') ? () => <Icon name={iconName} /> : undefined,\n })\n })\n return result;\n }\n\n if (isLoading) {\n return componentProps.onRenderLoading({\n styles: {\n root: styles.shimmerRoot,\n shimmerWrapper: styles.shimmerWrapper\n }\n }, (props) => {\n return <Shimmer {...props} />\n })\n }\n else {\n return componentProps.onRenderCommandBar({\n className: styles.ribbonRoot,\n items: getCommandBarItems(),\n }, (props) => {\n return <CommandBar {...props} />\n })\n }\n\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Ribbon/RibbonModel.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare class RibbonModel {
+    getIconUrl(iconName: string): string;
+    getIconType(iconName: string): 'url' | 'fluent';
+}

package/dist/components/Ribbon/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ICommand } from "@talxis/client-libraries";
+import { IControl } from "../../interfaces/context";
+import { ICommandBarProps } from "@talxis/react-components";
+import { ITwoOptionsProperty } from "../../interfaces";
+import { IShimmerProps } from "@fluentui/react";
+export interface IRibbon extends IControl<IRibbonParameters, any, any, IRibbonComponentProps> {
+}
+export interface IRibbonParameters {
+    Commands: {
+        raw: ICommand[];
+    };
+    Loading: Omit<ITwoOptionsProperty, 'attributes'>;
+}
+interface IRibbonComponentProps {
+    onRenderLoading: (props: IShimmerProps, defaultRender: (props: IShimmerProps) => React.ReactElement) => React.ReactElement;
+    onRenderCommandBar: (props: ICommandBarProps, defaultRender: (props: ICommandBarProps) => React.ReactElement) => React.ReactElement;
+}
+export {};

package/dist/components/Ribbon/styles.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export declare const getRibbonStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    ribbonRoot: {
+        flex: number;
+    };
+    shimmerRoot: {
+        width: string;
+    };
+    shimmerWrapper: {
+        height: number;
+    };
+}>;

package/dist/components/Ribbon/styles.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { mergeStyleSets } from '@fluentui/react';
+const getRibbonStyles = () => {
+    return mergeStyleSets({
+        ribbonRoot: {
+            flex: 1
+        },
+        shimmerRoot: {
+            width: '100%',
+        },
+        shimmerWrapper: {
+            height: 44
+        }
+    });
+};
+export { getRibbonStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Ribbon/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../src/components/Ribbon/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getRibbonStyles = () => {\n return mergeStyleSets({\n ribbonRoot: {\n flex: 1\n },\n shimmerRoot: {\n width: '100%',\n },\n shimmerWrapper: {\n height: 44\n }\n })\n}"],"names":[],"mappings":";;AAEO,MAAM,eAAe,GAAG,MAAK;AAChC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,UAAU,EAAE;AACR,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/TextField/TextField.js CHANGED Viewed

@@ -113,7 +113,7 @@ const TextField = (props) => {
             setValue(value);
         }
     });
-    return (jsx(ThemeProvider, { style: isTextArea ? { height: '100%' } : undefined, applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
+    return (jsx(ThemeProvider, { applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
 };
 export { TextField };

package/dist/components/TextField/TextField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\~~nimport { NestedControlRenderer } from \"../NestedControlRenderer/NestedControlRenderer\";\~~n\nexport const TextField = (props: ITextField) => {\n const context = props.context;\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string \| undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n const getInputType = () => {\n switch (boundValue.type) {\n case 'SingleLine.Email': {\n return 'email';\n }\n case 'SingleLine.URL': {\n return 'url';\n }\n case 'SingleLine.Phone': {\n return 'tel';\n }\n }\n return \"text\";\n }\n const getSuffixItems = (): ICommandBarItemProps[] \| undefined => {\n if (parameters.EnableTypeSuffix?.raw === false) {\n return undefined;\n }\n const disabled = boundValue.error \|\| !boundValue.raw\n switch (boundValue.type) {\n case 'SingleLine.Email': {\n return [{\n key: 'sendMail',\n disabled: disabled,\n iconProps: {\n iconName: 'Mail'\n },\n href: `mailto:${boundValue.raw}`\n }]\n }\n case 'SingleLine.Phone': {\n return [{\n key: 'call',\n disabled: disabled,\n iconProps: {\n iconName: 'Phone'\n },\n href: `tel:${boundValue.raw}`\n }]\n }\n case 'SingleLine.URL': {\n return [{\n key: 'goToPage',\n disabled: disabled,\n iconProps: {\n iconName: 'Globe'\n },\n target: '_blank',\n href: boundValue.raw!\n }]\n }\n }\n return undefined;\n }\n\n const isTextArea = (() => {\n switch(parameters.value.type) {\n case DataTypes.Multiple:\n case DataTypes.SingleLineTextArea: {\n return true;\n }\n }\n return false;\n })()\n\n const componentProps = onOverrideComponentProps({\n readOnly: context.mode.isControlDisabled,\n resizable: false,\n type: getInputType(),\n multiline: isTextArea,\n autoFocus: parameters.AutoFocus?.raw,\n styles: {\n fieldGroup: {\n height: sizing.height,\n width: sizing.width\n }\n },\n errorMessage: boundValue.errorMessage,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n suffixItems: getSuffixItems(),\n deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => setValue(undefined)\n } : undefined,\n clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy'\n }\n } : undefined,\n value: value ?? \"\",\n onBlur: () => {\n onNotifyOutputChanged({\n value: value ?? undefined\n });\n },\n onChange: (e, value) => {\n setValue(value);\n }\n })\n return (\n <ThemeProvider ~~style={isTextArea ? { height: '100%' } : undefined}~~ applyTo=\"none\" theme={theme}>\n <TextFieldBase {...componentProps} />\n </ThemeProvider>\n );\n};"],"names":["_jsx","TextFieldBase"],"mappings":";;;;;;~~AAOa~~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~~GAAA~~,~~CAAC~~,aAAa,~~EAAA~~,~~EAAC,KAAK,EAAE,UAAU,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,~~OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,~~EAC1F~~,QAAA,~~EAAAA~~,~~GAAA~~,~~CAACC,~~WAAa,~~EAAK~~,EAAA,~~GAAA~~,cAAc,EAAI,CAAA,EAAA,CACzB,EAClB;AACN;;;;"}
1	+ {"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\n\nexport const TextField = (props: ITextField) => {\n const context = props.context;\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string \| undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n const getInputType = () => {\n switch (boundValue.type) {\n case 'SingleLine.Email': {\n return 'email';\n }\n case 'SingleLine.URL': {\n return 'url';\n }\n case 'SingleLine.Phone': {\n return 'tel';\n }\n }\n return \"text\";\n }\n const getSuffixItems = (): ICommandBarItemProps[] \| undefined => {\n if (parameters.EnableTypeSuffix?.raw === false) {\n return undefined;\n }\n const disabled = boundValue.error \|\| !boundValue.raw\n switch (boundValue.type) {\n case 'SingleLine.Email': {\n return [{\n key: 'sendMail',\n disabled: disabled,\n iconProps: {\n iconName: 'Mail'\n },\n href: `mailto:${boundValue.raw}`\n }]\n }\n case 'SingleLine.Phone': {\n return [{\n key: 'call',\n disabled: disabled,\n iconProps: {\n iconName: 'Phone'\n },\n href: `tel:${boundValue.raw}`\n }]\n }\n case 'SingleLine.URL': {\n return [{\n key: 'goToPage',\n disabled: disabled,\n iconProps: {\n iconName: 'Globe'\n },\n target: '_blank',\n href: boundValue.raw!\n }]\n }\n }\n return undefined;\n }\n\n const isTextArea = (() => {\n switch(parameters.value.type) {\n case DataTypes.Multiple:\n case DataTypes.SingleLineTextArea: {\n return true;\n }\n }\n return false;\n })()\n\n const componentProps = onOverrideComponentProps({\n readOnly: context.mode.isControlDisabled,\n resizable: false,\n type: getInputType(),\n multiline: isTextArea,\n autoFocus: parameters.AutoFocus?.raw,\n styles: {\n fieldGroup: {\n height: sizing.height,\n width: sizing.width\n }\n },\n errorMessage: boundValue.errorMessage,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n suffixItems: getSuffixItems(),\n deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => setValue(undefined)\n } : undefined,\n clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy'\n }\n } : undefined,\n value: value ?? \"\",\n onBlur: () => {\n onNotifyOutputChanged({\n value: value ?? undefined\n });\n },\n onChange: (e, value) => {\n setValue(value);\n }\n })\n return (\n <ThemeProvider applyTo=\"none\" theme={theme}>\n <TextFieldBase {...componentProps} />\n </ThemeProvider>\n );\n};"],"names":["_jsx","TextFieldBase"],"mappings":";;;;;;AAMa,MAAA,SAAS,GAAG,CAAC,KAAiB,KAAI;AAC3C,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC;AACpC,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AACtF,IAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,GAAG,oBAAoB,CAAmE,WAAW,EAAE,KAAK,CAAC,CAAC;IAE7K,MAAM,YAAY,GAAG,MAAK;QACtB,QAAQ,UAAU,CAAC,IAAI;YACnB,KAAK,kBAAkB,EAAE;AACrB,gBAAA,OAAO,OAAO,CAAC;AAClB,aAAA;YACD,KAAK,gBAAgB,EAAE;AACnB,gBAAA,OAAO,KAAK,CAAC;AAChB,aAAA;YACD,KAAK,kBAAkB,EAAE;AACrB,gBAAA,OAAO,KAAK,CAAC;AAChB,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,CAAA;IACD,MAAM,cAAc,GAAG,MAAyC;AAC5D,QAAA,IAAI,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,KAAK,EAAE;AAC5C,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;QACD,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,GAAG,CAAA;QACpD,QAAQ,UAAU,CAAC,IAAI;YACnB,KAAK,kBAAkB,EAAE;AACrB,gBAAA,OAAO,CAAC;AACJ,wBAAA,GAAG,EAAE,UAAU;AACf,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,SAAS,EAAE;AACP,4BAAA,QAAQ,EAAE,MAAM;AACnB,yBAAA;AACD,wBAAA,IAAI,EAAE,CAAA,OAAA,EAAU,UAAU,CAAC,GAAG,CAAE,CAAA;AACnC,qBAAA,CAAC,CAAA;AACL,aAAA;YACD,KAAK,kBAAkB,EAAE;AACrB,gBAAA,OAAO,CAAC;AACJ,wBAAA,GAAG,EAAE,MAAM;AACX,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,SAAS,EAAE;AACP,4BAAA,QAAQ,EAAE,OAAO;AACpB,yBAAA;AACD,wBAAA,IAAI,EAAE,CAAA,IAAA,EAAO,UAAU,CAAC,GAAG,CAAE,CAAA;AAChC,qBAAA,CAAC,CAAA;AACL,aAAA;YACD,KAAK,gBAAgB,EAAE;AACnB,gBAAA,OAAO,CAAC;AACJ,wBAAA,GAAG,EAAE,UAAU;AACf,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,SAAS,EAAE;AACP,4BAAA,QAAQ,EAAE,OAAO;AACpB,yBAAA;AACD,wBAAA,MAAM,EAAE,QAAQ;wBAChB,IAAI,EAAE,UAAU,CAAC,GAAI;AACxB,qBAAA,CAAC,CAAA;AACL,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,SAAS,CAAC;AACrB,KAAC,CAAA;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,MAAK;AACrB,QAAA,QAAO,UAAU,CAAC,KAAK,CAAC,IAAI;YACxB,KAAK,SAAS,CAAC,QAAQ,CAAC;AACxB,YAAA,KAAK,SAAS,CAAC,kBAAkB,EAAE;AAC/B,gBAAA,OAAO,IAAI,CAAC;AACf,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;KAChB,GAAG,CAAA;IAEJ,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB;AACxC,QAAA,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,YAAY,EAAE;AACpB,QAAA,SAAS,EAAE,UAAU;AACrB,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,GAAG;AACpC,QAAA,MAAM,EAAE;AACJ,YAAA,UAAU,EAAE;gBACR,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;AACtB,aAAA;AACJ,SAAA;QACD,YAAY,EAAE,UAAU,CAAC,YAAY;AACrC,QAAA,gBAAgB,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG;QACnD,WAAW,EAAE,cAAc,EAAE;QAC7B,iBAAiB,EAAE,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,IAAI,GAAG;AAC7D,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;AACD,YAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,SAAS,CAAC;SACrC,GAAG,SAAS;QACb,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,IAAI,GAAG;AAC1D,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,MAAM;AACnB,aAAA;SACJ,GAAG,SAAS;QACb,KAAK,EAAE,KAAK,IAAI,EAAE;QAClB,MAAM,EAAE,MAAK;AACT,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,KAAK,IAAI,SAAS;AAC5B,aAAA,CAAC,CAAC;SACN;AACD,QAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;SACnB;AACJ,KAAA,CAAC,CAAA;AACF,IAAA,QACIA,GAAC,CAAA,aAAa,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACtCA,IAACC,WAAa,EAAA,EAAA,GAAK,cAAc,EAAI,CAAA,EAAA,CACzB,EAClB;AACN;;;;"}

package/dist/components/index.js CHANGED Viewed

@@ -1,10 +1,8 @@
 export { DatasetControl } from './DatasetControl/DatasetControl.js';
-export { DatasetPaging } from './DatasetControl/Paging/DatasetPaging.js';
-export { Paging } from './DatasetControl/Paging/Paging.js';
 export { DateTime } from './DateTime/DateTime.js';
 export { useDateTime } from './DateTime/hooks/useDateTime.js';
 export { Decimal } from './Decimal/Decimal.js';
-export { Grid } from './Grid/Grid.js';
+export { Grid } from './Grid/grid/Grid.js';
 export { GridCellRenderer } from './GridCellRenderer/GridCellRenderer.js';
 export { Lookup } from './Lookup/Lookup.js';
 export { useLookup } from './Lookup/hooks/useLookup.js';

package/dist/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/hooks/useControl.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export interface IControlController<TTranslations, TOutputs> {
         width?: number;
         height?: number;
     };
+    className: string;
     theme: ITheme;
     onNotifyOutputChanged: (outputs: TOutputs) => void;
 }

package/dist/hooks/useControl.js CHANGED Viewed

@@ -56,6 +56,7 @@ const useControl = (name, props, defaultTranslations) => {
         props.onNotifyOutputChanged?.(outputs);
     };
     return {
+        className: `talxis__baseControl__${name}`,
         labels,
         sizing,
         theme: useControlTheme(context.fluentDesignLanguage),

package/dist/hooks/useControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { useControlTheme } from \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport { IDefaultTranslations, ITranslation, useControlLabels } from \"./useControlLabels\";\n\nexport interface IControlController<TTranslations, TOutputs> {\n labels: Required<ITranslation<TTranslations>>,\n sizing: {\n width?: number,\n height?: number\n },\n theme: ITheme;\n onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/*\n Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n const context = props.context;\n const parametersRef = useRef<TParameters>(props.parameters);\n const sizing = useControlSizing(props.context.mode);\n const labels = useControlLabels({\n languageId: context.userSettings.languageId,\n translations: props.translations,\n defaultTranslations\n });\n\n useEffect(() => {\n parametersRef.current = props.parameters;\n }, [props.parameters]);\n\n const onNotifyOutputChanged = (outputs: TOutputs) => {\n let isDirty = false;\n for (let [key, outputValue] of Object.entries(outputs)) {\n let parameterValue = parametersRef.current[key]?.raw;\n if(parameterValue instanceof Date) {\n parameterValue = dayjs(parameterValue).startOf('minute').toDate();\n }\n if (!deepEqual(parameterValue, outputValue)) {\n if (outputValue === null) {\n outputValue = undefined;\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (outputValue === \"\") {\n outputValue = undefined\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (parameterValue === null) {\n parameterValue = undefined;\n }\n if (parameterValue === outputValue) {\n continue\n }\n isDirty = true;\n break;\n }\n }\n if (!isDirty) {\n return;\n }\n //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n props.onNotifyOutputChanged?.(outputs);\n };\n \n return {\n labels,\n sizing,\n theme: useControlTheme(context.fluentDesignLanguage),\n onNotifyOutputChanged\n }\n};\n"],"names":[],"mappings":";;;;;;;~~AAkBA~~;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;AACvQ,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAC5B,QAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU;QAC3C,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,mBAAmB;AACtB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AAEvB,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAiB,KAAI;QAChD,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,QAAA,KAAK,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpD,IAAI,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;YACrD,IAAG,cAAc,YAAY,IAAI,EAAE;AAC/B,gBAAA,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACrE,aAAA;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;gBACzC,IAAI,WAAW,KAAK,IAAI,EAAE;oBACtB,WAAW,GAAG,SAAS,CAAC;;AAExB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,WAAW,KAAK,EAAE,EAAE;oBACpB,WAAW,GAAG,SAAS,CAAA;;AAEvB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,cAAc,KAAK,IAAI,EAAE;oBACzB,cAAc,GAAG,SAAS,CAAC;AAC9B,iBAAA;gBACD,IAAI,cAAc,KAAK,WAAW,EAAE;oBAChC,SAAQ;AACX,iBAAA;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;AACT,aAAA;AACJ,SAAA;QACD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;AACV,SAAA;;AAED,QAAA,KAAK,CAAC,qBAAqB,GAAG,OAAO,CAAC,CAAC;AAC3C,KAAC,CAAC;IAEF,OAAO;QACH,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}
1	+ {"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { useControlTheme } from \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport { IDefaultTranslations, ITranslation, useControlLabels } from \"./useControlLabels\";\n\nexport interface IControlController<TTranslations, TOutputs> {\n labels: Required<ITranslation<TTranslations>>,\n sizing: {\n width?: number,\n height?: number\n },\n className: string;\n theme: ITheme;\n onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/*\n Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n const context = props.context;\n const parametersRef = useRef<TParameters>(props.parameters);\n const sizing = useControlSizing(props.context.mode);\n const labels = useControlLabels({\n languageId: context.userSettings.languageId,\n translations: props.translations,\n defaultTranslations\n });\n\n useEffect(() => {\n parametersRef.current = props.parameters;\n }, [props.parameters]);\n\n const onNotifyOutputChanged = (outputs: TOutputs) => {\n let isDirty = false;\n for (let [key, outputValue] of Object.entries(outputs)) {\n let parameterValue = parametersRef.current[key]?.raw;\n if(parameterValue instanceof Date) {\n parameterValue = dayjs(parameterValue).startOf('minute').toDate();\n }\n if (!deepEqual(parameterValue, outputValue)) {\n if (outputValue === null) {\n outputValue = undefined;\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (outputValue === \"\") {\n outputValue = undefined\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (parameterValue === null) {\n parameterValue = undefined;\n }\n if (parameterValue === outputValue) {\n continue\n }\n isDirty = true;\n break;\n }\n }\n if (!isDirty) {\n return;\n }\n //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n props.onNotifyOutputChanged?.(outputs);\n };\n \n return {\n className: `talxis__baseControl__${name}`,\n labels,\n sizing,\n theme: useControlTheme(context.fluentDesignLanguage),\n onNotifyOutputChanged\n }\n};\n"],"names":[],"mappings":";;;;;;;AAmBA;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;AACvQ,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAC5B,QAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU;QAC3C,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,mBAAmB;AACtB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AAEvB,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAiB,KAAI;QAChD,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,QAAA,KAAK,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpD,IAAI,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;YACrD,IAAG,cAAc,YAAY,IAAI,EAAE;AAC/B,gBAAA,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACrE,aAAA;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;gBACzC,IAAI,WAAW,KAAK,IAAI,EAAE;oBACtB,WAAW,GAAG,SAAS,CAAC;;AAExB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,WAAW,KAAK,EAAE,EAAE;oBACpB,WAAW,GAAG,SAAS,CAAA;;AAEvB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,cAAc,KAAK,IAAI,EAAE;oBACzB,cAAc,GAAG,SAAS,CAAC;AAC9B,iBAAA;gBACD,IAAI,cAAc,KAAK,WAAW,EAAE;oBAChC,SAAQ;AACX,iBAAA;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;AACT,aAAA;AACJ,SAAA;QACD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;AACV,SAAA;;AAED,QAAA,KAAK,CAAC,qBAAqB,GAAG,OAAO,CAAC,CAAC;AAC3C,KAAC,CAAC;IAEF,OAAO;QACH,SAAS,EAAE,CAAwB,qBAAA,EAAA,IAAI,CAAE,CAAA;QACzC,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}

package/dist/hooks/useControlSizing.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 /// <reference types="@types/powerapps-component-framework" />
+/// <reference types="powerapps-component-framework" />
 export declare const useControlSizing: (mode: ComponentFramework.Mode) => {
     height?: number;
     width?: number;

package/dist/hooks/useEventEmitter.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { IEventEmitter } from "@talxis/client-libraries";
2	+ export declare const useEventEmitter: <T extends { [K in keyof T]: (...args: any[]) => any; }>(emitter: IEventEmitter<T>, event: keyof T, callback: T[keyof T]) => void;

package/dist/hooks/useEventEmitter.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { useRef, useCallback, useEffect } from 'react';
+const useEventEmitter = (emitter, event, callback) => {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    const memoizedCallback = useCallback((...args) => {
+        callbackRef.current(...args);
+    }, []);
+    useEffect(() => {
+        emitter.addEventListener(event, memoizedCallback);
+        return () => {
+            emitter.removeEventListener(event, memoizedCallback);
+        };
+    }, []);
+};
+export { useEventEmitter };
+//# sourceMappingURL=useEventEmitter.js.map

package/dist/hooks/useEventEmitter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEventEmitter.js","sources":["../../src/hooks/useEventEmitter.ts"],"sourcesContent":["import { IEventEmitter } from \"@talxis/client-libraries\";\nimport { useCallback, useEffect, useRef } from \"react\";\n\nexport const useEventEmitter = <T extends { [K in keyof T]: (...args: any[]) => any }>(emitter: IEventEmitter<T>, event: keyof T, callback: T[keyof T]) => {\n const callbackRef = useRef(callback);\n callbackRef.current = callback;\n\n const memoizedCallback = useCallback((...args) => {\n callbackRef.current(...args);\n }, []);\n\n useEffect(() => {\n emitter.addEventListener(event, memoizedCallback as T[keyof T]);\n return () => {\n emitter.removeEventListener(event, memoizedCallback as T[keyof T]);\n };\n }, []);\n};"],"names":[],"mappings":";;AAGa,MAAA,eAAe,GAAG,CAAwD,OAAyB,EAAE,KAAc,EAAE,QAAoB,KAAI;AACtJ,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,GAAG,IAAI,KAAI;AAC7C,QAAA,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,gBAA8B,CAAC,CAAC;AAChE,QAAA,OAAO,MAAK;AACR,YAAA,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,gBAA8B,CAAC,CAAC;AACvE,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;AACX;;;;"}

package/dist/hooks/useInputBasedControl.js CHANGED Viewed

@@ -6,7 +6,7 @@ const useInputBasedControl = (name, props, options) => {
     const rawValue = props.parameters.value.raw;
     const [value, setValue] = useState(formatter?.(rawValue) ?? rawValue);
     const valueRef = useRef(rawValue);
-    const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
+    const { labels, sizing, theme, className, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
     useEffect(() => {
         const formattedValue = formatter?.(rawValue);
         setValue(formattedValue ?? rawValue);
@@ -23,6 +23,7 @@ const useInputBasedControl = (name, props, options) => {
         };
     }, []);
     return {
+        className: className,
         value,
         labels,
         sizing,

package/dist/hooks/useInputBasedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, useControl } from \"./useControl\";\nimport { IInputParameters } from \"../interfaces/parameters\";\nimport { IDefaultTranslations } from \"./useControlLabels\";\n\n/*\n Description\n * @param {any} value:any\n * @returns {any}\n /\ninterface IControlOptions {\n defaultTranslations?: IDefaultTranslations;\n /\n Formatting function that will format the bound value every time a new one comes from the props.\n /\n formatter?: (value: any) => any,\n valueExtractor?: (value: any) => any\n}\n\n/\n Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes. \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n value: TValue,\n setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n const { formatter, valueExtractor } = { ...options };\n const rawValue = props.parameters.value.raw;\n const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n const valueRef = useRef<TValue>(rawValue);\n const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);\n\n useEffect(() => {\n const formattedValue = formatter?.(rawValue);\n setValue(formattedValue ?? rawValue);\n //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n }, [rawValue]);\n\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n\n useEffect(() => {\n return () => {\n onNotifyOutputChanged({\n value: valueExtractor?.(valueRef.current) ?? valueRef.current\n } as any);\n };\n }, []);\n return {\n value,\n labels,\n sizing,\n theme,\n onNotifyOutputChanged,\n setValue\n }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;~~IAE/G~~,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,aAAA,CAAC,CAAC;AACd,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;~~QACH~~,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}
1	+ {"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, useControl } from \"./useControl\";\nimport { IInputParameters } from \"../interfaces/parameters\";\nimport { IDefaultTranslations } from \"./useControlLabels\";\n\n/*\n Description\n * @param {any} value:any\n * @returns {any}\n /\ninterface IControlOptions {\n defaultTranslations?: IDefaultTranslations;\n /\n Formatting function that will format the bound value every time a new one comes from the props.\n /\n formatter?: (value: any) => any,\n valueExtractor?: (value: any) => any\n}\n\n/\n Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes. \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n value: TValue,\n setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n const { formatter, valueExtractor } = { ...options };\n const rawValue = props.parameters.value.raw;\n const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n const valueRef = useRef<TValue>(rawValue);\n const { labels, sizing, theme, className, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);\n\n useEffect(() => {\n const formattedValue = formatter?.(rawValue);\n setValue(formattedValue ?? rawValue);\n //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n }, [rawValue]);\n\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n\n useEffect(() => {\n return () => {\n onNotifyOutputChanged({\n value: valueExtractor?.(valueRef.current) ?? valueRef.current\n } as any);\n };\n }, []);\n return {\n className: className,\n value,\n labels,\n sizing,\n theme,\n onNotifyOutputChanged,\n setValue\n }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE1H,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,aAAA,CAAC,CAAC;AACd,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;AACH,QAAA,SAAS,EAAE,SAAS;QACpB,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}