@kwiz/fluentui 1.0.67 → 1.0.69

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 (21) hide show
  1. package/dist/controls/field-editor.d.ts +1 -0
  2. package/dist/controls/field-editor.js +3 -3
  3. package/dist/controls/field-editor.js.map +1 -1
  4. package/dist/controls/input.d.ts +12 -0
  5. package/dist/controls/input.js +38 -15
  6. package/dist/controls/input.js.map +1 -1
  7. package/dist/controls/section.d.ts +2 -0
  8. package/dist/controls/section.js +52 -3
  9. package/dist/controls/section.js.map +1 -1
  10. package/dist/helpers/hooks.d.ts +3 -3
  11. package/dist/helpers/hooks.js +3 -3
  12. package/dist/helpers/hooks.js.map +1 -1
  13. package/dist/styles/styles.d.ts +1 -0
  14. package/dist/styles/styles.js +2 -2
  15. package/dist/styles/styles.js.map +1 -1
  16. package/package.json +2 -2
  17. package/src/controls/field-editor.tsx +7 -5
  18. package/src/controls/input.tsx +50 -14
  19. package/src/controls/section.tsx +62 -3
  20. package/src/helpers/hooks.tsx +3 -3
  21. package/src/styles/styles.ts +1 -1
package/dist/controls/field-editor.d.ts CHANGED
@@ -8,6 +8,7 @@ interface IProps {
8
8
  label: string;
9
9
  description?: string;
10
10
  type?: "text" | "multiline";
11
+ allowTab?: boolean;
11
12
  }
12
13
  export declare const FieldEditor: React.FunctionComponent<IProps>;
13
14
  export {};
package/dist/controls/field-editor.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Field, mergeClasses, Textarea } from '@fluentui/react-components';
2
+ import { Field, mergeClasses } from '@fluentui/react-components';
3
3
  import { isNullOrUndefined } from '@kwiz/common';
4
4
  import { GetLogger } from '../_modules/config';
5
- import { InputEx } from './input';
5
+ import { InputEx, TextAreaEx } from './input';
6
6
  const logger = GetLogger('FieldEditor');
7
7
  export const FieldEditor = (props) => {
8
8
  if (isNullOrUndefined(props.value)) {
9
9
  logger.error(`${props.label}: value should not be null`);
10
10
  }
11
11
  return (_jsx(Field, { required: props.required, validationMessage: props.error || props.description, validationState: props.error ? "error" : "none", children: props.type === "multiline"
12
- ? _jsx(Textarea, { className: props.css && mergeClasses(...props.css), required: props.required, placeholder: props.label, value: props.value || "", onChange: (e, data) => props.onChange(data.value) })
12
+ ? _jsx(TextAreaEx, { className: props.css && mergeClasses(...props.css), required: props.required, placeholder: props.label, value: props.value || "", allowTab: props.allowTab, onValueChange: (e, data) => props.onChange(data.value) })
13
13
  : _jsx(InputEx, { className: props.css && mergeClasses(...props.css), required: props.required, placeholder: props.label, value: props.value || "", onChange: (e, data) => props.onChange(data.value) }) }));
14
14
  };
15
15
  //# sourceMappingURL=field-editor.js.map
package/dist/controls/field-editor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-editor.js","sourceRoot":"","sources":["../../src/controls/field-editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAYxC,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,IAAI,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,4BAA4B,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,CACH,KAAC,KAAK,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAC3B,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,EACnD,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAC9C,KAAK,CAAC,IAAI,KAAK,WAAW;YACvB,CAAC,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,EAC1D,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GACnD;YACF,CAAC,CAAC,KAAC,OAAO,IAAC,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,EACzD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,GACzD,CACX,CAAC;AACN,CAAC,CAAA"}
1
+ {"version":3,"file":"field-editor.js","sourceRoot":"","sources":["../../src/controls/field-editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAaxC,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,IAAI,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,4BAA4B,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,CACH,KAAC,KAAK,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAC3B,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,EACnD,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAC9C,KAAK,CAAC,IAAI,KAAK,WAAW;YACvB,CAAC,CAAC,KAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,EAC5D,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GACxD;YACF,CAAC,CAAC,KAAC,OAAO,IAAC,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,EACzD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,GACzD,CACX,CAAC;AACN,CAAC,CAAA"}
package/dist/controls/input.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { InputProps, TextareaProps } from '@fluentui/react-components';
2
2
  import React from 'react';
3
3
  interface IProps extends InputProps {
4
+ /** fire on enter */
4
5
  onOK?: () => void;
6
+ /** fire on escape */
5
7
  onCancel?: () => void;
6
8
  tokens?: {
7
9
  title: string;
@@ -13,7 +15,17 @@ interface IProps extends InputProps {
13
15
  export declare const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
14
16
  interface IPropsTextArea extends TextareaProps {
15
17
  fullSize?: boolean;
18
+ /** recalc the height to grow to show all text */
16
19
  growNoShrink?: boolean;
20
+ allowTab?: boolean;
21
+ /** fire on enter */
22
+ onOK?: () => void;
23
+ /** fire on escape */
24
+ onCancel?: () => void;
25
+ onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
26
+ value: string;
27
+ elm: HTMLTextAreaElement;
28
+ }) => void;
17
29
  }
18
30
  export declare const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>>;
19
31
  interface INumberProps extends Omit<IProps, "value" | "onChange" | "defaultValue" | "inputMode"> {
package/dist/controls/input.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Input, Label, Link, makeStyles, mergeClasses, Textarea } from '@fluentui/react-components';
3
- import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber } from '@kwiz/common';
4
- import React from 'react';
3
+ import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
4
+ import React, { useCallback, useEffect } from 'react';
5
+ import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
5
6
  import { useKWIZFluentContext } from '../helpers/context-internal';
6
7
  import { useCommonStyles } from '../styles/styles';
7
8
  import { Horizontal } from './horizontal';
@@ -12,10 +13,11 @@ export const InputEx = (props) => {
12
13
  const ctx = useKWIZFluentContext();
13
14
  const input = _jsx(Input, Object.assign({ appearance: ctx.inputAppearance }, props, { onKeyDown: isFunction(props.onOK) || isFunction(props.onCancel)
14
15
  ? e => {
15
- if (isFunction(props.onOK) && e.key === "Enter")
16
- props.onOK();
17
- else if (isFunction(props.onCancel) && e.key === "Escape")
18
- props.onCancel();
16
+ var _a, _b;
17
+ if (e.key === "Enter")
18
+ (_a = props.onOK) === null || _a === void 0 ? void 0 : _a.call(props);
19
+ if (e.key === "Escape")
20
+ (_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
19
21
  }
20
22
  : undefined }));
21
23
  return (isNotEmptyArray(props.tokens)
@@ -50,18 +52,39 @@ export const TextAreaEx = (props) => {
50
52
  let css = [];
51
53
  if (props.fullSize)
52
54
  css.push(cssNames.fullSizeTextArea);
53
- const textAreaRef = React.useRef(null);
55
+ const textAreaRef = useRefWithState(null);
54
56
  const recalcHeight = React.useCallback(() => {
55
- if (textAreaRef.current && props.growNoShrink) {
56
- if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
57
- textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
57
+ if (textAreaRef.ref.current && props.growNoShrink) {
58
+ if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
59
+ textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
58
60
  }
59
- }, [textAreaRef]);
61
+ }, useEffectOnlyOnMount);
62
+ useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
63
+ const onChange = useCallback((e, d) => {
64
+ var _a;
65
+ (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, e, { value: d.value, elm: textAreaRef.ref.current });
66
+ recalcHeight();
67
+ }, [props.onChange]);
68
+ const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
60
69
  let style = Object.assign({ height: '100%' }, props.style);
61
- return (_jsx(Textarea, Object.assign({ ref: textAreaRef, className: mergeClasses(...css) }, props, { style: style, onChange: (e, d) => {
62
- if (props.onChange)
63
- props.onChange(e, d);
64
- recalcHeight();
70
+ return (_jsx(Textarea, Object.assign({ ref: textAreaRef.set, className: mergeClasses(...css) }, props, { style: style, onKeyDown: needOnKeyDown ? (e) => {
71
+ var _a, _b, _c;
72
+ if (props.allowTab && e.key === "Tab") {
73
+ stopEvent(e);
74
+ const textArea = e.target;
75
+ pasteTextAtCursor(textArea, "\t");
76
+ onChange(e, { value: textArea.value });
77
+ return;
78
+ }
79
+ if (e.key === "Enter")
80
+ (_a = props.onOK) === null || _a === void 0 ? void 0 : _a.call(props);
81
+ if (e.key === "Escape")
82
+ (_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
83
+ (_c = props.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(props, e);
84
+ } : props.onKeyDown, onChange: (e, d) => {
85
+ var _a;
86
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e, d);
87
+ onChange(e, d);
65
88
  } })));
66
89
  };
67
90
  export const InputNumberEx = (props) => {
package/dist/controls/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/controls/input.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/controls/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,KAAK,EAAiC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAuC,MAAM,4BAA4B,CAAC;AACtL,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACxJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAWtC,MAAM,CAAC,MAAM,OAAO,GAA6D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,KAAC,KAAK,kBAAC,UAAU,EAAE,GAAG,CAAC,eAAe,IAAM,KAAK,IAC3D,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC3D,CAAC,CAAC,CAAC,CAAC,EAAE;;gBACF,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;oBAAE,MAAA,KAAK,CAAC,IAAI,qDAAI,CAAC;gBACtC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;oBAAE,MAAA,KAAK,CAAC,QAAQ,qDAAI,CAAC;YAC/C,CAAC;YACD,CAAC,CAAC,SAAS,IAEjB,CAAC;IACH,OAAO,CACH,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC;QACzB,CAAC,CAAC,MAAC,QAAQ,IAAC,KAAK,mBACZ,KAAK,EACN,MAAC,UAAU,IAAC,KAAK,mBACb,KAAC,OAAO,IAAC,IAAI,SAAG,EAChB,KAAC,MAAM,IAAC,OAAO,EAAE,KAAC,IAAI,cAAE,KAAK,CAAC,cAAc,IAAI,QAAQ,GAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAClG,CAAC;gCACG,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;oCAC9B,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;oCACjC,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;wCAChB,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;oCAC3B,CAAC;yCACI,CAAC;wCACF,IAAI,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC;4CAChC,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;;4CAEvB,QAAQ,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;oCACtC,CAAC;oCACD,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE;wCACjB,KAAK,EAAE,QAAQ;qCAClB,CAAC,CAAC;gCACP,CAAC;6BACJ,CAAC,CAAC,GAAI,IACE,IACN;QACX,CAAC,CAAC,KAAK,CACd,CAAC;AACN,CAAC,CAAA;AAED,MAAM,QAAQ,GAAiB;IAC3B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;CAC/B,CAAC;AACF,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,gBAAgB,kCACT,QAAQ,KACX,CAAC,cAAc,CAAC,EAAE,QAAQ,GAC7B;CACJ,CAAC,CAAA;AAgBF,MAAM,CAAC,MAAM,UAAU,GAAqE,CAAC,KAAK,EAAE,EAAE;IAClG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,EAAE,CAAC;IAEvB,IAAI,KAAK,CAAC,QAAQ;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,eAAe,CAAsB,IAAI,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,WAAW,CAAC,GAAG,CAAC,OAAO,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC;YAChD,IAAI,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY;gBAC3E,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC;QAC9F,CAAC;IACL,CAAC,EAAE,oBAAoB,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAoF,EAAE,CAAuB,EAAE,EAAE;;QAC3I,MAAA,KAAK,CAAC,aAAa,sDAAG,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;QAC3E,YAAY,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE7F,IAAI,KAAK,mBAA0B,MAAM,EAAE,MAAM,IAAK,KAAK,CAAC,KAAK,CAAE,CAAC;IAEpE,OAAO,CACH,KAAC,QAAQ,kBAAC,GAAG,EAAE,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,IAAM,KAAK,IAAE,KAAK,EAAE,KAAK,EACpF,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;;YAC7B,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACpC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACb,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA6B,CAAC;gBACjD,iBAAiB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;gBAClC,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;gBACvC,OAAO;YACX,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,MAAA,KAAK,CAAC,IAAI,qDAAI,CAAC;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,MAAA,KAAK,CAAC,QAAQ,qDAAI,CAAC;YAC3C,MAAA,KAAK,CAAC,SAAS,sDAAG,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;YACf,MAAA,KAAK,CAAC,QAAQ,sDAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YACvB,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACnB,CAAC,IAAI,CACZ,CAAC;AACN,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,aAAa,GAAmE,CAAC,KAAK,EAAE,EAAE;IACnG,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5G,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAuC,EAAE,IAAuB,EAAE,EAAE;QACpG,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA,yBAAyB;QAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACrF,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC1G,UAAU,CAAC,OAAO,CAAC,CAAC;QACpB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE1D,MAAM,SAAS,mCAAgB,KAAK,KAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GAAE,CAAC;IAEvG,OAAO,CACH,MAAC,QAAQ,IAAC,KAAK,mBACX,KAAC,OAAO,kBAAC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAM,SAAS,IAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAI,EACtH,CAAC,OAAO,IAAI,KAAC,KAAK,IAAC,SAAS,EAAE,YAAY,CAAC,eAAe,0CAAmC,IACvF,CACd,CAAC;AACN,CAAC,CAAA"}
package/dist/controls/section.d.ts CHANGED
@@ -8,6 +8,8 @@ export interface ISectionProps {
8
8
  title?: string;
9
9
  left?: boolean;
10
10
  right?: boolean;
11
+ /** set height to match scroll parent's height, and stick to top */
12
+ sticky?: boolean;
11
13
  /** true - will add css position fixed. portal will also wrap it in a portal. */
12
14
  fullscreen?: boolean | "portal";
13
15
  centerSelf?: boolean;
package/dist/controls/section.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
3
- import { isFunction, isNotEmptyArray, isNotEmptyString } from '@kwiz/common';
4
- import React from 'react';
3
+ import { getScrollParent, isFunction, isNotEmptyArray, isNotEmptyString, isNullOrUndefined } from '@kwiz/common';
4
+ import React, { useEffect, useState } from 'react';
5
+ import { useElementSize, useRefWithState } from '../helpers';
5
6
  import { useKWIZFluentContext } from '../helpers/context-internal';
6
7
  import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
7
8
  const useStyles = makeStyles({
@@ -9,6 +10,7 @@ const useStyles = makeStyles({
9
10
  clickable: mixins.clickable,
10
11
  left: Object.assign(Object.assign({}, mixins.float), { float: "left", marginRight: tokens.spacingHorizontalXXL }),
11
12
  right: Object.assign(Object.assign({}, mixins.float), { float: "right", marginLeft: tokens.spacingHorizontalXXL }),
13
+ sticky: Object.assign(Object.assign({}, mixins.box), { position: "sticky", top: 0, overflow: "auto", height: "fit-content", maxHeight: "fit-content" }),
12
14
  selfCentered: {
13
15
  alignSelf: "center"
14
16
  }
@@ -32,12 +34,59 @@ export const Section = React.forwardRef((props, ref) => {
32
34
  css.push(cssNames.right);
33
35
  css.push(KnownClassNames.right);
34
36
  }
37
+ else if (props.sticky) {
38
+ css.push(cssNames.sticky);
39
+ }
40
+ /** need scrollparent if we are sticky */
41
+ const [scrollParent, setScrollParent] = useState(null);
42
+ const divRef = useRefWithState();
43
+ //wait for my content to finish loading, it might change scrollparent
44
+ const mySize = useElementSize(divRef.ref.current);
45
+ useEffect(() => {
46
+ //setting the forwardRef
47
+ if (!isNullOrUndefined(ref)) {
48
+ if (isFunction(ref))
49
+ ref(divRef.ref.current);
50
+ else
51
+ ref.current = divRef.ref.current;
52
+ }
53
+ }, [divRef.value]);
54
+ useEffect(() => {
55
+ if (props.sticky) {
56
+ let scrollParent = getScrollParent(divRef.ref.current ? divRef.ref.current.parentElement : null);
57
+ setScrollParent(scrollParent);
58
+ }
59
+ }, [divRef.value, mySize.height]);
60
+ const parentSize = useElementSize(scrollParent);
61
+ useEffect(() => {
62
+ if (props.sticky && divRef.ref.current) {
63
+ let maxHeight = "fit-content";
64
+ if (scrollParent) {
65
+ let height = parseFloat(getComputedStyle(scrollParent).height);
66
+ let myStyle = getComputedStyle(divRef.ref.current);
67
+ let pTop = parseFloat(myStyle.paddingTop);
68
+ let pBottom = parseFloat(myStyle.paddingBottom);
69
+ let mTop = parseFloat(myStyle.marginTop);
70
+ let mBottom = parseFloat(myStyle.marginBottom);
71
+ if (pTop > 0)
72
+ height -= pTop;
73
+ if (pBottom > 0)
74
+ height -= pBottom;
75
+ if (mTop > 0)
76
+ height -= mTop;
77
+ if (mBottom > 0)
78
+ height -= mBottom;
79
+ maxHeight = `${height}px`;
80
+ }
81
+ divRef.ref.current.style.maxHeight = maxHeight;
82
+ }
83
+ }, [props.sticky, parentSize.height, divRef.value]);
35
84
  //a css class might have space and multiuple classes in it
36
85
  if (isNotEmptyArray(props.css))
37
86
  props.css.filter(c => isNotEmptyString(c)).forEach(c => css.push(...c.split(" ")));
38
87
  if (props.fullscreen)
39
88
  css.push(commonStyles.fullscreen);
40
- const control = _jsx("div", Object.assign({ ref: ref }, (props.rootProps || {}), { title: props.title, style: props.style, className: mergeClasses(...css), onClick: props.onClick, children: props.children }));
89
+ const control = _jsx("div", Object.assign({ ref: divRef.set }, (props.rootProps || {}), { title: props.title, style: props.style, className: mergeClasses(...css), onClick: props.onClick, children: props.children }));
41
90
  return (props.fullscreen === "portal"
42
91
  ? _jsx(Portal, { mountNode: ctx.mountNode, children: control })
43
92
  : control);
package/dist/controls/section.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"section.js","sourceRoot":"","sources":["../../src/controls/section.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE5E,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,kCACG,MAAM,CAAC,KAAK,KACf,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,CAAC,oBAAoB,GAC3C;IACD,KAAK,kCACE,MAAM,CAAC,KAAK,KACf,KAAK,EAAE,OAAO,EACd,UAAU,EAAE,MAAM,CAAC,oBAAoB,GAC1C;IACD,YAAY,EAAE;QACV,SAAS,EAAE,QAAQ;KACtB;CACJ,CAAC,CAAC;AAiBH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAyD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3G,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC9C,IAAI,KAAK,CAAC,IAAI;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,KAAK,CAAC,UAAU;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IACtD,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC;QACzB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;QACb,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxB,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;SACI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QACnB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzB,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,2DAA2D;IAC3D,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnH,IAAI,KAAK,CAAC,UAAU;QAAE,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,4BAAK,GAAG,EAAE,GAAG,IAAM,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,IAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAC9F,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,YACrB,KAAK,CAAC,QAAQ,IACb,CAAC;IAEP,OAAO,CACH,KAAK,CAAC,UAAU,KAAK,QAAQ;QACzB,CAAC,CAAC,KAAC,MAAM,IAAC,SAAS,EAAE,GAAG,CAAC,SAAS,YAC7B,OAAO,GACH;QACT,CAAC,CAAC,OAAO,CAChB,CAAC;AACN,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"section.js","sourceRoot":"","sources":["../../src/controls/section.tsx"],"names":[],"mappings":"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"}
package/dist/helpers/hooks.d.ts CHANGED
@@ -14,11 +14,11 @@ export declare function useStateEX<ValueType>(initialValue: ValueType, options?:
14
14
  ];
15
15
  /** use a ref, that can be tracked as useEffect dependency */
16
16
  export declare function useRefWithState<T>(initialValue?: T, stateOptions?: stateExOptions<T>): {
17
- /** pure ref object */
17
+ /** ref object for getting latest value in handlers */
18
18
  ref: MutableRefObject<T>;
19
- /** use the value in useEffect dependency */
19
+ /** for useEffect dependency */
20
20
  value: T;
21
- /** set it by ref={e.set} */
21
+ /** for setting on element: ref={e.set} */
22
22
  set: (newValue: T) => void;
23
23
  };
24
24
  export {};
package/dist/helpers/hooks.js CHANGED
@@ -115,11 +115,11 @@ export function useRefWithState(initialValue, stateOptions = { skipUpdateIfSame:
115
115
  setState(newValue);
116
116
  }, useEffectOnlyOnMount);
117
117
  return {
118
- /** pure ref object */
118
+ /** ref object for getting latest value in handlers */
119
119
  ref: asRef,
120
- /** use the value in useEffect dependency */
120
+ /** for useEffect dependency */
121
121
  value: asState,
122
- /** set it by ref={e.set} */
122
+ /** for setting on element: ref={e.set} */
123
123
  set: setRef
124
124
  };
125
125
  }
package/dist/helpers/hooks.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACrK,OAAO,EAAoC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,2DAA2D;AAC3D,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AASvC,SAAS,kBAAkB,CAAC,CAAM;IAC9B,IAAI,CAAC;QACD,IAAI,CAAC,YAAY,WAAW;YACxB,OAAO,CAAC,CAAC,SAAS,CAAC;IAC3B,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IACf,IAAI,CAAC;QACD,IAAI,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA,wDAAwD;;YACnG,OAAO,IAAI,CAAC;IACrB,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IACf,IAAI,CAAC;QACD,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IACf,OAAO,EAAE,CAAC;AACd,CAAC;AACD,uIAAuI;AACvI,MAAM,UAAU,UAAU,CAAY,YAAuB,EAAE,OAAmC;IAE9F,OAAO,GAAG,OAAO,IAAI,EAAE,CAAC;IACxB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;IAEhC,IAAI,MAAM,GAAG,SAAS,CAAC,oBAAoB,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAElC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,wFAAwF;IACxF,MAAM,YAAY,GAAG,MAAM,CAA6B,EAAE,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACX,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAEzB,OAAO,GAAG,EAAE;YACR,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,CAAC,CAAC;IACN,CAAC,EAAE,oBAAoB,CAAC,CAAC;IAEzB,SAAS,eAAe;QACpB,IAAI,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;YACxC,IAAI,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC7C,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA,OAAO;YACjC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAAA,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACX,eAAe,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;YACxC,MAAM,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;YACpC,IAAI,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC7C,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA,OAAO;YACjC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAElC,SAAS,iBAAiB,CAAC,QAAmB;QAC1C,IAAI,MAAe,CAAC;QACpB,IAAI,CAAC,YAAY,CAAC,QAAkB,EAAE,YAAY,CAAC,OAAiB,CAAC,EAAE,CAAC;YACpE,MAAM,GAAG,IAAI,CAAC;QAClB,CAAC;aACI,CAAC;YACF,MAAM,GAAG,KAAK,CAAC;QACnB,CAAC;QAED,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,EAAE,GAAG,CAAC,EAAE;YAC1E,IAAI,MAAM,CAAC,QAAQ,EAAE,KAAK,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC5C,GAAG,CAAC,OAAO,GAAG,kBAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;gBACxD,GAAG,CAAC,OAAO,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChD,CAAC;YACD,OAAO,MAAM,CAAC;QAClB,CAAC,CAAC,CAAC;IACP,CAAC;IAAA,CAAC;IAEF,IAAI,iBAAiB,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,QAAmB,EAAE,EAAE;QAC1F,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACnD,IAAI,cAAc,EAAE,CAAC;YACjB,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aACI,CAAC;YACF,eAAe,EAAE,CAAC;QACtB,CAAC;IACL,CAAC,CAAA;IAGD,IAAI,kBAAkB,GAAG,YAAY,CAAC,iBAAiB,EAAE;QACrD,MAAM,EAAE,CAAC,QAAmB,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ;QAClI,KAAK,EAAE,CAAC,QAAmB,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC;YACrG,CAAC,CAAC,QAAQ;YACV,0CAA0C;YAC1C,oFAAoF;YACpF,qEAAqE;YACrE,sEAAsE;YACtE,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAc;KACzC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,QAAmB,EAAE,EAAE,CAAC,IAAI,OAAO,CAAY,OAAO,CAAC,EAAE;QACnF,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACrB,6BAA6B;YAC7B,MAAM,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;YACpC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACtB,CAAC;aACI,CAAC;YACF,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;AAC3C,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,eAAe,CAAI,YAAgB,EAAE,eAAkC,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACtI,IAAI,KAAK,GAAG,MAAM,CAAI,YAAY,CAAC,CAAC;IACpC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAI,YAAY,EAAE,YAAY,CAAC,CAAC;IACpE,IAAI,MAAM,GAAG,WAAW,CAAC,CAAC,QAAW,EAAE,EAAE;QACrC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC;QACzB,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EAAE,oBAAoB,CAAC,CAAC;IACzB,OAAO;QACH,sDAAsD;QACtD,GAAG,EAAE,KAAK;QACV,+BAA+B;QAC/B,KAAK,EAAE,OAAO;QACd,0CAA0C;QAC1C,GAAG,EAAE,MAAM;KACd,CAAC;AACN,CAAC"}
package/dist/styles/styles.d.ts CHANGED
@@ -2,6 +2,7 @@ import { GriffelStyle } from "@fluentui/react-components";
2
2
  export declare namespace mixins {
3
3
  const main: GriffelStyle;
4
4
  const clickable: GriffelStyle;
5
+ const box: GriffelStyle;
5
6
  const float: GriffelStyle;
6
7
  const flex: GriffelStyle;
7
8
  const wrap: GriffelStyle;
package/dist/styles/styles.js CHANGED
@@ -11,13 +11,13 @@ export var mixins;
11
11
  cursor: "pointer"
12
12
  }
13
13
  };
14
- const box = {
14
+ mixins.box = {
15
15
  padding: tokens.spacingHorizontalM,
16
16
  borderRadius: tokens.borderRadiusMedium,
17
17
  boxShadow: tokens.shadow4,
18
18
  margin: tokens.spacingHorizontalXXS
19
19
  };
20
- mixins.float = Object.assign(Object.assign({}, box), {
20
+ mixins.float = Object.assign(Object.assign({}, mixins.box), {
21
21
  /** make buttons work */
22
22
  position: "relative",
23
23
  /** make buttons work */
package/dist/styles/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kwiz/fluentui",
3
- "version": "1.0.67",
3
+ "version": "1.0.69",
4
4
  "description": "KWIZ common controls for FluentUI",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -60,7 +60,7 @@
60
60
  "dependencies": {
61
61
  "@fluentui/react-datepicker-compat": "^0.4.53",
62
62
  "@fluentui/react-timepicker-compat": "^0.2.42",
63
- "@kwiz/common": "^1.0.103",
63
+ "@kwiz/common": "^1.0.120",
64
64
  "@mismerge/core": "^1.2.1",
65
65
  "@mismerge/react": "^1.0.1",
66
66
  "esbuild": "^0.19.12",
package/src/controls/field-editor.tsx CHANGED
@@ -1,8 +1,8 @@
1
- import { Field, mergeClasses, Textarea } from '@fluentui/react-components';
1
+ import { Field, mergeClasses } from '@fluentui/react-components';
2
2
  import { isNullOrUndefined } from '@kwiz/common';
3
3
  import React from 'react';
4
4
  import { GetLogger } from '../_modules/config';
5
- import { InputEx } from './input';
5
+ import { InputEx, TextAreaEx } from './input';
6
6
 
7
7
  const logger = GetLogger('FieldEditor');
8
8
 
@@ -14,7 +14,8 @@ interface IProps {
14
14
  css: string[];
15
15
  label: string;
16
16
  description?: string;
17
- type?: "text" | "multiline"
17
+ type?: "text" | "multiline";
18
+ allowTab?: boolean;
18
19
  }
19
20
  export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
20
21
  if (isNullOrUndefined(props.value)) {
@@ -25,11 +26,12 @@ export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
25
26
  validationMessage={props.error || props.description}
26
27
  validationState={props.error ? "error" : "none"}>
27
28
  {props.type === "multiline"
28
- ? <Textarea className={props.css && mergeClasses(...props.css)}
29
+ ? <TextAreaEx className={props.css && mergeClasses(...props.css)}
29
30
  required={props.required}
30
31
  placeholder={props.label}
31
32
  value={props.value || ""}
32
- onChange={(e, data) => props.onChange(data.value)}
33
+ allowTab={props.allowTab}
34
+ onValueChange={(e, data) => props.onChange(data.value)}
33
35
  />
34
36
  : <InputEx className={props.css && mergeClasses(...props.css)}
35
37
  required={props.required}
package/src/controls/input.tsx CHANGED
@@ -1,6 +1,7 @@
1
- import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
2
- import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber } from '@kwiz/common';
3
- import React from 'react';
1
+ import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaOnChangeData, TextareaProps } from '@fluentui/react-components';
2
+ import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
3
+ import React, { useCallback, useEffect } from 'react';
4
+ import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
4
5
  import { useKWIZFluentContext } from '../helpers/context-internal';
5
6
  import { useCommonStyles } from '../styles/styles';
6
7
  import { Horizontal } from './horizontal';
@@ -10,7 +11,9 @@ import { Vertical } from './vertical';
10
11
 
11
12
 
12
13
  interface IProps extends InputProps {
14
+ /** fire on enter */
13
15
  onOK?: () => void;
16
+ /** fire on escape */
14
17
  onCancel?: () => void;
15
18
  tokens?: { title: string; value: string; replace?: boolean; }[];
16
19
  tokenMenuLabel?: string;
@@ -20,8 +23,8 @@ export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
20
23
  const input = <Input appearance={ctx.inputAppearance} {...props}
21
24
  onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
22
25
  ? e => {
23
- if (isFunction(props.onOK) && e.key === "Enter") props.onOK();
24
- else if (isFunction(props.onCancel) && e.key === "Escape") props.onCancel();
26
+ if (e.key === "Enter") props.onOK?.();
27
+ if (e.key === "Escape") props.onCancel?.();
25
28
  }
26
29
  : undefined
27
30
  }
@@ -69,27 +72,60 @@ const useStyles = makeStyles({
69
72
 
70
73
  interface IPropsTextArea extends TextareaProps {
71
74
  fullSize?: boolean;
75
+ /** recalc the height to grow to show all text */
72
76
  growNoShrink?: boolean;
77
+ allowTab?: boolean;
78
+ /** fire on enter */
79
+ onOK?: () => void;
80
+ /** fire on escape */
81
+ onCancel?: () => void;
82
+ onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
83
+ value: string;
84
+ elm: HTMLTextAreaElement;
85
+ }) => void;
73
86
  }
74
87
  export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
75
88
  const cssNames = useStyles();
76
89
  let css: string[] = [];
77
90
 
78
91
  if (props.fullSize) css.push(cssNames.fullSizeTextArea);
79
- const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
92
+ const textAreaRef = useRefWithState<HTMLTextAreaElement>(null);
80
93
  const recalcHeight = React.useCallback(() => {
81
- if (textAreaRef.current && props.growNoShrink) {
82
- if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
83
- textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
94
+ if (textAreaRef.ref.current && props.growNoShrink) {
95
+ if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
96
+ textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
84
97
  }
85
- }, [textAreaRef]);
98
+ }, useEffectOnlyOnMount);
99
+
100
+ useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
101
+
102
+ const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: TextareaOnChangeData) => {
103
+ props.onValueChange?.(e, { value: d.value, elm: textAreaRef.ref.current });
104
+ recalcHeight();
105
+ }, [props.onChange]);
106
+
107
+ const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
86
108
 
87
109
  let style: React.CSSProperties = { height: '100%', ...props.style };
110
+
88
111
  return (
89
- <Textarea ref={textAreaRef} className={mergeClasses(...css)} {...props} style={style} onChange={(e, d) => {
90
- if (props.onChange) props.onChange(e, d);
91
- recalcHeight();
92
- }} />
112
+ <Textarea ref={textAreaRef.set} className={mergeClasses(...css)} {...props} style={style}
113
+ onKeyDown={needOnKeyDown ? (e) => {
114
+ if (props.allowTab && e.key === "Tab") {
115
+ stopEvent(e);
116
+ const textArea = e.target as HTMLTextAreaElement;
117
+ pasteTextAtCursor(textArea, "\t");
118
+ onChange(e, { value: textArea.value });
119
+ return;
120
+ }
121
+ if (e.key === "Enter") props.onOK?.();
122
+ if (e.key === "Escape") props.onCancel?.();
123
+ props.onKeyDown?.(e);
124
+ } : props.onKeyDown}
125
+ onChange={(e, d) => {
126
+ props.onChange?.(e, d);
127
+ onChange(e, d);
128
+ }} />
93
129
  );
94
130
  }
95
131
 
package/src/controls/section.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
2
- import { isFunction, isNotEmptyArray, isNotEmptyString } from '@kwiz/common';
3
- import React from 'react';
2
+ import { getScrollParent, isFunction, isNotEmptyArray, isNotEmptyString, isNullOrUndefined } from '@kwiz/common';
3
+ import React, { useEffect, useState } from 'react';
4
+ import { useElementSize, useRefWithState } from '../helpers';
4
5
  import { useKWIZFluentContext } from '../helpers/context-internal';
5
6
  import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
6
7
 
@@ -17,6 +18,14 @@ const useStyles = makeStyles({
17
18
  float: "right",
18
19
  marginLeft: tokens.spacingHorizontalXXL
19
20
  },
21
+ sticky: {
22
+ ...mixins.box,
23
+ position: "sticky",
24
+ top: 0,
25
+ overflow: "auto",
26
+ height: "fit-content",
27
+ maxHeight: "fit-content"
28
+ },
20
29
  selfCentered: {
21
30
  alignSelf: "center"
22
31
  }
@@ -32,6 +41,8 @@ export interface ISectionProps {
32
41
  title?: string;
33
42
  left?: boolean;
34
43
  right?: boolean;
44
+ /** set height to match scroll parent's height, and stick to top */
45
+ sticky?: boolean;
35
46
  /** true - will add css position fixed. portal will also wrap it in a portal. */
36
47
  fullscreen?: boolean | "portal";
37
48
  centerSelf?: boolean;
@@ -55,11 +66,59 @@ export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<
55
66
  css.push(cssNames.right);
56
67
  css.push(KnownClassNames.right);
57
68
  }
69
+ else if (props.sticky) {
70
+ css.push(cssNames.sticky);
71
+ }
72
+
73
+ /** need scrollparent if we are sticky */
74
+ const [scrollParent, setScrollParent] = useState<HTMLElement>(null);
75
+ const divRef = useRefWithState<HTMLDivElement>();
76
+
77
+ //wait for my content to finish loading, it might change scrollparent
78
+ const mySize = useElementSize(divRef.ref.current);
79
+
80
+ useEffect(() => {
81
+ //setting the forwardRef
82
+ if (!isNullOrUndefined(ref)) {
83
+ if (isFunction(ref)) ref(divRef.ref.current);
84
+ else (ref as React.MutableRefObject<HTMLDivElement>).current = divRef.ref.current;
85
+ }
86
+ }, [divRef.value]);
87
+
88
+ useEffect(() => {
89
+ if (props.sticky) {
90
+ let scrollParent = getScrollParent(divRef.ref.current ? divRef.ref.current.parentElement : null);
91
+ setScrollParent(scrollParent);
92
+ }
93
+ }, [divRef.value, mySize.height]);
94
+
95
+ const parentSize = useElementSize(scrollParent);
96
+ useEffect(() => {
97
+ if (props.sticky && divRef.ref.current) {
98
+ let maxHeight = "fit-content";
99
+ if (scrollParent) {
100
+ let height = parseFloat(getComputedStyle(scrollParent).height);
101
+ let myStyle = getComputedStyle(divRef.ref.current);
102
+
103
+ let pTop = parseFloat(myStyle.paddingTop);
104
+ let pBottom = parseFloat(myStyle.paddingBottom);
105
+ let mTop = parseFloat(myStyle.marginTop);
106
+ let mBottom = parseFloat(myStyle.marginBottom);
107
+ if (pTop > 0) height -= pTop;
108
+ if (pBottom > 0) height -= pBottom;
109
+ if (mTop > 0) height -= mTop;
110
+ if (mBottom > 0) height -= mBottom;
111
+
112
+ maxHeight = `${height}px`;
113
+ }
114
+ divRef.ref.current.style.maxHeight = maxHeight;
115
+ }
116
+ }, [props.sticky, parentSize.height, divRef.value]);
58
117
 
59
118
  //a css class might have space and multiuple classes in it
60
119
  if (isNotEmptyArray(props.css)) props.css.filter(c => isNotEmptyString(c)).forEach(c => css.push(...c.split(" ")));
61
120
  if (props.fullscreen) css.push(commonStyles.fullscreen);
62
- const control = <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
121
+ const control = <div ref={divRef.set} {...(props.rootProps || {})} title={props.title} style={props.style}
63
122
  className={mergeClasses(...css)}
64
123
  onClick={props.onClick}>
65
124
  {props.children}
package/src/helpers/hooks.tsx CHANGED
@@ -132,11 +132,11 @@ export function useRefWithState<T>(initialValue?: T, stateOptions: stateExOption
132
132
  setState(newValue);
133
133
  }, useEffectOnlyOnMount);
134
134
  return {
135
- /** pure ref object */
135
+ /** ref object for getting latest value in handlers */
136
136
  ref: asRef,
137
- /** use the value in useEffect dependency */
137
+ /** for useEffect dependency */
138
138
  value: asState,
139
- /** set it by ref={e.set} */
139
+ /** for setting on element: ref={e.set} */
140
140
  set: setRef
141
141
  };
142
142
  }
package/src/styles/styles.ts CHANGED
@@ -11,7 +11,7 @@ export module mixins {
11
11
  cursor: "pointer"
12
12
  }
13
13
  }
14
- const box: GriffelStyle = {
14
+ export const box: GriffelStyle = {
15
15
  padding: tokens.spacingHorizontalM,
16
16
  borderRadius: tokens.borderRadiusMedium,
17
17
  boxShadow: tokens.shadow4,