@talxis/base-controls 1.2406.16 → 1.2407.2

package/dist/components/OptionSet/index.js

@@ -0,0 +1 @@
+export{OptionSet}from"./OptionSet.js";import"react/jsx-runtime";import"../../hooks/useControl.js";import"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"../../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";import"../../hooks/useControlSizing.js";import"@talxis/react-components";

package/dist/components/OptionSet/interfaces.d.ts

@@ -1,13 +1,12 @@
+import { IComboBoxProps } from "@talxis/react-components";
 import { IOptionSetProperty } from "../../interfaces";
-import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
-import { IBaseParameters } from "../../interfaces/parameters";
-export interface IOptionSet extends IComponent<IOptionSetParameters, IOptionSetOutputs, IOptionSetTranslations> {
+import { IControl, IOutputs } from "../../interfaces/context";
+import { IInputParameters } from "../../interfaces/parameters";
+export interface IOptionSet extends IControl<IOptionSetParameters, IOptionSetOutputs, any, IComboBoxProps> {
 }
-export interface IOptionSetParameters extends IBaseParameters {
+export interface IOptionSetParameters extends IInputParameters {
     value: IOptionSetProperty;
 }
 export interface IOptionSetOutputs extends IOutputs {
     value?: number;
 }
-export interface IOptionSetTranslations extends ITranslations {
-}

package/dist/components/OptionSet/interfaces.js

@@ -0,0 +1 @@
+

package/dist/components/TextField/TextField.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{TextField as o}from"@talxis/react-components/dist/components/TextField";import{useRef as t,useState as r,useEffect as i}from"react";import{useInputBasedComponent as n}from"../../hooks/useInputBasedComponent.js";import"../../hooks/useComponent.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useComponentSizing.js";const l=l=>{var s,u,a,d,v,p,c;const m=l.context,h=l.parameters,y=h.value,g=t(null),{value:w,sizing:b,setValue:C,onNotifyOutputChanged:f}=n("TextField",l),[x]=((e,o,n)=>{const l=t(!1),[s,u]=r(o||(n?80:void 0)),a=t(!0);return i((()=>{var o;if(!n)return;const t=new ResizeObserver((()=>{a.current||l.current?a.current=!1:(l.current=!0,u(void 0))})),r=null===(o=e.current)||void 0===o?void 0:o.querySelector("textarea");return s&&r.setAttribute("style",`height: ${s}px`),t.observe(r),()=>{t.disconnect()}}),[]),[s]})(g,b.height,null===(s=l.parameters.IsMultiLine)||void 0===s?void 0:s.raw);return e(o,{readOnly:m.mode.isControlDisabled,multiline:null===(u=h.IsMultiLine)||void 0===u?void 0:u.raw,resizable:null===(a=h.isResizable)||void 0===a?void 0:a.raw,autoFocus:null===(d=h.AutoFocus)||void 0===d?void 0:d.raw,elementRef:g,styles:{fieldGroup:{height:x,width:m.mode.allocatedWidth||void 0}},borderless:!1===(null===(v=h.EnableBorder)||void 0===v?void 0:v.raw),errorMessage:y.errorMessage,deleteButtonProps:!0===(null===(p=h.EnableDeleteButton)||void 0===p?void 0:p.raw)?{key:"delete",showOnlyOnHover:!0,iconProps:{iconName:"Delete"},onClick:()=>C(void 0)}:void 0,clickToCopyProps:!0===(null===(c=h.EnableCopyButton)||void 0===c?void 0:c.raw)?{key:"copy",showOnlyOnHover:!0,iconProps:{iconName:"Copy"}}:void 0,value:null!=w?w:"",onBlur:()=>{f({value:null!=w?w:void 0})},onChange:(e,o)=>{C(o)}})};export{l as TextField};
+import{jsx as e}from"react/jsx-runtime";import{TextField as o}from"@talxis/react-components";import{useRef as r,useMemo as i}from"react";import{useInputBasedControl as t}from"../../hooks/useInputBasedControl.js";import{ThemeProvider as n}from"@fluentui/react";import"../../hooks/useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"../../hooks/useControlSizing.js";const l=l=>{var a,s,u,d,p,m;const c=l.context,h=l.parameters,v=h.value,g=r(null),y=null!==(a=l.onOverrideComponentProps)&&void 0!==a?a:e=>e,{value:f,sizing:w,theme:b,setValue:k,onNotifyOutputChanged:C}=t("TextField",l),P=y({underlined:b.effects.underlined,readOnly:c.mode.isControlDisabled,resizable:!1,type:i((()=>(()=>{switch(v.type){case"SingleLine.Email":return"email";case"SingleLine.URL":return"url";case"SingleLine.Phone":return"tel"}return"text"})()),[v.type]),multiline:"Multiple"===h.value.type,autoFocus:null===(s=h.AutoFocus)||void 0===s?void 0:s.raw,elementRef:g,styles:{fieldGroup:{height:w.height,width:w.width}},borderless:!1===(null===(u=h.EnableBorder)||void 0===u?void 0:u.raw),errorMessage:v.errorMessage,hideErrorMessage:!(null===(d=h.ShowErrorMessage)||void 0===d?void 0:d.raw),suffixItems:i((()=>(()=>{var e;if(!1===(null===(e=h.EnableTypeSuffix)||void 0===e?void 0:e.raw))return;const o=v.error||!v.raw;switch(v.type){case"SingleLine.Email":return[{key:"sendMail",disabled:o,iconProps:{iconName:"Mail"},href:`mailto:${v.raw}`}];case"SingleLine.Phone":return[{key:"call",disabled:o,iconProps:{iconName:"Phone"},href:`tel:${v.raw}`}];case"SingleLine.URL":return[{key:"goToPage",disabled:o,iconProps:{iconName:"Globe"},target:"_blank",href:v.raw}]}})()),[v.raw,v.error]),deleteButtonProps:!0===(null===(p=h.EnableDeleteButton)||void 0===p?void 0:p.raw)?{key:"delete",showOnlyOnHover:!0,iconProps:{iconName:"Delete"},onClick:()=>k(void 0)}:void 0,clickToCopyProps:!0===(null===(m=h.EnableCopyButton)||void 0===m?void 0:m.raw)?{key:"copy",showOnlyOnHover:!0,iconProps:{iconName:"Copy"}}:void 0,value:null!=f?f:"",onBlur:()=>{C({value:null!=f?f:void 0})},onChange:(e,o)=>{k(o)}});return e(n,Object.assign({style:"Multiple"===h.value.type?{height:"100%"}:void 0,applyTo:"none",theme:b},{children:e(o,Object.assign({},P))}))};export{l as TextField};

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextField';
+export * from './interfaces';

package/dist/components/TextField/index.js

@@ -0,0 +1 @@
+export{TextField}from"./TextField.js";import"react/jsx-runtime";import"@talxis/react-components";import"react";import"../../hooks/useInputBasedControl.js";import"../../hooks/useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"../../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";import"../../hooks/useControlSizing.js";

package/dist/components/TextField/interfaces.d.ts

@@ -1,15 +1,14 @@
+import { ITextFieldProps } from "@talxis/react-components";
 import { IStringProperty, ITwoOptionsProperty } from "../../interfaces";
-import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IControl, IOutputs } from "../../interfaces/context";
 import { IInputParameters } from "../../interfaces/parameters";
-export interface ITextField extends IComponent<ITextFieldParameters, ITextFieldOutputs, ITextFieldTranslations> {
+export interface ITextField extends IControl<ITextFieldParameters, ITextFieldOutputs, any, ITextFieldProps> {
 }
 export interface ITextFieldParameters extends IInputParameters {
-    IsMultiLine?: ITwoOptionsProperty;
     isResizable?: ITwoOptionsProperty;
+    EnableTypeSuffix?: ITwoOptionsProperty;
     value: IStringProperty;
 }
 export interface ITextFieldOutputs extends IOutputs {
     value?: string;
 }
-export interface ITextFieldTranslations extends ITranslations {
-}

package/dist/components/TextField/interfaces.js

@@ -0,0 +1 @@
+

package/dist/components/TwoOptions/TwoOptions.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{Toggle as t}from"@fluentui/react";import{useComponent as e}from"../../hooks/useComponent.js";import{useRef as i,useEffect as n}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useComponentSizing.js";const r=r=>{var a,s;const u=r.parameters,l=u.value,m=l.attributes.Options,{sizing:p,onNotifyOutputChanged:c}=e("TwoOptions",r);r.context;const d=i(null);n((()=>{var o;!0===(null===(o=u.AutoFocus)||void 0===o?void 0:o.raw)&&d.current.focus()}),[]);return o(t,{styles:{root:{height:p.height,width:p.width},container:{alignItems:"center"}},checked:l.raw,componentRef:d,inlineLabel:!0,onText:(null===(a=m.find((o=>1===o.Value)))||void 0===a?void 0:a.Label)||"Yes",offText:(null===(s=m.find((o=>0===o.Value)))||void 0===s?void 0:s.Label)||"No",onChange:(o,t)=>(o=>{c({value:o})})(t)})};export{r as TwoOptions};
+import{jsx as e}from"react/jsx-runtime";import{ThemeProvider as o,Toggle as t}from"@fluentui/react";import{useControl as i}from"../../hooks/useControl.js";import{useRef as n,useEffect as r}from"react";import"../../utils/Theme.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"@fluentui/react-migration-v8-v9";import"../../hooks/useControlSizing.js";const s=s=>{var a,l;const m=s.parameters,u=m.value,p=u.attributes.Options,{sizing:d,onNotifyOutputChanged:h,theme:c}=i("TwoOptions",s),f=s.context,g=n(null);r((()=>{var e;!0===(null===(e=m.AutoFocus)||void 0===e?void 0:e.raw)&&g.current.focus()}),[]);return e(o,Object.assign({theme:c,applyTo:"none"},{children:e(t,{styles:{root:{height:d.height,width:d.width,marginBottom:0},container:{alignItems:"center"}},theme:c,checked:u.raw,componentRef:g,disabled:f.mode.isControlDisabled,inlineLabel:!0,onText:(null===(a=p.find((e=>1===e.Value)))||void 0===a?void 0:a.Label)||"Yes",offText:(null===(l=p.find((e=>0===e.Value)))||void 0===l?void 0:l.Label)||"No",onChange:(e,o)=>(e=>{h({value:e})})(o)})}))};export{s as TwoOptions};

package/dist/components/TwoOptions/index.js

@@ -0,0 +1 @@
+export{TwoOptions}from"./TwoOptions.js";import"react/jsx-runtime";import"@fluentui/react";import"../../hooks/useControl.js";import"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlTheme.js";import"../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"../../hooks/useControlSizing.js";

package/dist/components/TwoOptions/interfaces.d.ts

@@ -1,7 +1,8 @@
+import { IToggleProps } from "@fluentui/react";
 import { ITwoOptionsProperty } from "../../interfaces";
-import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IControl, IOutputs } from "../../interfaces/context";
 import { IBaseParameters } from "../../interfaces/parameters";
-export interface ITwoOptions extends IComponent<ITwoOptionsParameters, ITwoOptionsOutputs, ITwoOptionsTranslations> {
+export interface ITwoOptions extends IControl<ITwoOptionsParameters, ITwoOptionsOutputs, any, IToggleProps> {
 }
 export interface ITwoOptionsParameters extends IBaseParameters {
     value: ITwoOptionsProperty;
@@ -9,5 +10,3 @@ export interface ITwoOptionsParameters extends IBaseParameters {
 export interface ITwoOptionsOutputs extends IOutputs {
     value?: boolean;
 }
-export interface ITwoOptionsTranslations extends ITranslations {
-}

package/dist/components/TwoOptions/interfaces.js

@@ -0,0 +1 @@
+

package/dist/constants.js

@@ -0,0 +1 @@
+const n={0:"$n",1:"n$",2:"$ n",3:"n $"},$={0:"($n)",1:"-$n",2:"$-n",3:"$n-",4:"(n$)",5:"-n$",6:"n-$",7:"n$-",8:"-n $",9:"-$ n",10:"n $-",11:"$ n-",12:"$ -n",13:"n- $",14:"($ n)",15:"(n $)",16:"$- n"},o={0:"(n)",1:"-n",2:"- n",3:"n-",4:"n -"},t={0:"n %",1:"n%",2:"%n",3:"% n"},c={0:"-n %",1:"-n%",2:"-%n",3:"%-n",4:"%n-",5:"n-%",6:"n%-",7:"-% n",8:"n %-",9:"% n-",10:"% -n",11:"n- %"};export{$ as CURRENCY_NEGATIVE_PATTERN,n as CURRENCY_POSITIVE_PATTERN,o as NUMBER_NEGATIVE_PATTERN,c as PERCENT_NEGATIVE_PATTERN,t as PERCENT_POSITIVE_PATTERN};

package/dist/hooks/index.d.ts

@@ -1 +1,6 @@
-export * from './useComponent';
+export * from './useControl';
+export * from './useControlSizing';
+export * from './useFocusIn';
+export * from './useInputBasedControl';
+export * from './useMouseOver';
+export * from './useControlTheme';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{useComponent}from"./useComponent.js";import"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"./useComponentSizing.js";
+export{useControl}from"./useControl.js";export{useControlSizing}from"./useControlSizing.js";export{useFocusIn}from"./useFocusIn.js";export{useInputBasedControl}from"./useInputBasedControl.js";export{useMouseOver}from"./useMouseOver.js";export{useControlTheme}from"./useControlTheme.js";import"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";

package/dist/hooks/useControl.d.ts

@@ -0,0 +1,23 @@
+import { IControl, IOutputs, IParameters } from "../interfaces";
+import { ITheme } from "../interfaces/theme";
+export type ITranslation<T> = {
+    [Property in keyof Required<T>]: (variables?: any) => string;
+};
+export interface IDefaultTranslations {
+    [LCID: number]: string | string[];
+    [key: string]: any;
+}
+export interface IControlController<TTranslations, TOutputs> {
+    labels: Required<ITranslation<TTranslations>>;
+    sizing: {
+        width?: number;
+        height?: number;
+    };
+    theme: ITheme;
+    onNotifyOutputChanged: (outputs: TOutputs) => void;
+}
+/**
+ * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
+ * 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.
+ */
+export declare const useControl: <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations) => IControlController<TTranslations, TOutputs>;

package/dist/hooks/useControl.js

@@ -0,0 +1 @@
+import{useRef as e,useMemo as t,useEffect as o}from"react";import r from"fast-deep-equal/es6";import{merge as n}from"merge-anything";import{Liquid as i}from"liquidjs";import{useControlTheme as l}from"./useControlTheme.js";import{useControlSizing as a}from"./useControlSizing.js";import"../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";const s=(s,u,f)=>{const c=e(u.parameters),d=a(u.context.mode),m=u.context,g=t((()=>new i),[]),p=t((()=>{var e;const t=n(null!=f?f:{},null!==(e=u.translations)&&void 0!==e?e:{});return new Proxy(t,{get:(e,o)=>e=>h(o,t,e)})}),[]);o((()=>{c.current=u.parameters}),[u.parameters]);const h=(e,t,o)=>{const r=e=>"string"==typeof e?e:JSON.stringify(e),n=t[e];if(!n)return console.error(`Translation for the ${e} label of the ${s} control has not been defined!`),e;if("string"==typeof n||Array.isArray(n))return r(n);let i=n[u.context.userSettings.languageId];return i||(console.info(`Translation for the ${e} label of the ${s} control has not been found. Using default Czech label instead.`),i=n[1029]),i||(console.error(`Translation for the ${e} label of the ${s} control does not exists neither for Czech language and current LCID.`),i=e),g.parseAndRenderSync(r(i),o)};return{labels:p,sizing:d,theme:l(m.fluentDesignLanguage),onNotifyOutputChanged:e=>{var t,o;let n=!1;for(let[o,i]of Object.entries(e)){let l=null===(t=c.current[o])||void 0===t?void 0:t.raw;if(!r(l,i)){if(null===i&&(i=void 0,e[o]=void 0),""===i&&(i=void 0,e[o]=void 0),null===l&&(l=void 0),l===i)continue;n=!0;break}}n&&(null===(o=u.onNotifyOutputChanged)||void 0===o||o.call(u,e))}}};export{s as useControl};

package/dist/hooks/useControlSizing.d.ts

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

package/dist/hooks/useControlSizing.js

@@ -0,0 +1 @@
+const t=t=>{const e=t=>{if(t&&-1!==t)return t};return{height:e(t.allocatedHeight),width:e(t.allocatedWidth)}};export{t as useControlSizing};

package/dist/hooks/useControlTheme.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="powerapps-component-framework" />
+import { ITheme } from "../interfaces/theme";
+export declare const useControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme;

package/dist/hooks/useControlTheme.js

@@ -0,0 +1 @@
+import{useMemo as t}from"react";import{getControlTheme as r}from"../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";const i=i=>t((()=>r(i)),[]);export{i as useControlTheme};

package/dist/hooks/useFocusIn.d.ts

@@ -1 +1 @@
-export declare const useFocusIn: (ref: React.RefObject<HTMLElement>) => boolean;
+export declare const useFocusIn: (ref: React.RefObject<HTMLElement>, delay?: number) => boolean;

package/dist/hooks/useFocusIn.js

@@ -1 +1 @@
-import{useState as e,useEffect as r}from"react";const n=n=>{const[t,o]=e(!1);return r((()=>{var e,r;const t=()=>{o(!0)},u=()=>{o(!1)};return null===(e=n.current)||void 0===e||e.addEventListener("focusin",t),null===(r=n.current)||void 0===r||r.addEventListener("focusout",u),()=>{var e,r;null===(e=n.current)||void 0===e||e.removeEventListener("focusin",t),null===(r=n.current)||void 0===r||r.removeEventListener("focusout",u)}}),[]),t};export{n as useFocusIn};
+import{useState as e,useEffect as r}from"react";const t=(t,n)=>{const[o,u]=e(!1),c=e=>{"number"==typeof n?setTimeout((()=>{u(e)}),n):u(e)};return r((()=>{var e,r;const n=e=>{c(!0)},o=e=>{c(!1)};return null===(e=t.current)||void 0===e||e.addEventListener("focusin",(e=>n())),null===(r=t.current)||void 0===r||r.addEventListener("focusout",(e=>o())),()=>{var e,r;null===(e=t.current)||void 0===e||e.removeEventListener("focusin",n),null===(r=t.current)||void 0===r||r.removeEventListener("focusout",o)}}),[]),o};export{t as useFocusIn};

package/dist/hooks/{useInputBasedComponent.d.ts → useInputBasedControl.d.ts}

@@ -1,13 +1,13 @@
-import { IComponent, IOutputs, ITranslations } from "../interfaces/context";
-import { IComponentController } from "./useComponent";
+import { IControl, IOutputs } from "../interfaces/context";
+import { IControlController, IDefaultTranslations } from "./useControl";
 import { IInputParameters } from "../interfaces/parameters";
 /**
  * Description
  * @param {any} value:any
  * @returns {any}
  */
-interface IComponentOptions<TTranslations> {
-    defaultTranslations?: TTranslations;
+interface IControlOptions {
+    defaultTranslations?: IDefaultTranslations;
     /**
      * Formatting function that will format the bound value every time a new one comes from the props.
      */
@@ -28,9 +28,9 @@ interface IComponentOptions<TTranslations> {
  * The last prop is a method that will notify the framework that you wish to write changes.
  * The method will notify the framework only if the provided output differs from the current inputs.
  */
-interface IInputBasedComponentController<TValue, TTranslations, TOutputs> extends IComponentController<TTranslations, TOutputs> {
+interface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {
     value: TValue;
     setValue: (value: TValue) => void;
 }
-export declare const useInputBasedComponent: <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations extends ITranslations>(name: string, props: IComponent<TParameters, TOutputs, TTranslations>, options?: IComponentOptions<TTranslations> | undefined) => IInputBasedComponentController<TValue, TTranslations, TOutputs>;
+export declare const useInputBasedControl: <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions) => IInputBasedControlController<TValue, TTranslations, TOutputs>;
 export {};

package/dist/hooks/useInputBasedControl.js

@@ -0,0 +1 @@
+import{useState as t,useRef as e,useEffect as r}from"react";import{useControl as o}from"./useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"./useControlTheme.js";import"../utils/Theme.js";import"@fluentui/react";import"@fluentui/react-migration-v8-v9";import"./useControlSizing.js";const i=(i,n,l)=>{var u;const{formatter:a,valueExtractor:s}=Object.assign({},l),m=n.parameters.value.raw,[p,v]=t(null!==(u=null==a?void 0:a(m))&&void 0!==u?u:m),d=e(m),{labels:c,sizing:f,theme:g,onNotifyOutputChanged:h}=o(i,n,null==l?void 0:l.defaultTranslations);return r((()=>{const t=null==a?void 0:a(m);v(null!=t?t:m)}),[m]),r((()=>{d.current=p}),[p]),r((()=>()=>{var t,e;!0===(null===(t=n.parameters.NotifyOutputChangedOnUnmount)||void 0===t?void 0:t.raw)&&h({value:null!==(e=null==s?void 0:s(d.current))&&void 0!==e?e:d.current})}),[]),{value:p,labels:c,sizing:f,theme:g,onNotifyOutputChanged:h,setValue:v}};export{i as useInputBasedControl};