forstok-ui-lib 8.5.28 → 8.6.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 (12) hide show
  1. package/dist/index.d.ts +6 -4
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +2 -2
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/message/index.tsx +56 -25
  8. package/src/components/message/question.tsx +82 -30
  9. package/src/components/message/typed.ts +28 -15
  10. package/src/components/select/all.tsx +6 -1
  11. package/src/components/select/asyncPaginate.tsx +10 -4
  12. package/src/components/select/index.tsx +25 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "forstok-ui-lib",
3
- "version": "8.5.28",
3
+ "version": "8.6.0",
4
4
  "description": "Forstok UI Components Library",
5
5
  "path": "dist",
6
6
  "main": "dist/index.js",
package/src/components/message/index.tsx CHANGED
@@ -1,62 +1,93 @@
1
- import { useCallback, useEffect } from 'react';
2
- import { useStateWithCallbackLazy } from 'use-state-with-callback';
3
- import ButtonComponent from '../button';
4
- import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './styles';
5
- import type { TMessage } from './typed';
1
+ import { useCallback, useEffect } from "react";
2
+ import { useStateWithCallbackLazy } from "use-state-with-callback";
3
+ import ButtonComponent from "../button";
4
+ import {
5
+ Message,
6
+ MessageOverlay,
7
+ MessageContainer,
8
+ MessageWrapper,
9
+ MessageContent,
10
+ } from "./styles";
11
+ import type { TMessage } from "./typed";
6
12
 
7
- const MessageComponent = ({ timer=500, $type, message, callback }: TMessage) => {
13
+ const MessageComponent = ({
14
+ timer = 500,
15
+ $type,
16
+ message,
17
+ callback,
18
+ onClosed,
19
+ }: TMessage) => {
8
20
  const [isOpen, setOpen] = useStateWithCallbackLazy<boolean>(false);
9
- const [isOpenContainer, setOpenContainer] = useStateWithCallbackLazy<boolean>(false);
21
+ const [isOpenContainer, setOpenContainer] =
22
+ useStateWithCallbackLazy<boolean>(false);
10
23
  const [isClosing, setClosing] = useStateWithCallbackLazy<boolean>(false);
11
-
24
+
12
25
  const evCloseMessage = useCallback(() => {
13
26
  setClosing(!isClosing, () => {
14
- const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
27
+ const bodyEl = document.getElementsByTagName(
28
+ "BODY",
29
+ )[0] as HTMLBodyElement;
15
30
  bodyEl.classList.remove("is-immuned");
16
- callback && callback();
17
- })
18
- }, [callback, setClosing, isClosing])
31
+ callback?.();
32
+ });
33
+ }, [callback, setClosing, isClosing]);
19
34
 
20
35
  const CloseCallback = useCallback(() => {
21
36
  evCloseMessage();
22
- }, [evCloseMessage])
37
+ }, [evCloseMessage]);
23
38
 
24
39
  useEffect(() => {
25
40
  const _timer = timer ? timer : 2000;
26
- const overlayEl = document.querySelector('._refMessageOverlay') as HTMLDivElement;
41
+ const overlayEl = document.querySelector(
42
+ "._refMessageOverlay",
43
+ ) as HTMLDivElement;
27
44
  if (!isOpen && !isClosing) {
28
45
  setOpen(!isOpen, () => {
29
- overlayEl && overlayEl.addEventListener('click', CloseCallback);
46
+ overlayEl && overlayEl.addEventListener("click", CloseCallback);
30
47
  setTimeout(() => {
31
48
  setOpenContainer(!isOpenContainer, () => {
32
- setTimeout(() => !isOpenContainer && evCloseMessage() , _timer);
49
+ setTimeout(() => !isOpenContainer && evCloseMessage(), _timer);
33
50
  });
34
51
  }, 1);
35
52
  });
36
53
  } else if (isOpen && isClosing) {
37
54
  setOpen && setOpen(!isOpen, () => {});
38
55
  setOpenContainer && setOpenContainer(!isOpenContainer, () => {});
39
- overlayEl && overlayEl.removeEventListener('click', CloseCallback);
56
+ overlayEl && overlayEl.removeEventListener("click", CloseCallback);
57
+ onClosed?.();
40
58
  }
41
59
  return () => {
42
- overlayEl && overlayEl.removeEventListener('click', CloseCallback);
43
- }
44
- },[isOpen, isOpenContainer, timer, evCloseMessage, setOpen, setOpenContainer, CloseCallback, isClosing])
60
+ overlayEl && overlayEl.removeEventListener("click", CloseCallback);
61
+ };
62
+ }, [
63
+ isOpen,
64
+ isOpenContainer,
65
+ timer,
66
+ evCloseMessage,
67
+ setOpen,
68
+ setOpenContainer,
69
+ CloseCallback,
70
+ isClosing,
71
+ onClosed,
72
+ ]);
45
73
 
46
74
  return (
47
75
  <Message $isOpen={isOpen}>
48
- <MessageOverlay className='_refMessageOverlay' />
76
+ <MessageOverlay className="_refMessageOverlay" />
49
77
  <MessageContainer>
50
78
  <MessageWrapper $isOpen={isOpenContainer}>
51
79
  <MessageContent $type={$type}>
52
80
  <i />
53
81
  {message}
54
- <ButtonComponent $mode='small-white-round-close' onClick={evCloseMessage} />
82
+ <ButtonComponent
83
+ $mode="small-white-round-close"
84
+ onClick={evCloseMessage}
85
+ />
55
86
  </MessageContent>
56
87
  </MessageWrapper>
57
88
  </MessageContainer>
58
89
  </Message>
59
- )
60
- }
90
+ );
91
+ };
61
92
 
62
- export default MessageComponent
93
+ export default MessageComponent;
package/src/components/message/question.tsx CHANGED
@@ -1,72 +1,124 @@
1
- import { useCallback, useEffect } from 'react';
2
- import { htmlToText } from 'html-to-text';
3
- import { useStateWithCallbackLazy } from 'use-state-with-callback';
4
- import ButtonComponent from '../button';
5
- import TextComponent from '../text';
6
- import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './styles'
7
- import type { TMessageQuestion } from './typed'
1
+ import { useCallback, useEffect } from "react";
2
+ import { htmlToText } from "html-to-text";
3
+ import { useStateWithCallbackLazy } from "use-state-with-callback";
4
+ import ButtonComponent from "../button";
5
+ import TextComponent from "../text";
6
+ import {
7
+ Message,
8
+ MessageOverlay,
9
+ MessageContainer,
10
+ MessageWrapper,
11
+ MessageContent,
12
+ } from "./styles";
13
+ import type { TMessageQuestion } from "./typed";
8
14
 
9
- const MessageQuestionComponent = ({ $type, title, subtitle, callback, buttonSubmit, cancelCallback }: TMessageQuestion) => {
15
+ const MessageQuestionComponent = ({
16
+ $type,
17
+ title,
18
+ subtitle,
19
+ callback,
20
+ buttonSubmit,
21
+ cancelCallback,
22
+ onClosed,
23
+ }: TMessageQuestion) => {
10
24
  const [isOpen, setOpen] = useStateWithCallbackLazy<boolean>(false);
11
- const [isOpenContainer, setOpenContainer] = useStateWithCallbackLazy<boolean>(false);
25
+ const [isOpenContainer, setOpenContainer] =
26
+ useStateWithCallbackLazy<boolean>(false);
12
27
  const [isClosing, setClosing] = useStateWithCallbackLazy<boolean>(false);
13
-
28
+
14
29
  const evCloseMessage = useCallback(() => {
15
30
  setClosing(!isClosing, () => {
16
31
  cancelCallback && cancelCallback();
17
- const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
32
+ const bodyEl = document.getElementsByTagName(
33
+ "BODY",
34
+ )[0] as HTMLBodyElement;
18
35
  bodyEl.classList.remove("is-immuned");
19
- })
20
- },[cancelCallback, isClosing, setClosing])
36
+ });
37
+ }, [cancelCallback, isClosing, setClosing]);
21
38
 
22
39
  const evConfirmButton = () => {
23
40
  setClosing(!isClosing, () => {
24
- const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
41
+ const bodyEl = document.getElementsByTagName(
42
+ "BODY",
43
+ )[0] as HTMLBodyElement;
25
44
  bodyEl.classList.remove("is-immuned");
26
- callback && callback();
27
- })
28
- }
45
+ callback?.();
46
+ });
47
+ };
29
48
 
30
49
  const CloseCallback = useCallback(() => {
31
50
  evCloseMessage();
32
- }, [evCloseMessage])
51
+ }, [evCloseMessage]);
33
52
 
34
53
  useEffect(() => {
35
- const overlayEl = document.querySelector('._refQuestionMessageOverlay') as HTMLDivElement;
54
+ const overlayEl = document.querySelector(
55
+ "._refQuestionMessageOverlay",
56
+ ) as HTMLDivElement;
36
57
  if (!isOpen && !isClosing) {
37
58
  setOpen(!isOpen, () => {
38
59
  setTimeout(() => {
39
60
  setOpenContainer(!isOpenContainer, () => {});
40
- overlayEl && overlayEl.addEventListener('click', CloseCallback);
61
+ overlayEl && overlayEl.addEventListener("click", CloseCallback);
41
62
  }, 1);
42
63
  });
43
64
  } else if (isOpen && isClosing) {
44
65
  setOpen(!isOpen, () => {});
45
66
  setOpenContainer(!isOpenContainer, () => {});
46
- overlayEl && overlayEl.removeEventListener('click', CloseCallback);
67
+ overlayEl && overlayEl.removeEventListener("click", CloseCallback);
68
+ onClosed?.();
47
69
  }
48
- },[isOpen, isOpenContainer, setOpen, setOpenContainer, CloseCallback, isClosing])
70
+ }, [
71
+ isOpen,
72
+ isOpenContainer,
73
+ setOpen,
74
+ setOpenContainer,
75
+ CloseCallback,
76
+ isClosing,
77
+ onClosed,
78
+ ]);
49
79
 
50
80
  return (
51
81
  <Message $isOpen={isOpen}>
52
- <MessageOverlay className='_refQuestionMessageOverlay' $type={$type}></MessageOverlay>
82
+ <MessageOverlay
83
+ className="_refQuestionMessageOverlay"
84
+ $type={$type}
85
+ ></MessageOverlay>
53
86
  <MessageContainer $type={$type}>
54
87
  <MessageWrapper $isOpen={isOpenContainer}>
55
88
  <MessageContent $type={$type}>
56
89
  <i></i>
57
90
  <div>
58
- <TextComponent $elipsis={false} style={{ fontWeight: 600, fontSize: '15px' }}>{title}</TextComponent>
59
- <TextComponent $color='grey' $elipsis={false}>{htmlToText(subtitle)}</TextComponent>
91
+ <TextComponent
92
+ $elipsis={false}
93
+ style={{ fontWeight: 600, fontSize: "15px" }}
94
+ >
95
+ {title}
96
+ </TextComponent>
97
+ <TextComponent $color="grey" $elipsis={false}>
98
+ {htmlToText(subtitle)}
99
+ </TextComponent>
60
100
  <aside>
61
- <ButtonComponent $mode='white' $size='small' onClick={evCloseMessage}>Cancel</ButtonComponent>
62
- <ButtonComponent $mode='red' $size='small' onClick={evConfirmButton}>{buttonSubmit || 'Confirm'}</ButtonComponent>
101
+ <ButtonComponent
102
+ $mode="white"
103
+ $size="small"
104
+ onClick={evCloseMessage}
105
+ >
106
+ Cancel
107
+ </ButtonComponent>
108
+ <ButtonComponent
109
+ $mode="red"
110
+ $size="small"
111
+ onClick={evConfirmButton}
112
+ >
113
+ {buttonSubmit || "Confirm"}
114
+ </ButtonComponent>
63
115
  </aside>
64
116
  </div>
65
117
  </MessageContent>
66
118
  </MessageWrapper>
67
119
  </MessageContainer>
68
120
  </Message>
69
- )
70
- }
121
+ );
122
+ };
71
123
 
72
- export default MessageQuestionComponent
124
+ export default MessageQuestionComponent;
package/src/components/message/typed.ts CHANGED
@@ -1,18 +1,31 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactNode } from "react";
2
2
 
3
3
  export type TMessage = {
4
- timer?: number
5
- $type: string
6
- message: string | ReactNode
7
- callback?: () => void
8
- }
4
+ timer?: number;
5
+ $type: string;
6
+ message: string | ReactNode;
7
+ callback?: () => void;
8
+ onClosed?: () => void;
9
+ };
9
10
  export type TMessageQuestion = {
10
- $type: string
11
- title: string
12
- subtitle: string
13
- callback?: () => void
14
- buttonSubmit?: string
15
- cancelCallback?: () => void
16
- }
17
- export type TMessageFunction = ({ timer, $type, message, callback }: TMessage) => void
18
- export type TMessageQuestionFunction =({ $type, title, subtitle, callback, buttonSubmit }: TMessageQuestion) => void
11
+ $type: string;
12
+ title: string;
13
+ subtitle: string;
14
+ callback?: () => void;
15
+ buttonSubmit?: string;
16
+ cancelCallback?: () => void;
17
+ onClosed?: () => void;
18
+ };
19
+ export type TMessageFunction = ({
20
+ timer,
21
+ $type,
22
+ message,
23
+ callback,
24
+ }: TMessage) => void;
25
+ export type TMessageQuestionFunction = ({
26
+ $type,
27
+ title,
28
+ subtitle,
29
+ callback,
30
+ buttonSubmit,
31
+ }: TMessageQuestion) => void;
package/src/components/select/all.tsx CHANGED
@@ -128,6 +128,9 @@ const SelectAllComponent = (props: TSelect) => {
128
128
  borderRadius: ".5rem",
129
129
  cursor: "pointer",
130
130
  minHeight: mode === "store" ? "30px" : "38px",
131
+ height: "100%",
132
+ maxHeight: "300px",
133
+ overflow: "hidden",
131
134
  borderWidth: isError ? "1px" : "0",
132
135
  boxShadow: state.isFocused
133
136
  ? "-.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset"
@@ -196,7 +199,9 @@ const SelectAllComponent = (props: TSelect) => {
196
199
  valueContainer: (provided: CSSObject) =>
197
200
  ({
198
201
  ...provided,
199
- height: "30px",
202
+ height: "100%",
203
+ maxHeight: "300px",
204
+ minHeight: "30px",
200
205
  overflow: "auto",
201
206
  paddingTop: "0",
202
207
  paddingBottom: "0",
package/src/components/select/asyncPaginate.tsx CHANGED
@@ -148,7 +148,8 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
148
148
  width: "100%",
149
149
  borderRadius: ".5rem",
150
150
  minHeight: "1px",
151
- height: isMulti ? "auto" : mode === "small" ? "30px" : "32px",
151
+ height: isMulti ? "100%" : mode === "small" ? "30px" : "32px",
152
+ maxHeight: "300px",
152
153
  cursor: "pointer",
153
154
  borderWidth: isError ? "1px" : "0",
154
155
  boxShadow: state.isFocused
@@ -227,13 +228,18 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
227
228
  ({
228
229
  ...provided,
229
230
  minHeight: "1px",
230
- height:
231
- mode === "multi-select" ? "70px" : mode === "small" ? "30px" : "32px",
231
+ height: isMulti
232
+ ? "100%"
233
+ : mode === "multi-select"
234
+ ? "70px"
235
+ : mode === "small"
236
+ ? "30px"
237
+ : "32px",
232
238
  paddingTop: isMulti ? "4px" : "0",
233
239
  paddingBottom: isMulti ? "4px" : "0",
234
240
  paddingLeft: iconLeft ? "28px" : "8px",
235
241
  paddingRight: "2px",
236
- maxHeight: isMulti ? "60px" : "unset",
242
+ maxHeight: isMulti ? "300px" : "unset",
237
243
  overflow: isMulti ? "auto" : "initial",
238
244
  alignContent: isMulti ? "flex-start" : "initial",
239
245
  }) as CSSObjectWithLabel,
package/src/components/select/index.tsx CHANGED
@@ -303,12 +303,18 @@ const SelectComponent = ({
303
303
  borderRadius: ".5rem",
304
304
  minHeight:
305
305
  mode === "multi" ? "50px" : mode === "picklist" ? "30px" : "1px",
306
- height:
307
- mode === "multi"
306
+ height: isMulti
307
+ ? "100%"
308
+ : mode === "multi"
308
309
  ? "auto"
309
310
  : (height ?? (mode === "orders" ? "90px" : "30px")),
310
- maxHeight:
311
- mode === "multi" ? "120px" : mode === "picklist" ? "46px" : "none",
311
+ maxHeight: isMulti
312
+ ? "300px"
313
+ : mode === "multi"
314
+ ? "120px"
315
+ : mode === "picklist"
316
+ ? "46px"
317
+ : "none",
312
318
  cursor: "pointer",
313
319
  borderWidth: isError ? "1px" : "0",
314
320
  boxShadow: state.isFocused
@@ -323,8 +329,9 @@ const SelectComponent = ({
323
329
  ? "#ffffff"
324
330
  : " var(--ck-clr-ln)",
325
331
  background: state.isFocused ? "rgba(247, 247, 247, 1)" : "#ffffff",
326
- overflow:
327
- mode === "multi"
332
+ overflow: isMulti
333
+ ? "hidden"
334
+ : mode === "multi"
328
335
  ? "auto"
329
336
  : mode === "picklist"
330
337
  ? "hidden"
@@ -391,12 +398,20 @@ const SelectComponent = ({
391
398
  valueContainer: (provided: CSSObject) =>
392
399
  ({
393
400
  ...provided,
394
- height: mode === "multi" ? "auto" : "30px",
395
- maxHeight:
396
- mode === "multi" ? "114px" : mode === "picklist" ? "46px" : "none",
401
+ height: isMulti ? "100%" : mode === "multi" ? "auto" : "30px",
402
+ maxHeight: isMulti
403
+ ? "300px"
404
+ : mode === "multi"
405
+ ? "114px"
406
+ : mode === "picklist"
407
+ ? "46px"
408
+ : "none",
397
409
  minHeight:
398
410
  mode === "multi" ? "44px" : mode === "picklist" ? "30px" : "1px",
399
- overflow: mode === "multi" || mode === "picklist" ? "auto" : "initial",
411
+ overflow:
412
+ isMulti || mode === "multi" || mode === "picklist"
413
+ ? "auto"
414
+ : "initial",
400
415
  paddingTop: "0",
401
416
  paddingBottom: "0",
402
417
  paddingRight: "2px",