allaw-ui 1.0.106 → 1.0.108

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 (4) hide show
  1. package/dist/components/atoms/selects/Select.d.ts +0 -1
  2. package/dist/components/atoms/selects/Select.js +13 -13
  3. package/dist/components/atoms/selects/{Select.css → Select.module.css} +12 -13
  4. package/package.json +1 -1
package/dist/components/atoms/selects/Select.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import "./Select.css";
3
2
  import "../../../styles/global.css";
4
3
  export interface SelectItem {
5
4
  label: string;
package/dist/components/atoms/selects/Select.js CHANGED
@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
9
9
  };
10
10
  import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, } from "react";
11
11
  import ReactDOM from "react-dom";
12
- import "./Select.css";
12
+ import styles from "./Select.module.css";
13
13
  import "../../../styles/global.css";
14
14
  import TinyInfo from "../typography/TinyInfo";
15
15
  function Select(_a, ref) {
@@ -31,7 +31,7 @@ function Select(_a, ref) {
31
31
  }, [selectedItem, multiple]);
32
32
  useEffect(function () {
33
33
  if (!multiple && selectedItem && isOpen && listRef.current) {
34
- var selectedItemElement = listRef.current.querySelector(".select-item[data-value=\"".concat(selectedItem, "\"]"));
34
+ var selectedItemElement = listRef.current.querySelector(".".concat(styles.selectItem, "[data-value=\"").concat(selectedItem, "\"]"));
35
35
  if (selectedItemElement instanceof HTMLElement) {
36
36
  var listHeight = listRef.current.offsetHeight;
37
37
  var itemHeight = selectedItemElement.offsetHeight;
@@ -123,32 +123,32 @@ function Select(_a, ref) {
123
123
  }
124
124
  return function () { };
125
125
  }, [isOpen]);
126
- var renderList = function () { return (React.createElement("div", { ref: listRef, className: "select-list ".concat(isOpen ? "visible" : "", " ").concat(placement), style: {
126
+ var renderList = function () { return (React.createElement("div", { ref: listRef, className: "".concat(styles.selectList, " ").concat(isOpen ? styles.visible : "", " ").concat(placement), style: {
127
127
  position: "fixed",
128
128
  top: "".concat(listPosition.top, "px"),
129
129
  left: "".concat(listPosition.left, "px"),
130
130
  width: "".concat(listPosition.width, "px"),
131
131
  margin: placement === "bottom" ? "4px 0 0 0" : "0 0 4px 0",
132
- } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
133
- ? "selected"
134
- : "", " ").concat(!multiple && item.value === selectedItem ? "highlighted" : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
135
- multiple && React.createElement("span", { className: "select-item-icon allaw-icon-check" }),
136
- React.createElement("span", { className: "select-item-text" }, item.label))); }))); };
132
+ } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "".concat(styles.selectItem, " ").concat(Array.isArray(selected) && selected.includes(item.value)
133
+ ? styles.selected
134
+ : "", " ").concat(!multiple && item.value === selectedItem ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : ""), onClick: function () { return handleSelect(item); } },
135
+ multiple && React.createElement("span", { className: styles.selectItemIcon }),
136
+ React.createElement("span", { className: styles.selectItemText }, item.label))); }))); };
137
137
  useImperativeHandle(ref, function () { return ({
138
138
  validate: function () { return validateSelect(selected); },
139
139
  }); });
140
- return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : ""), style: { width: "".concat(width, "%") } },
141
- React.createElement("button", { type: "button", className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen, style: { width: "100%" } },
142
- React.createElement("span", { className: "select-text" }, Array.isArray(selected) && selected.length > 0
140
+ return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
141
+ React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault), onClick: toggleOpen, style: { width: "100%" } },
142
+ React.createElement("span", { className: styles.selectText }, Array.isArray(selected) && selected.length > 0
143
143
  ? selected
144
144
  .map(function (val) { var _a; return (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label; })
145
145
  .join(", ")
146
146
  : !Array.isArray(selected) && selected
147
147
  ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
148
148
  : placeholder),
149
- React.createElement("span", { className: "select-icon ".concat(isOpen ? "allaw-icon-chevron-up" : "allaw-icon-chevron-down") })),
149
+ React.createElement("span", { className: "".concat(styles.selectIcon, " ").concat(isOpen ? styles.allawIconChevronUp : styles.allawIconChevronDown) })),
150
150
  isOpen && ReactDOM.createPortal(renderList(), document.body),
151
- isRequired && showError && error && (React.createElement("div", { className: "error-message" },
151
+ isRequired && showError && error && (React.createElement("div", { className: styles.errorMessage },
152
152
  React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
153
153
  }
154
154
  export default forwardRef(Select);
package/dist/components/atoms/selects/{Select.css → Select.module.css} RENAMED
@@ -1,4 +1,4 @@
1
- .select-container {
1
+ .selectContainer {
2
2
  position: relative;
3
3
  }
4
4
 
@@ -21,7 +21,7 @@
21
21
  background: var(--grey-venom, #e6edf5);
22
22
  }
23
23
 
24
- .select-text {
24
+ .selectText {
25
25
  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
26
26
  font-family: "Open Sans";
27
27
  font-size: 14px;
@@ -33,7 +33,7 @@
33
33
  text-overflow: ellipsis;
34
34
  }
35
35
 
36
- .select-icon {
36
+ .selectIcon {
37
37
  width: 24px;
38
38
  height: 24px;
39
39
  flex-shrink: 0;
@@ -43,14 +43,13 @@
43
43
  padding-top: 4px;
44
44
  }
45
45
 
46
- .select-list {
46
+ .selectList {
47
47
  position: absolute;
48
48
  top: 100%;
49
49
  left: 0;
50
50
  right: 0;
51
51
  display: flex;
52
52
  flex-direction: column;
53
- /* background: var(--secondary-light-grey, #f4f7fb); */
54
53
  background: #fff;
55
54
  border-radius: 8px;
56
55
  padding: 8px 0;
@@ -69,7 +68,7 @@
69
68
  margin-top: 4px;
70
69
  }
71
70
 
72
- .select-item {
71
+ .selectItem {
73
72
  display: flex;
74
73
  align-items: center;
75
74
  padding: 8px 16px;
@@ -77,36 +76,36 @@
77
76
  width: 100%;
78
77
  }
79
78
 
80
- .select-item:hover {
79
+ .selectItem:hover {
81
80
  background: var(--grey-venom, #e6edf5);
82
81
  }
83
82
 
84
- .select-item .select-item-icon {
83
+ .selectItem .selectItemIcon {
85
84
  margin-right: 11px;
86
85
  visibility: hidden;
87
86
  color: var(--bleu-allaw, #0070f3);
88
87
  }
89
88
 
90
- .select-item.selected .select-item-icon {
89
+ .selectItem.selected .selectItemIcon {
91
90
  visibility: visible;
92
91
  }
93
92
 
94
- .select-item.single-select .select-item-icon {
93
+ .selectItem.singleSelect .selectItemIcon {
95
94
  display: none;
96
95
  }
97
96
 
98
- .select-item-text {
97
+ .selectItemText {
99
98
  white-space: nowrap;
100
99
  overflow: hidden;
101
100
  text-overflow: ellipsis;
102
101
  width: 100%;
103
102
  }
104
103
 
105
- .error-message {
104
+ .errorMessage {
106
105
  padding-top: 4px;
107
106
  padding-left: 14px;
108
107
  }
109
108
 
110
- .select-item.highlighted {
109
+ .selectItem.highlighted {
111
110
  background-color: var(--venom-grey-dark, #d1dce8);
112
111
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.106",
3
+ "version": "1.0.108",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",