@capillarytech/blaze-ui 6.0.1 → 6.1.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 (8) hide show
  1. package/CapSelectFilter/index.d.ts.map +1 -1
  2. package/CapSelectFilter/index.js +10 -11
  3. package/CapSelectFilter/styles.css +11 -10
  4. package/CapSelectFilter/styles.module.scss.js +8 -10
  5. package/CapSelectFilter/styles.scss +11 -8
  6. package/CapSelectFilter/types.d.ts +1 -1
  7. package/CapSelectFilter/types.d.ts.map +1 -1
  8. package/package.json +1 -1
package/CapSelectFilter/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0DnD,CAAC;AAEF,eAAe,eAAe,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyDnD,CAAC;AAEF,eAAe,eAAe,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
package/CapSelectFilter/index.js CHANGED
@@ -11,8 +11,8 @@ const renderMenuItem = (items, selectedValue) => {
11
11
  return items.map((item) => ({
12
12
  key: item.key,
13
13
  label: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", children: item.label }),
14
- className: classNames(styles["menu-item"], {
15
- [styles["menu-item-selected"]]: item.value === selectedValue
14
+ className: classNames(styles[`${clsPrefix}-dropdown-menu-item`], {
15
+ [styles[`${clsPrefix}-dropdown-menu-item-selected`]]: item.value === selectedValue
16
16
  }),
17
17
  "data-value": item.value
18
18
  }));
@@ -21,7 +21,7 @@ const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
21
21
  return /* @__PURE__ */ jsx(
22
22
  "div",
23
23
  {
24
- className: styles["menu-wrapper"],
24
+ className: styles[`${clsPrefix}-dropdown-menu-wrapper`],
25
25
  style: {
26
26
  maxHeight: dropdownMaxHeight,
27
27
  width: dropdownWidth,
@@ -34,11 +34,11 @@ const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
34
34
  const CapSelectFilter = ({
35
35
  className,
36
36
  overlayClassName,
37
+ triggerClass,
37
38
  onSelect,
38
39
  selectedValue,
39
40
  placeholder,
40
41
  placement = "bottomLeft",
41
- width = "fit-content",
42
42
  dropdownMaxHeight = "320px",
43
43
  dropdownWidth = "228px",
44
44
  data = [],
@@ -67,22 +67,21 @@ const CapSelectFilter = ({
67
67
  trigger: ["click"],
68
68
  menu: { items: renderMenuItem(data, selectedValue), onClick: handleMenuClick },
69
69
  className: classNames(styles[clsPrefix]),
70
- overlayClassName: classNames(`${clsPrefix}-overlay`, overlayClassName),
70
+ overlayClassName: classNames(styles[clsPrefix], `${clsPrefix}-overlay`, overlayClassName),
71
71
  dropdownRender: (menu) => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
72
72
  getPopupContainer: (trigger) => trigger.parentNode,
73
73
  ...rest,
74
74
  children: /* @__PURE__ */ jsxs(
75
75
  "div",
76
76
  {
77
- className: classNames(styles["styled-div"], className, {
78
- [styles["styled-div-selected"]]: selectedValue,
79
- [styles["styled-div-with-badge"]]: Boolean(showBadge) && Boolean(selectedValue)
77
+ className: classNames(styles[`${clsPrefix}-trigger`], className, triggerClass, {
78
+ [styles[`${clsPrefix}-trigger-selected`]]: selectedValue,
79
+ [styles[`${clsPrefix}-trigger-with-badge`]]: Boolean(showBadge) && Boolean(selectedValue)
80
80
  }),
81
- style: { width },
82
81
  children: [
83
82
  /* @__PURE__ */ jsx(CapLabelInline, { type: "label9", children: placeholder }),
84
- showBadge && selectedValue && /* @__PURE__ */ jsx("div", { className: styles["badge"], children: [selectedValue].length }),
85
- /* @__PURE__ */ jsx(CapIcon, { className: styles["dropdown-icon"], type: "down", size: "s" })
83
+ showBadge && selectedValue && /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-trigger-badge`], children: [selectedValue].length }),
84
+ /* @__PURE__ */ jsx(CapIcon, { className: styles[`${clsPrefix}-trigger-icon`], type: "down", size: "s" })
86
85
  ]
87
86
  }
88
87
  )
package/CapSelectFilter/styles.css CHANGED
@@ -9,7 +9,8 @@
9
9
  .cap-select-filter-v2 {
10
10
  display: inline-block;
11
11
  }
12
- .styled-div {
12
+ .cap-select-filter-v2-trigger {
13
+ width: fit-content;
13
14
  position: relative;
14
15
  display: flex;
15
16
  align-items: center;
@@ -21,32 +22,32 @@
21
22
  cursor: pointer;
22
23
  transition: all 0.3s ease;
23
24
  }
24
- .styled-div:hover {
25
+ .cap-select-filter-v2-trigger:hover {
25
26
  border-color: #091e42;
26
27
  }
27
- .styled-div.styled-div-selected {
28
+ .cap-select-filter-v2-trigger.cap-select-filter-v2-trigger-selected {
28
29
  border: none;
29
30
  background-color: #ecece7;
30
31
  }
31
- .styled-div.ant-dropdown-open {
32
+ .cap-select-filter-v2-trigger.ant-dropdown-open {
32
33
  border-color: #091e42;
33
34
  }
34
- .menu-wrapper {
35
+ .cap-select-filter-v2-dropdown-menu-wrapper {
35
36
  border: 0.071rem solid #e8e8e8;
36
37
  }
37
- .menu-wrapper .ant-dropdown-menu {
38
+ .cap-select-filter-v2-dropdown-menu-wrapper .ant-dropdown-menu {
38
39
  border: none;
39
40
  box-shadow: none;
40
41
  }
41
- .menu-item {
42
+ .cap-select-filter-v2-dropdown-menu-item {
42
43
  background-color: transparent;
43
44
  border-left: 0.214rem solid transparent;
44
45
  }
45
- .menu-item.menu-item-selected {
46
+ .cap-select-filter-v2-dropdown-menu-item.cap-select-filter-v2-dropdown-menu-item-selected {
46
47
  background-color: #e9f0fe;
47
48
  border-left-color: #2466ea;
48
49
  }
49
- .badge {
50
+ .cap-select-filter-v2-trigger-badge {
50
51
  display: flex;
51
52
  align-items: center;
52
53
  justify-content: center;
@@ -60,7 +61,7 @@
60
61
  font-weight: 500;
61
62
  line-height: normal;
62
63
  }
63
- .dropdown-icon {
64
+ .cap-select-filter-v2-trigger-icon {
64
65
  position: relative;
65
66
  width: 1.786rem;
66
67
  min-width: 1.786rem;
package/CapSelectFilter/styles.module.scss.js CHANGED
@@ -1,16 +1,14 @@
1
- import './styles.css';const badge = "badge";
2
- const styles = {
1
+ import './styles.css';const styles = {
3
2
  "cap-select-filter-v2": "cap-select-filter-v2",
4
- "styled-div": "styled-div",
5
- "styled-div-selected": "styled-div-selected",
3
+ "cap-select-filter-v2-trigger": "cap-select-filter-v2-trigger",
4
+ "cap-select-filter-v2-trigger-selected": "cap-select-filter-v2-trigger-selected",
6
5
  "ant-dropdown-open": "ant-dropdown-open",
7
- "menu-wrapper": "menu-wrapper",
8
- "menu-item": "menu-item",
9
- "menu-item-selected": "menu-item-selected",
10
- badge,
11
- "dropdown-icon": "dropdown-icon"
6
+ "cap-select-filter-v2-dropdown-menu-wrapper": "cap-select-filter-v2-dropdown-menu-wrapper",
7
+ "cap-select-filter-v2-dropdown-menu-item": "cap-select-filter-v2-dropdown-menu-item",
8
+ "cap-select-filter-v2-dropdown-menu-item-selected": "cap-select-filter-v2-dropdown-menu-item-selected",
9
+ "cap-select-filter-v2-trigger-badge": "cap-select-filter-v2-trigger-badge",
10
+ "cap-select-filter-v2-trigger-icon": "cap-select-filter-v2-trigger-icon"
12
11
  };
13
12
  export {
14
- badge,
15
13
  styles as default
16
14
  };
package/CapSelectFilter/styles.scss CHANGED
@@ -1,10 +1,13 @@
1
1
  @import '../styles/_variables';
2
2
 
3
- .cap-select-filter-v2 {
3
+ $cap-select-filter-v2-prefix: 'cap-select-filter-v2';
4
+
5
+ .#{$cap-select-filter-v2-prefix} {
4
6
  display: inline-block;
5
7
  }
6
8
 
7
- .styled-div {
9
+ .#{$cap-select-filter-v2-prefix}-trigger {
10
+ width: fit-content;
8
11
  position: relative;
9
12
  display: flex;
10
13
  align-items: center;
@@ -20,7 +23,7 @@
20
23
  border-color: $cap-g01;
21
24
  }
22
25
 
23
- &.styled-div-selected {
26
+ &.#{$cap-select-filter-v2-prefix}-trigger-selected {
24
27
  border: none;
25
28
  background-color: $cap-g13;
26
29
  }
@@ -30,7 +33,7 @@
30
33
  }
31
34
  }
32
35
 
33
- .menu-wrapper {
36
+ .#{$cap-select-filter-v2-prefix}-dropdown-menu-wrapper {
34
37
  border: $border-width-1 solid $cap-g12;
35
38
 
36
39
  :global(.ant-dropdown-menu) {
@@ -39,17 +42,17 @@
39
42
  }
40
43
  }
41
44
 
42
- .menu-item {
45
+ .#{$cap-select-filter-v2-prefix}-dropdown-menu-item {
43
46
  background-color: transparent;
44
47
  border-left: 0.214rem solid transparent;
45
48
 
46
- &.menu-item-selected {
49
+ &.#{$cap-select-filter-v2-prefix}-dropdown-menu-item-selected {
47
50
  background-color: $cap-pale-grey;
48
51
  border-left-color: $font-color-05;
49
52
  }
50
53
  }
51
54
 
52
- .badge {
55
+ .#{$cap-select-filter-v2-prefix}-trigger-badge {
53
56
  display: flex;
54
57
  align-items: center;
55
58
  justify-content: center;
@@ -64,7 +67,7 @@
64
67
  line-height: $normal-line-height;
65
68
  }
66
69
 
67
- .dropdown-icon {
70
+ .#{$cap-select-filter-v2-prefix}-trigger-icon {
68
71
  position: relative;
69
72
  width: 1.786rem; // 25px
70
73
  min-width: 1.786rem;
package/CapSelectFilter/types.d.ts CHANGED
@@ -8,12 +8,12 @@ export interface CapSelectFilterMenuItem {
8
8
  export interface CapSelectFilterProps extends Omit<DropdownProps, 'menu' | 'overlay' | 'overlayStyle' | 'onOpenChange'> {
9
9
  className?: string;
10
10
  overlayClassName?: string;
11
+ triggerClass?: string;
11
12
  onSelect?: (event: React.MouseEvent<HTMLElement>) => void;
12
13
  onOpenChange?: (open: boolean) => void;
13
14
  selectedValue?: string;
14
15
  placeholder?: string | React.ReactNode;
15
16
  placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
16
- width?: string;
17
17
  dropdownMaxHeight?: string;
18
18
  dropdownWidth?: string;
19
19
  data?: CapSelectFilterMenuItem[];
package/CapSelectFilter/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@capillarytech/blaze-ui",
3
- "version": "6.0.1",
3
+ "version": "6.1.0",
4
4
  "description": "Capillary UI component library with Ant Design v6",
5
5
  "main": "index.js",
6
6
  "module": "dist/index.js",