kelt-ui-kit-react 2.1.4 → 2.1.5
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.
- package/dist/index.js +39 -36
- package/dist/overlayPanel/OverlayPanel.d.ts +1 -0
- package/dist/overlayPanel/overlayPanelStyled/OverlayPanelStyled.d.ts +1 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/overlayPanel/OverlayPanel.tsx +13 -7
- package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx +11 -0
- package/src/select/Select.tsx +1 -0
- package/src/select/select.css +0 -2
package/package.json
CHANGED
|
@@ -35,6 +35,8 @@ export type OverlayPanelProps = {
|
|
|
35
35
|
closeOverlay?: (close: boolean) => void;
|
|
36
36
|
usePortal?: boolean;
|
|
37
37
|
matchReferenceWidth?: boolean;
|
|
38
|
+
// sans cadre (padding, fond, ombre) ni croix de fermeture : le contenu porte son propre style
|
|
39
|
+
bare?: boolean;
|
|
38
40
|
};
|
|
39
41
|
|
|
40
42
|
export const OverlayPanel = forwardRef(
|
|
@@ -50,6 +52,7 @@ export const OverlayPanel = forwardRef(
|
|
|
50
52
|
closeOverlay,
|
|
51
53
|
usePortal = true,
|
|
52
54
|
matchReferenceWidth = false,
|
|
55
|
+
bare = false,
|
|
53
56
|
}: OverlayPanelProps,
|
|
54
57
|
ref: React.Ref<{
|
|
55
58
|
setCoords?: (coords: { top: number; left: number }) => void;
|
|
@@ -234,19 +237,22 @@ export const OverlayPanel = forwardRef(
|
|
|
234
237
|
$left={coords.left}
|
|
235
238
|
$minWidth={referenceWidth}
|
|
236
239
|
$visible={isPositioned}
|
|
240
|
+
$bare={bare}
|
|
237
241
|
>
|
|
238
242
|
<div
|
|
239
243
|
className={`overlayPanel ${className ? className : ""} ${
|
|
240
244
|
coords.top > 0 || coords.left > 0 ? "visible" : "hide"
|
|
241
245
|
}`}
|
|
242
246
|
>
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
247
|
+
{!bare && (
|
|
248
|
+
<button
|
|
249
|
+
id={id ?? ""}
|
|
250
|
+
className="toggle-btn"
|
|
251
|
+
onClick={closeOverlayHandler}
|
|
252
|
+
>
|
|
253
|
+
<Icon classIcon="bi-x-lg" />
|
|
254
|
+
</button>
|
|
255
|
+
)}
|
|
250
256
|
<div onClick={(e) => e.stopPropagation()}>{children}</div>
|
|
251
257
|
</div>
|
|
252
258
|
</OverlayPanelStyled>
|
|
@@ -5,6 +5,7 @@ interface OverlayPanelStyledProps {
|
|
|
5
5
|
$left?: number;
|
|
6
6
|
$minWidth?: number;
|
|
7
7
|
$visible?: boolean;
|
|
8
|
+
$bare?: boolean;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
|
|
@@ -20,4 +21,14 @@ export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
|
|
|
20
21
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
21
22
|
border-radius: 2px;
|
|
22
23
|
border: 1px solid #ede;
|
|
24
|
+
${({ $bare }) =>
|
|
25
|
+
$bare
|
|
26
|
+
? `
|
|
27
|
+
background-color: transparent;
|
|
28
|
+
padding: 0;
|
|
29
|
+
box-shadow: none;
|
|
30
|
+
border: none;
|
|
31
|
+
border-radius: 0;
|
|
32
|
+
`
|
|
33
|
+
: ""}
|
|
23
34
|
`;
|
package/src/select/Select.tsx
CHANGED