diginet-core-ui 1.3.63 → 1.3.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,3 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M21 3.00006L3 10.5301V11.5101L9.84 14.1601L12.48 21.0001H13.46L21 3.00006Z" fill="#7F828E"/>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M39 0L0 16.315V18.4383L14.82 24.18L20.54 39H22.6633L39 0Z" fill="#FFAA00"/>
3
3
  </svg>
@@ -1,7 +1,7 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M16 9.50006C17.46 9.50006 18.78 10.0701 19.76 11.0001H21V9.00006H3V11.0001H12.24C13.22 10.0701 14.54 9.50006 16 9.50006Z" fill="#7F828E"/>
3
- <path d="M21 5.00006H3V7.00006H21V5.00006Z" fill="#7F828E"/>
4
- <path d="M10.88 17.0001H3V19.0001H12.24C11.65 18.4501 11.18 17.7701 10.88 17.0001Z" fill="#7F828E"/>
5
- <path d="M10.88 13.0001H3V15.0001H10.5C10.5 14.2901 10.64 13.6201 10.88 13.0001Z" fill="#7F828E"/>
6
- <path d="M19.43 17.0201C19.79 16.4301 20 15.7401 20 15.0001C20 12.7901 18.21 11.0001 16 11.0001C13.79 11.0001 12 12.7901 12 15.0001C12 17.2101 13.79 19.0001 16 19.0001C16.74 19.0001 17.43 18.7801 18.02 18.4301L20.59 21.0001L22 19.5901L19.43 17.0201ZM16 17.0001C14.9 17.0001 14 16.1001 14 15.0001C14 13.9001 14.9 13.0001 16 13.0001C17.1 13.0001 18 13.9001 18 15.0001C18 16.1001 17.1 17.0001 16 17.0001Z" fill="#7F828E"/>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M26.6842 15.0263C29.6811 15.0263 32.3906 16.1964 34.4021 18.1053H36.9474V14H0V18.1053H18.9663C20.9779 16.1964 23.6874 15.0263 26.6842 15.0263Z" fill="#2680EB"/>
3
+ <path d="M36.9474 5.78943H0V9.8947H36.9474V5.78943Z" fill="#2680EB"/>
4
+ <path d="M16.1748 30.4211H0V34.5264H18.9663C17.7553 33.3975 16.7905 32.0017 16.1748 30.4211Z" fill="#2680EB"/>
5
+ <path d="M16.1748 22.2106H0V26.3159H15.3948C15.3948 24.8585 15.6821 23.4833 16.1748 22.2106Z" fill="#2680EB"/>
6
+ <path d="M33.7247 30.4622C34.4637 29.2512 34.8947 27.8349 34.8947 26.3159C34.8947 21.7796 31.2205 18.1054 26.6842 18.1054C22.1479 18.1054 18.4737 21.7796 18.4737 26.3159C18.4737 30.8522 22.1479 34.5264 26.6842 34.5264C28.2032 34.5264 29.6195 34.0749 30.8305 33.3564L36.1058 38.6317L39 35.7375L33.7247 30.4622ZM26.6842 30.4212C24.4263 30.4212 22.5789 28.5738 22.5789 26.3159C22.5789 24.058 24.4263 22.2106 26.6842 22.2106C28.9421 22.2106 30.7895 24.058 30.7895 26.3159C30.7895 28.5738 28.9421 30.4212 26.6842 30.4212Z" fill="#2680EB"/>
7
7
  </svg>
@@ -1,14 +1,7 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0)">
3
- <path d="M16.08 11.5401H18.08V4.5401C18.08 3.4401 17.18 2.5401 16.08 2.5401H4.07996C2.97996 2.5401 2.07996 3.4401 2.07996 4.5401V16.5401C2.07996 17.6401 2.97996 18.5401 4.07996 18.5401H11.08V16.5401H4.07996V4.3201H16.08V11.5401Z" fill="#7F828E"/>
4
- <path d="M14.08 12.5401H6.07996V14.5401H14.08V12.5401Z" fill="#7F828E"/>
5
- <path d="M11.08 11.5401H14.08V9.5401H6.07996V11.5401H11.08Z" fill="#7F828E"/>
6
- <path d="M14.08 6.5401H6.07996V8.5401H14.08V6.5401Z" fill="#7F828E"/>
7
- <path fill-rule="evenodd" clip-rule="evenodd" d="M15.39 21.4601L11.92 17.9601L13.32 16.5501L15.39 18.6301L20.52 13.4601L21.92 14.8701L15.39 21.4601Z" fill="#7F828E"/>
8
- </g>
9
- <defs>
10
- <clipPath id="clip0">
11
- <rect width="24" height="24" fill="white"/>
12
- </clipPath>
13
- </defs>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M27.3858 19.5953H31.298V5.90247C31.298 3.75074 29.5375 1.99023 27.3858 1.99023H3.91224C1.76051 1.99023 0 3.75074 0 5.90247V29.3759C0 31.5276 1.76051 33.2882 3.91224 33.2882H17.6052V29.3759H3.91224V5.47213H27.3858V19.5953Z" fill="#1CA261"/>
3
+ <path d="M23.4736 21.5514H7.82455V25.4637H23.4736V21.5514Z" fill="#1CA261"/>
4
+ <path d="M23.4736 19.5953V15.6831H7.82455V19.5953H23.4736Z" fill="#1CA261"/>
5
+ <path d="M23.4736 9.81473H7.82455V13.727H23.4736V9.81473Z" fill="#1CA261"/>
6
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M26.0363 39L19.2485 32.1536L21.9871 29.3954L26.0363 33.4642L36.0712 23.351L38.8097 26.1092L26.0363 39Z" fill="#1CA261"/>
14
7
  </svg>
@@ -1,5 +1,5 @@
1
- <svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M16.7895 17.135L20.0096 19L19.1551 15.485L22 13.12L18.2536 12.815L16.7895 9.5L15.3253 12.815L11.5789 13.12L14.4239 15.485L13.5694 19L16.7895 17.135Z" fill="#7F828E"/>
3
- <path d="M9.26316 9.5C11.8221 9.5 13.8947 7.37438 13.8947 4.75C13.8947 2.12562 11.8221 0 9.26316 0C6.70421 0 4.63158 2.12562 4.63158 4.75C4.63158 7.37438 6.70421 9.5 9.26316 9.5Z" fill="#7F828E"/>
4
- <path d="M6.69907 12.1373C3.61621 12.7076 0 14.2071 0 16.625V19H11.2779L11.896 16.4575L6.69907 12.1373Z" fill="#7F828E"/>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M29.7632 35.7608L35.4715 39L33.9567 32.895L39 28.7874L32.3587 28.2576L29.7632 22.5L27.1676 28.2576L20.5263 28.7874L25.5696 32.895L24.0548 39L29.7632 35.7608Z" fill="#FF8C00"/>
3
+ <path d="M16.4211 22.5C20.9574 22.5 24.6316 18.8081 24.6316 14.25C24.6316 9.69187 20.9574 6 16.4211 6C11.8847 6 8.21053 9.69187 8.21053 14.25C8.21053 18.8081 11.8847 22.5 16.4211 22.5Z" fill="#FF8C00"/>
4
+ <path d="M11.8756 27.0805C6.41056 28.0711 0 30.6754 0 34.875V39H19.9926L21.0884 34.584L11.8756 27.0805Z" fill="#FF8C00"/>
5
5
  </svg>
@@ -1,6 +1,5 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <g id="Group_4" data-name="Group 4" transform="translate(-904.173 -528.063)">
3
- <rect id="Rectangle_2" data-name="Rectangle 2" width="24" height="24" transform="translate(904.173 528.063)" fill="none"/>
4
- <path id="Path_1" data-name="Path 1" d="M-14.66-100.938v20a10.017,10.017,0,0,1-9-10A10.017,10.017,0,0,1-14.66-100.938Zm2.03,0v8.99h8.97A10.044,10.044,0,0,0-12.63-100.938Zm0,11.011v8.989a10.034,10.034,0,0,0,8.97-8.989Z" transform="translate(929.832 631)"/>
5
- </g>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M17.55 0V39C7.66 38.03 0 29.66 0 19.5C0 9.34 7.66 0.98 17.55 0Z" fill="#1CA261"/>
3
+ <path d="M21.5098 0V17.53H38.9998C38.0798 8.29 30.7298 0.92 21.5098 0Z" fill="#FF8C00"/>
4
+ <path d="M21.5098 21.47V39C30.7498 38.08 38.0898 30.71 38.9998 21.47H21.5098Z" fill="#FF4444"/>
6
5
  </svg>
@@ -1,6 +1,5 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <g id="Group_4" data-name="Group 4" transform="translate(-904.173 -528.063)">
3
- <rect id="Rectangle_2" data-name="Rectangle 2" width="24" height="24" transform="translate(904.173 528.063)" fill="none"/>
4
- <path id="Path_1" data-name="Path 1" d="M-14.66-100.938v20a10.017,10.017,0,0,1-9-10A10.017,10.017,0,0,1-14.66-100.938Zm2.03,0v8.99h8.97A10.044,10.044,0,0,0-12.63-100.938Zm0,11.011v8.989a10.034,10.034,0,0,0,8.97-8.989Z" transform="translate(929.832 631)"/>
5
- </g>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M17.55 0V39C7.66 38.03 0 29.66 0 19.5C0 9.34 7.66 0.98 17.55 0Z" fill="#1CA261"/>
3
+ <path d="M21.5098 0V17.53H38.9998C38.0798 8.29 30.7298 0.92 21.5098 0Z" fill="#FF8C00"/>
4
+ <path d="M21.5098 21.47V39C30.7498 38.08 38.0898 30.71 38.9998 21.47H21.5098Z" fill="#FF4444"/>
6
5
  </svg>
@@ -1,6 +1,4 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="26.293" height="24.102" viewBox="0 0 26.293 24.102">
2
- <g id="hosonhanvien_mss" transform="translate(0 -2.5)">
3
- <path id="Path_3972" data-name="Path 3972" d="M17.973,21.295,13.787,19.2a1.153,1.153,0,0,1-.64-1.036V16.684c.1-.123.206-.262.315-.417a10.029,10.029,0,0,0,1.294-2.541,1.739,1.739,0,0,0,1.02-1.585V10.388a1.748,1.748,0,0,0-.438-1.15V6.907a3.928,3.928,0,0,0-.917-2.859A5.516,5.516,0,0,0,10.079,2.5,5.517,5.517,0,0,0,5.737,4.047,3.929,3.929,0,0,0,4.82,6.906V9.237a1.748,1.748,0,0,0-.438,1.15V12.14A1.743,1.743,0,0,0,5.038,13.5a9.2,9.2,0,0,0,1.535,3.171v1.45a1.158,1.158,0,0,1-.6,1.017L2.06,21.273A3.953,3.953,0,0,0,0,24.745V26.6H20.158V24.83A3.932,3.932,0,0,0,17.973,21.295Z" transform="translate(0)" fill="#707070"/>
4
- <path id="Path_3973" data-name="Path 3973" d="M42,24.679l-4.261-1.845a.868.868,0,0,1-.308-.338l2.859,0s.165.016.422.016a4.6,4.6,0,0,0,1.753-.31,1.3,1.3,0,0,0,.545-1.941c-.817-1.163-2.725-4.2-2.784-7.284,0-.053-.174-5.295-5.351-5.337a6.5,6.5,0,0,0-1.478.181,4.734,4.734,0,0,1,.291,2.005V11.9a2.394,2.394,0,0,1,.438,1.376v1.753a2.409,2.409,0,0,1-1.142,2.043,10.651,10.651,0,0,1-1.292,2.463q-.1.14-.194.265v1.253a.492.492,0,0,0,.277.448l4.186,2.093a4.585,4.585,0,0,1,2.548,4.124v1.773h5.478v-1.62A3.543,3.543,0,0,0,42,24.679Z" transform="translate(-17.696 -2.886)" fill="#707070"/>
5
- </g>
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M36.1201 27.93L29.9501 25.26C29.7601 25.14 29.6101 24.97 29.5001 24.77H33.6401C33.6401 24.77 33.8801 24.79 34.2501 24.79C35.1201 24.81 35.9801 24.65 36.7901 24.34C37.7401 23.92 38.1801 22.81 37.7601 21.86C37.7101 21.75 37.6501 21.64 37.5801 21.53C36.4001 19.84 33.6301 15.44 33.5501 10.98C33.5501 10.9 33.3001 3.32 25.8001 3.25C25.7101 3.25 25.6301 3.26 25.5401 3.27C25.4501 3.27 25.3701 3.25 25.2801 3.25C25.2301 3.25 25.1801 3.26 25.1301 3.26C25.6001 4.4 25.8001 5.62 25.7101 6.87V9.75C26.1501 10.47 26.3801 11.31 26.3901 12.16V14.87C26.3901 16.39 25.6501 17.8 24.4501 18.67C23.9401 19.99 23.2701 21.24 22.4501 22.4C22.4101 22.46 22.3701 22.51 22.3301 22.57V24.05L28.6801 27.22C31.4501 28.6 33.1701 31.38 33.1601 34.48V38.98H39.0001V32.53C39.0001 30.58 37.8901 28.79 36.1201 27.93Z" fill="#6AD2FF"/>
3
+ <path d="M27.78 29.03L21.31 25.8C20.7 25.5 20.32 24.88 20.32 24.2V21.9C20.47 21.71 20.64 21.49 20.8 21.26C21.65 20.05 22.32 18.73 22.8 17.33C23.76 16.89 24.38 15.94 24.38 14.88V12.18C24.38 11.53 24.14 10.89 23.7 10.4V6.8C23.83 5.2 23.32 3.61 22.29 2.38C20.9 0.8 18.64 0 15.58 0C12.52 0 10.26 0.8 8.87 2.39C7.83 3.62 7.32 5.2 7.45 6.81V10.41C7.02 10.9 6.78 11.53 6.77 12.19V14.89C6.77 15.71 7.14 16.48 7.78 16.99C8.25 18.76 9.05 20.42 10.15 21.89V24.13C10.15 24.78 9.79 25.39 9.22 25.7L3.18 28.99C1.22 30.06 0 32.12 0 34.35V39H31.16V34.49C31.17 32.17 29.86 30.05 27.78 29.03Z" fill="#199FFF"/>
6
4
  </svg>
@@ -367,6 +367,9 @@ ButtonIcon.propTypes = {
367
367
  /** If `true`, the loading indicator is shown. */
368
368
  loading: PropTypes.bool,
369
369
 
370
+ /** Callback fired when the component is clicked. */
371
+ onClick: PropTypes.func,
372
+
370
373
  /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
371
374
  name: PropTypes.string,
372
375
 
@@ -77,14 +77,14 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
77
77
  inputRef.current.checked = !oldLogicChecked; //Use for TreeView
78
78
  }
79
79
 
80
- setChecked(checked !== undefined ? checked : !checkedState);
80
+ setChecked(checked !== undefined ? Boolean(checked) : !checkedState);
81
81
  const e = {
82
82
  value: forTreeView ? oldLogicChecked : !checkedState,
83
83
  target: forTreeView ? inputRef.current : { ...inputRef.current,
84
84
  checked: !checkedState
85
85
  }
86
86
  };
87
- if (onChange) onChange(e, checked);
87
+ if (onChange) onChange(e, checkedState);
88
88
  };
89
89
 
90
90
  const setChecked = check => {
@@ -94,7 +94,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
94
94
  };
95
95
 
96
96
  useEffect(() => {
97
- if (checked !== undefined) setChecked(checked);
97
+ if (checked !== undefined) setCheckedState(Boolean(checked));
98
98
  }, [checked]);
99
99
  useImperativeHandle(reference, () => {
100
100
  const currentRef = ref.current || {};
@@ -284,7 +284,7 @@ Checkbox.defaultProps = {
284
284
  };
285
285
  Checkbox.propTypes = {
286
286
  /** If `true`, the component is checked. */
287
- checked: PropTypes.bool,
287
+ checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
288
288
 
289
289
  /** Class for component. */
290
290
  className: PropTypes.string,
@@ -293,7 +293,7 @@ Checkbox.propTypes = {
293
293
  color: PropTypes.string,
294
294
 
295
295
  /** The default checked state. Use when the component is not controlled. */
296
- defaultChecked: PropTypes.bool,
296
+ defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
297
297
 
298
298
  /** If `true` display tick or indeterminate if `false`. */
299
299
  determinate: PropTypes.bool,
@@ -175,7 +175,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
175
175
  var _inputRef$current$chi;
176
176
 
177
177
  inputRef.current.innerHTML = inputRef.current.textContent.trim();
178
- inputRef.current.contentEditable = true;
178
+ if (!allowSearch) inputRef.current.contentEditable = true;
179
179
  const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
180
180
  const range = document.createRange();
181
181
  range.setStart(inputRef.current, caret);
@@ -1202,7 +1202,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
1202
1202
  inputRef.current.addEventListener('input', onChangeInput);
1203
1203
  !!onLoadMore && dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
1204
1204
  } else {
1205
- if (multiple) {
1205
+ if (multiple || allowSearch) {
1206
1206
  inputRef.current.contentEditable = false;
1207
1207
  }
1208
1208
  }
@@ -1220,7 +1220,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
1220
1220
  inputRef.current.removeEventListener('click', onClickInput);
1221
1221
  inputRef.current.removeEventListener('input', onChangeInput);
1222
1222
  } else {
1223
- if (multiple) {
1223
+ if (multiple && !allowSearch) {
1224
1224
  inputRef.current.contentEditable = true;
1225
1225
  }
1226
1226
  }
@@ -1313,7 +1313,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
1313
1313
  return false;
1314
1314
  }
1315
1315
  }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
1316
- contentEditable: !disabled,
1316
+ contentEditable: !disabled && !allowSearch,
1317
1317
  style: inputStyle,
1318
1318
  ref: inputRef,
1319
1319
  css: _DropdownInputCSS,
@@ -1330,7 +1330,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
1330
1330
  css: _DropdownInputCSS,
1331
1331
  type: "text",
1332
1332
  placeholder: placeholder,
1333
- disabled: disabled
1333
+ disabled: disabled || openState && allowSearch
1334
1334
  })), jsx("div", {
1335
1335
  ref: iconRef,
1336
1336
  css: _IconCSS,
@@ -1752,7 +1752,7 @@ Dropdown.defaultProps = {
1752
1752
  readOnly: false,
1753
1753
  required: false,
1754
1754
  multiple: false,
1755
- allowSearch: false,
1755
+ allowSearch: true,
1756
1756
  inputProps: {},
1757
1757
  formStyle: {},
1758
1758
  dataSource: [],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "diginet-core-ui",
3
- "version": "1.3.63",
3
+ "version": "1.3.64",
4
4
  "description": "The DigiNet core ui",
5
5
  "homepage": "https://diginet.com.vn",
6
6
  "main": "index.js",
package/readme.md CHANGED
@@ -38,6 +38,13 @@ npm test
38
38
  ```
39
39
 
40
40
  ## Changelog
41
+ ## 1.3.64
42
+ - \[Added\]: COLORS – Add new colors
43
+ - \[Changed\]: Checkbox – Add case checked, defaultChecked is number 0,1
44
+ - \[Changed\]: IconMenu – Update IconMenu colored
45
+ - \[Fixed\]: ButtonIcon – Add onClick to propTypes
46
+ - \[Fixed\]: Dropdown – Change default allowSearch true, prevent typing in input
47
+
41
48
  ## 1.3.63
42
49
  - \[Changed\]: Collapse – Add props onClosed, onOpened
43
50
 
package/styles/colors.js CHANGED
@@ -253,7 +253,17 @@ export const color = {
253
253
  blue17: '#B5D9FF',
254
254
  blue18: '#ABD3FF',
255
255
  blue19: '#A0CEFF',
256
- blue20: '#96C8FF'
256
+ blue20: '#96C8FF',
257
+ //aqua
258
+ aqua5: '#00C4DF',
259
+ //pistachio
260
+ pistachio5: '#94C800',
261
+ //pumpkin
262
+ pumpkin5: '#FF7612',
263
+ //magenta
264
+ magenta5: '#DA30B4',
265
+ //violet
266
+ violet5: '#A430FF'
257
267
  };
258
268
  color.semantic = {
259
269
  danger: color.danger5,