aristid-ds 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.12.0](https://www.npmjs.com/package/aristid-ds/v/0.12.0) (2024-02-02)
+
+### ✨ Features
+* **Modal:**
+    * Add `fullscreen`option (@evoiron)
+
+* **⚠️ Breaking change - ItemList**
+    * Add `selected` props to display a colored border (@Delmotte-Vincent)
+    * Rename `onSelectChange` by `onSelect` (@Delmotte-Vincent)
+
+### 🐛 Bug Fixes
+* A build option was removed by error
+* **Select**
+    * Remove unused props `suffixIcon` and adapt the documentation (@Delmotte-Vincent)
+    * Add focus state on select dropdown (@Delmotte-Vincent)
+    * Fix Ellipsed tag on select (@Delmotte-Vincent)
+* **Storybook**
+  * fix a visual bug on storybook caused by an addon (@evoiron)
+
+### 📚 Documentation
+* New documentation page to list available design tokens (@evoiron)
+* Display each design token corresponding css variable (@evoiron)
+* Display package version number on the top right corner of Storybook (@philippechevieux)
+
 ## [0.11.0](https://www.npmjs.com/package/aristid-ds/v/0.11.0) (2024-01-24)
 ### ✨ Features
   * **Notification:**

package/dist/Kit/DataDisplay/Card/index.js

@@ -1,4 +1,4 @@
-import e from "react";
+import r from "react";
 import { styled as G } from "styled-components";
 import N from "classnames";
 import { kitColorsPaletteCssTokens as t } from "../../../theme/aristid/general/colors/index.js";
@@ -6,7 +6,7 @@ import { typographyCssTokens as i } from "../../../theme/aristid/general/typogra
 import { spacingCssTokens as h } from "../../../theme/aristid/general/spacing/index.js";
 import { FontAwesomeIcon as T } from "@fortawesome/react-fontawesome";
 import { faEllipsis as S } from "@fortawesome/free-solid-svg-icons";
-import { kitCardCssTokens as r } from "../../../theme/aristid/components/DataDisplay/Card/index.js";
+import { kitCardCssTokens as e } from "../../../theme/aristid/components/DataDisplay/Card/index.js";
 import { useKitTheme as z } from "../../../theme/useKitTheme.js";
 import { KitTag as K } from "../Tag/index.js";
 import { convertToPixel as d } from "../../../theme/utils/convert.js";
@@ -21,12 +21,12 @@ const I = G.div`
     border-radius: 10px;
     overflow: hidden;
     background-color: var(
-        ${r.colors.background.default},
+        ${e.colors.background.default},
         var(${t.neutral.white})
     );
     border: 1px solid
         var(
-            ${r.colors.border.default},
+            ${e.colors.border.default},
             var(${t.secondary.mediumGrey.mediumGrey200})
         );
     margin: 2px;
@@ -35,12 +35,12 @@ const I = G.div`
 
     &.kit-card-disabled {
         background-color: var(
-            ${r.colors.background.disabled},
+            ${e.colors.background.disabled},
             var(${t.secondary.mediumGrey.mediumGrey100})
         );
         .kit-card-picture {
             border-color: var(
-                ${r.colors.separator.disabled},
+                ${e.colors.separator.disabled},
                 var(${t.secondary.mediumGrey.mediumGrey400})
             );
         }
@@ -48,19 +48,19 @@ const I = G.div`
         .kit-card-content {
             .kit-card-title {
                 color: var(
-                    ${r.colors.typography.title.disabled},
+                    ${e.colors.typography.title.disabled},
                     var(${t.secondary.mediumGrey.mediumGrey400})
                 );
             }
             .kit-card-description {
                 color: var(
-                    ${r.colors.typography.description.disabled},
+                    ${e.colors.typography.description.disabled},
                     var(${t.secondary.mediumGrey.mediumGrey400})
                 );
             }
             .kit-card-extra {
                 color: var(
-                    ${r.colors.typography.extra.disabled},
+                    ${e.colors.typography.extra.disabled},
                     var(${t.secondary.mediumGrey.mediumGrey400})
                 );
             }
@@ -70,7 +70,7 @@ const I = G.div`
     &.kit-card-selected {
         margin: 0;
         border: 3px solid
-            var(${r.colors.border.selected}, var(${t.primary.primary400}));
+            var(${e.colors.border.selected}, var(${t.primary.primary400}));
     }
 
     .kit-card-content {
@@ -81,37 +81,37 @@ const I = G.div`
         padding: ${d(h.s)};
 
         .kit-card-title {
-            font-size: ${d(r.typography.title.fontSize, i.fontSize3)};
+            font-size: ${d(e.typography.title.fontSize, i.fontSize3)};
             font-weight: var(
-                ${r.typography.title.fontWeight},
+                ${e.typography.title.fontWeight},
                 var(${i.boldFontWeight})
             );
             color: var(
-                ${r.colors.typography.title.default},
+                ${e.colors.typography.title.default},
                 var(${t.primary.primary400})
             );
         }
 
         .kit-card-description {
-            font-size: ${d(r.typography.description.fontSize, i.fontSize5)};
+            font-size: ${d(e.typography.description.fontSize, i.fontSize5)};
             font-weight: var(
-                ${r.typography.description.fontWeight},
+                ${e.typography.description.fontWeight},
                 var(${i.regularFontWeight})
             );
             color: var(
-                ${r.colors.typography.description.default},
+                ${e.colors.typography.description.default},
                 var(${t.secondary.mediumGrey.mediumGrey600})
             );
         }
 
         .kit-card-extra {
-            font-size: ${d(r.typography.extra.fontSize, i.fontSize4)};
+            font-size: ${d(e.typography.extra.fontSize, i.fontSize4)};
             font-weight: var(
-                ${r.typography.extra.fontWeight},
+                ${e.typography.extra.fontWeight},
                 var(${i.boldFontWeight})
             );
             color: var(
-                ${r.colors.typography.extra.default},
+                ${e.colors.typography.extra.default},
                 var(${t.primary.primary400})
             );
         }
@@ -125,7 +125,7 @@ const I = G.div`
         overflow: hidden;
         position: relative;
         border-bottom: 4px solid
-            ${({ $brandingBar: o }) => o ? `var(${r.colors.separator.default}, var(${t.primary.primary400}))` : "transparent"};
+            ${({ $brandingBar: o }) => o ? `var(${e.colors.separator.default}, var(${t.primary.primary400}))` : "transparent"};
 
         img {
             height: 100%;
@@ -160,14 +160,14 @@ const I = G.div`
     &:focus-within:not(.kit-card-disabled) {
         margin: 0;
         border: 3px solid
-            var(${r.colors.border.focus}, var(${t.primary.primary200}));
+            var(${e.colors.border.focus}, var(${t.primary.primary200}));
         outline: none;
     }
 
     &:hover:not(.kit-card-disabled) {
         margin: 0;
         border: 3px solid
-            var(${r.colors.border.hover}, var(${t.primary.primary400}));
+            var(${e.colors.border.hover}, var(${t.primary.primary400}));
 
         .kit-card-picture {
             border-color: transparent;
@@ -177,10 +177,10 @@ const I = G.div`
             }
         }
     }
-`, A = ({ actions: o, description: s, className: v, style: x, title: l, extra: m, previewSrc: p, tags: y, onActivate: g, onSelect: f, brandingBar: k = !1, selected: u = !1, activated: $ = !1, disabled: a = !1 }) => {
+`, A = ({ actions: o, description: l, className: v, style: x, title: s, extra: m, previewSrc: p, tags: y, onActivate: g, onSelect: f, brandingBar: k = !1, selected: u = !1, activated: $ = !1, disabled: a = !1 }) => {
   const E = z().appId;
   var C = o && 2 < o.length, w = o && o.length <= 2;
-  return e.createElement(I, { tabIndex: a ? -1 : 0, className: N(v, E, { "kit-card-selected": u, "kit-card-disabled": a }), style: x, $brandingBar: k }, e.createElement("div", { className: "kit-card-picture" }, e.createElement("img", { src: p ?? "public/images/no-preview.png" }), f && e.createElement(F, { className: "kit-card-checkbox", onChange: f, checked: u, disabled: a }), g && e.createElement(W, { className: "kit-card-switch", onChange: g, checked: $, disabled: a }), e.createElement("div", { className: "kit-card-buttons" }, w && e.createElement(e.Fragment, null, o.map((b) => e.createElement(c, { type: "segmented", icon: b.icon, onClick: b.onClick, disabled: a }))), C && e.createElement(e.Fragment, null, e.createElement(c, { type: "segmented", icon: o[0].icon, onClick: o[0].onClick, disabled: a }), e.createElement(B, { menu: { items: o.slice(1) }, disabled: a }, e.createElement(c, { type: "segmented", icon: e.createElement(T, { icon: S }) }))))), e.createElement("div", { className: "kit-card-content" }, y && e.createElement(K.Group, { tags: y }), l && e.createElement(n.Text, { className: "kit-card-title" }, l), s && e.createElement(n.Text, { className: "kit-card-description" }, s), m && e.createElement(n.Text, { className: "kit-card-extra", ellipsis: { tooltip: !0 } }, m)));
+  return r.createElement(I, { tabIndex: a ? -1 : 0, className: N(v, E, { "kit-card-selected": u, "kit-card-disabled": a }), style: x, $brandingBar: k }, r.createElement("div", { className: "kit-card-picture" }, r.createElement("img", { src: p ?? "public/images/no-preview.png" }), f && r.createElement(F, { className: "kit-card-checkbox", onChange: f, checked: u, disabled: a }), g && r.createElement(W, { className: "kit-card-switch", onChange: g, checked: $, disabled: a }), r.createElement("div", { className: "kit-card-buttons" }, w && r.createElement(r.Fragment, null, o.map((b) => r.createElement(c, { type: "segmented", icon: b.icon, onClick: b.onClick, disabled: a }))), C && r.createElement(r.Fragment, null, r.createElement(c, { type: "segmented", icon: o[0].icon, onClick: o[0].onClick, disabled: a }), r.createElement(B, { menu: { items: o.slice(1) }, disabled: a }, r.createElement(c, { type: "segmented", icon: r.createElement(T, { icon: S }) }))))), r.createElement("div", { className: "kit-card-content" }, y && r.createElement(K.Group, { tags: y }), s && r.createElement(n.Text, { className: "kit-card-title" }, s), l && r.createElement(n.Text, { className: "kit-card-description" }, l), m && r.createElement(n.Text, { className: "kit-card-extra", ellipsis: { tooltip: !0 } }, m)));
 };
 A.displayName = "KitCard";
 export {

package/dist/Kit/DataDisplay/ItemList/index.js

@@ -1,266 +1,45 @@
-import i, { useState as z, cloneElement as J } from "react";
-import { styled as M } from "styled-components";
-import { KitTag as O } from "../Tag/index.js";
-import { useKitTheme as Q } from "../../../theme/useKitTheme.js";
-import { useKitLocale as U } from "../../../translation/useKitLocale.js";
-import { FontAwesomeIcon as S } from "@fortawesome/react-fontawesome";
-import { faEye as V } from "@fortawesome/free-regular-svg-icons";
-import { faAngleRight as X } from "@fortawesome/free-solid-svg-icons";
-import K from "../../../hooks/useSecureClick/index.js";
-import { kitItemListCssTokens as t } from "../../../theme/aristid/components/DataDisplay/ItemList/index.js";
-import { kitColorsPaletteCssTokens as r } from "../../../theme/aristid/general/colors/index.js";
-import { borderCssTokens as Y } from "../../../theme/aristid/general/border/index.js";
-import { typographyCssTokens as s } from "../../../theme/aristid/general/typography/index.js";
-import { convertToPixel as u } from "../../../theme/utils/convert.js";
-import { KitCheckbox as Z } from "../../DataEntry/Checkbox/index.js";
-import { KitTypography as n } from "../../General/Typography/index.js";
-const _ = M.div`
-    display: grid;
-    grid-template-columns: ${({ $gridTemplateColumns: l }) => l};
-    align-items: center;
-    min-height: 75px;
-    padding: 0px 8px;
-    background-color: var(
-        ${t.itemList.colors.background.default},
-        var(${r.neutral.white})
-    );
-    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
-    border: 1px solid
-        var(
-            ${t.itemList.colors.border.default},
-            var(${r.secondary.mediumGrey.mediumGrey200})
-        );
-    border-radius: ${u(t.itemList.border.radius.toString(), Y.radius.s)};
-
-    &:hover {
-        border: 1px solid
-            var(
-                ${t.itemList.colors.border.hover},
-                var(${r.primary.primary400})
-            );
-    }
-
-    &:focus {
-        border-style: dashed;
-    }
-
-    &.kit-item-list-clickable {
-        cursor: pointer;
-    }
-
-    .kit-item-list-picture-container {
-        width: 50px;
-        height: 50px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-
-        &:not(:first-child) {
-            margin: 0px 0px 0px 10px;
-        }
-
-        &.noBorder {
-            border-color: transparent;
-        }
-
-        &.kit-item-list-icon {
-            .kit-icon {
-                font-size: 1.5rem;
-                width: 34px;
-                height: 34px;
-            }
-        }
-
-        .kit-item-list-image-container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            img,
-            svg {
-                width: auto;
-                max-width: 100%;
-                max-height: 100%;
-            }
-        }
-    }
-
-    .kit-item-list-text-container {
-        display: flex;
-        padding: 10px 20px;
-        flex-direction: column;
-        align-items: flex-start;
-        flex: 1 0 0;
-
-        &.kit-item-list-text-container-with-gap {
-            gap: 5px;
-        }
-
-        .kit-item-list-text {
-            margin-bottom: 0px;
-
-            &.kit-item-list-title {
-                font-weight: var(
-                    ${t.title.typography.fontWeight},
-                    var(${s.boldFontWeight})
-                );
-                font-size: ${u(t.title.typography.fontSize, s.fontSize5)};
-                color: var(
-                    ${t.title.colors.default},
-                    var(${r.primary.primary600})
-                );
-            }
-
-            &.kit-item-list-description {
-                font-weight: var(
-                    ${t.description.typography.fontWeight},
-                    var(${s.regularFontWeight})
-                );
-                font-size: ${u(t.description.typography.fontSize, s.fontSize5)};
-                color: var(
-                    ${t.description.colors.default},
-                    var(${r.primary.primary600})
-                );
-
-                .ant-typography-expand {
-                    visibility: hidden;
-                }
-            }
-        }
-
-        .kit-item-list-description-container {
-            position: relative;
-        }
-
-        .kit-item-list-description-collexp {
-            color: var(
-                ${t.collexp.colors.default},
-                var(${r.primary.primary600})
-            );
-
-            &:hover {
-                color: var(
-                    ${t.collexp.colors.hover},
-                    var(${r.primary.primary400})
-                );
-            }
-
-            &.kit-item-list-description-collapse {
-                float: right;
-            }
-
-            &.kit-item-list-description-expand {
-                position: absolute;
-                right: 0;
-                bottom: 0;
-            }
-        }
-    }
-
-    .kit-item-list-tag {
-        &:last-child .ant-tag {
-            margin-inline-end: 0px;
-        }
-
-        &:not(:last-child) .ant-tag {
-            margin-inline-end: 10px;
-        }
-    }
-
-    .kit-item-list-rafter {
-        color: var(
-            ${t.rafter.colors.default},
-            var(${r.neutral.grey.grey400})
-        );
-        font-size: 14px;
-
-        &:hover {
-            color: var(
-                ${t.rafter.colors.hover},
-                var(${r.primary.primary400})
-            );
-            cursor: pointer;
-        }
-    }
-
-    &.kit-item-list-disabled {
-        background-color: var(
-            ${t.itemList.colors.background.disabled},
-            var(${r.secondary.mediumGrey.mediumGrey100})
-        );
-        border: 1px solid
-            var(
-                ${t.itemList.colors.border.disabled},
-                var(${r.secondary.mediumGrey.mediumGrey200})
-            );
-        pointer-events: none;
-
-        .kit-item-list-image-container img {
-            opacity: 0.5;
-        }
-
-        .kit-item-list-text-container {
-            .kit-item-list-text {
-                &.kit-item-list-title {
-                    color: var(
-                        ${t.title.colors.disabled},
-                        var(${r.secondary.mediumGrey.mediumGrey400})
-                    );
-                }
-
-                &.kit-item-list-description {
-                    color: var(
-                        ${t.description.colors.disabled},
-                        var(${r.secondary.mediumGrey.mediumGrey400})
-                    );
-                }
-            }
-
-            .kit-item-list-description-collexp {
-                color: var(
-                    ${t.collexp.colors.disabled},
-                    var(${r.secondary.mediumGrey.mediumGrey400})
-                );
-            }
-        }
-
-        .kit-item-list-tag,
-        .kit-item-list-icon {
-            opacity: 0.4;
-        }
-    }
-`, tt = ({ title: l, description: x, picture: h, onSelectChange: m, tagNumber: f, onRafterClick: c, disabled: b = !1, onClick: p, className: d, disableSecureClick: $, ...P }) => {
-  var o = Q().appId;
-  const C = U().locale, [g, w] = z(!1), [W, F] = z(!1), R = l !== void 0, j = x !== void 0, A = h !== void 0, E = f !== void 0, B = p !== void 0, L = m !== void 0, N = c !== void 0, G = (e) => {
-    e.stopPropagation(), c && c();
-  }, q = K(G);
-  var T = (e) => {
-    e.stopPropagation(), p && p();
-  }, D = K(T);
-  return i.createElement(_, { className: o + " " + (o = d, o += b ? " kit-item-list-disabled" : "") + (B ? " kit-item-list-clickable" : ""), $gridTemplateColumns: (d = "", (d += L ? " min-content" : "") + (A ? " min-content" : "") + " minmax(0px, auto)" + (E ? " min-content" : "") + (N ? " min-content" : "")), onClick: $ ? T : D, ...P }, L && i.createElement("div", null, i.createElement(Z, { disabled: b, onClick: (e) => e.stopPropagation(), onChange: (e) => {
-    m && m(e);
+import e, { useState as L, cloneElement as H } from "react";
+import { KitTag as J } from "../Tag/index.js";
+import { useKitTheme as M } from "../../../theme/useKitTheme.js";
+import { useKitLocale as O } from "../../../translation/useKitLocale.js";
+import { FontAwesomeIcon as P } from "@fortawesome/react-fontawesome";
+import { faEye as Q } from "@fortawesome/free-regular-svg-icons";
+import { faAngleRight as U } from "@fortawesome/free-solid-svg-icons";
+import S from "../../../hooks/useSecureClick/index.js";
+import { StyledItemList as V } from "./style.js";
+import g from "classnames";
+import { KitCheckbox as W } from "../../DataEntry/Checkbox/index.js";
+import { KitTypography as l } from "../../General/Typography/index.js";
+const X = ({ title: u, description: v, picture: E, onSelect: a, tagNumber: f, onRafterClick: s, onClick: r, className: m, disableSecureClick: N, selected: i = !1, disabled: n = !1, ...T }) => {
+  const R = M().appId, x = O().locale, [c, C] = L(!1), [z, A] = L(!1), B = u !== void 0, F = v !== void 0, $ = E !== void 0, b = f !== void 0, j = r !== void 0, h = a !== void 0, I = s !== void 0, w = (t) => {
+    t.stopPropagation(), s && s();
+  }, q = S(w);
+  var K = (t) => {
+    t.stopPropagation(), r && r();
+  }, D = S(K);
+  return e.createElement(V, { tabIndex: n ? -1 : 0, className: g(m, R, { "kit-item-list-disabled": n, "kit-item-list-clickable": j, "kit-item-list-selected": i }), $gridTemplateColumns: (m = "", (m += h ? " min-content" : "") + ($ ? " min-content" : "") + " minmax(0px, auto)" + (b ? " min-content" : "") + (I ? " min-content" : "")), onClick: N ? K : D, ...T }, h && e.createElement("div", null, e.createElement(W, { disabled: n, onClick: (t) => t.stopPropagation(), onChange: (t) => {
+    a && a(t);
   } })), (() => {
-    var e, k, a = h;
-    if (!a || !a.type)
+    var t, p, o = E;
+    if (!o || !o.type)
       return null;
-    let I = !1, v = {}, y = "kit-item-list-picture-container";
-    switch (a.type.displayName) {
+    let y = !1, d = {}, k = "kit-item-list-picture-container";
+    switch (o.type.displayName) {
       case "KitImage":
-        k = a.props, v = { preview: { ...(e = k.preview) != null ? e : {}, mask: i.createElement(S, { icon: V }) }, width: "100%", height: "100%", bordered: !0, rounded: !0, rootClassName: (k.rootClassName || "") + " kit-item-list-image-container" }, y += " kit-item-list-image";
+        p = o.props, d = { preview: { ...(t = p.preview) != null ? t : {}, mask: e.createElement(P, { icon: Q }) }, width: "100%", height: "100%", bordered: !0, rounded: !0, rootClassName: (p.rootClassName || "") + " kit-item-list-image-container" }, k += " kit-item-list-image";
         break;
       case "KitIcon":
-        I = !0, v = { on: !0 }, y += " kit-item-list-icon";
-    }
-    var H = J(a, v);
-    return i.createElement("div", { className: y + " " + (I ? "noBorder" : "") }, H);
-  })(), (o = "kit-item-list-text-container", o += R && j ? " kit-item-list-text-container-with-gap" : "", i.createElement("div", { className: o }, i.createElement(n.Text, { className: "kit-item-list-text kit-item-list-title", size: "large", weight: "bold", ellipsis: { tooltip: !0 } }, l), i.createElement("div", { className: "kit-item-list-description-container" }, i.createElement(n.Paragraph, { className: "kit-item-list-text kit-item-list-description", size: "large", weight: "regular", ellipsis: !g && { rows: 2, expandable: !0, onEllipsis: () => F(!0) } }, x, g && i.createElement(n.Link, { className: "kit-item-list-description-collexp kit-item-list-description-collapse", onClick: (e) => {
-    e.stopPropagation(), w(!1);
-  } }, (o = C.ItemList) == null ? void 0 : o.less)), W && !g && i.createElement(n.Link, { className: "kit-item-list-description-collexp kit-item-list-description-expand", onClick: (e) => {
-    e.stopPropagation(), w(!0);
-  } }, (o = C.ItemList) == null ? void 0 : o.more)))), E && i.createElement("div", { className: "kit-item-list-tag" }, i.createElement(O, { color: "blue" }, f)), N && i.createElement("div", { className: "kit-item-list-rafter", onClick: $ ? G : q }, i.createElement(S, { icon: X })));
+        y = !0, d = { on: !0 }, k += " kit-item-list-icon";
+    }
+    var G = H(o, d);
+    return e.createElement("div", { className: g(k, { noBorder: y }) }, G);
+  })(), (i = g("kit-item-list-text-container", { "kit-item-list-text-container-with-gap": B && F }), e.createElement("div", { className: i }, e.createElement(l.Text, { className: "kit-item-list-text kit-item-list-title", size: "large", weight: "bold", ellipsis: { tooltip: !0 } }, u), e.createElement("div", { className: "kit-item-list-description-container" }, e.createElement(l.Paragraph, { className: "kit-item-list-text kit-item-list-description", size: "large", weight: "regular", ellipsis: !c && { rows: 2, expandable: !0, onEllipsis: () => A(!0) } }, v, c && e.createElement(l.Link, { className: "kit-item-list-description-collexp kit-item-list-description-collapse", onClick: (t) => {
+    t.stopPropagation(), C(!1);
+  } }, (i = x.ItemList) == null ? void 0 : i.less)), z && !c && e.createElement(l.Link, { className: "kit-item-list-description-collexp kit-item-list-description-expand", onClick: (t) => {
+    t.stopPropagation(), C(!0);
+  } }, (i = x.ItemList) == null ? void 0 : i.more)))), b && e.createElement("div", { className: "kit-item-list-tag" }, e.createElement(J, { color: "blue" }, f)), I && e.createElement("div", { className: "kit-item-list-rafter", onClick: N ? w : q }, e.createElement(P, { icon: U })));
 };
-tt.displayName = "KitItemList";
+X.displayName = "KitItemList";
 export {
-  tt as KitItemList
+  X as KitItemList
 };

package/dist/Kit/DataDisplay/ItemList/style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IStyledKitItemList } from './types';
+export declare const StyledItemList: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStyledKitItemList>>;