aristid-ds 9.0.0-dbbce41 → 9.0.0-e0ef209

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [X.X.X](https://www.npmjs.com/package/aristid-ds/v/X.X.X) (202X-XX-XX)
+
+### ✨ Features
+
+-   **New - PageLayout:**
+
+    -   Add PageLayout component (@Delmotte-Vincent)
+
+-   **SideMenu:**
+    -   Add `customContent` property to display a custom component depending on `open` side menu state (@philippechevieux)
+-   **ItemList:**
+    -   Make `idCardProps` property optional (@philippechevieux)
+    -   Add `idCardSubstitute` to display a custom component (@philippechevieux)
+    -   Add `checkboxAriaLabel` property because the `aria-label` of the checkbox was only based on `idCardProps` (@philippechevieux)
+-   **InputWrapper:**
+    -   Add `hoverable` to change border color when `bordered` is set to `true` (@philippechevieux)
+    -   Add `onFocus` to trigger a given function when content is focused. Also if `bordered` is set to `true` it will change the border render (@philippechevieux)
+    -   Add `htmlFor` property to link the label to the wrapped content. This property is also available for: (@philippechevieux)
+        -   `AutoComplete`
+        -   `DatePicker` and `RangePicker`
+        -   `Input`, `Password` and `TextArea`
+        -   `InputNumber`
+        -   `Select`
+-   **Error**
+    -   Add `httpErrorCode` property to choose which error to display (@fatb38 / @renaudamsellem)
+-   **Modal:**
+    -   Handle `maxHeight` in modal with a scrollbar if there is too much content. (@renaudamsellem)
+
+### 🐛 Bug Fixes
+
+-   **Table**:
+    -   Fix checkbox hidden when ellipsis is true (@renaudamsellem)
+
+### 📚 Documentation
+
+-   Fix design tokens page that crashed every time it was consulted (@philippechevieux)
+
 ## [9.0.0](https://www.npmjs.com/package/aristid-ds/v/9.0.0) (2024-08-28)
 
 ### 🎨 Theming
@@ -29,12 +66,14 @@
     -   Change expected value of `size` prop. `small`, `medium` and `large` are replaced by fontSize from `fontSize1` to `fontSize7` (@philippechevieux)
     -   Remove `type` prop because it is not used anymore and has been replaced by `color` (@philippechevieux)
 -   **⚠️ Breaking change - RedirectCard:**
+
     -   Rename `imageSrc` as `coverSrc` and `imageAlt` as `coverAlt` (@philippechevieux)
     -   Add `actions` prop to display between 1 and 3 buttons (@philippechevieux)
     -   Fix cover divider render on hover (@philippechevieux)
 
 -   **⚠️ Breaking change - Grid Component:**
-    - Update `Grid` internal code. We have moved from the Antd Grid component to a home-made component. Please refer to the documentation for use.
+
+    -   Update `Grid` internal code. We have moved from the Antd Grid component to a home-made component. Please refer to the documentation for use.
 
 -   **Dropdown:**
     -   Update border, active & selected styles (@renaudAmsellem)

package/README.md

@@ -59,7 +59,7 @@ mkdir DESIGN-SYSTEM
 2. Clone the repo
 
 ```sh dark
-git clone https://gitlab.aristid.com/dev/design-system.git
+git clone git@github.com:aristid-dev/design-system.git
 ```
 
 3. Install requiered packages

package/dist/Kit/App/index.js

@@ -1,136 +1,21 @@
-import "../../assets/index25.css";
-import { jsx as n, jsxs as v, Fragment as x } from "react/jsx-runtime";
-import { useMemo as K, useState as k, useLayoutEffect as b, useRef as S, useEffect as P } from "react";
-import { ConfigProvider as L } from "antd";
-import { I as y } from "../../chunks/SnackBarProvider.iuCIyLXl.js";
-import { createGlobalStyle as R } from "styled-components";
-import { toCssVariables as h, uuid as C } from "../../utils/functions/index.js";
-import s from "lodash/merge";
-import { Style as w } from "react-style-tag";
-import { K as G } from "../../chunks/useKitTheme.KSAU-Pdv.js";
-import { KitAristidThemeGeneral as a } from "../../theme/aristid/general/index.js";
-import { antdThemeConfig as I } from "../../theme/utils/tokens-mapper/index.js";
-import { frFR as f } from "../../translation/fr-FR/index.js";
-import { enUS as E } from "../../translation/en-US/index.js";
-import { a as _, u as j } from "../../chunks/index.qBmLATvd.js";
-import { mapKitLocaleToAntdLocale as A } from "../../translation/utils/index.js";
-import { d as F } from "../../chunks/notification-provider.5EFnJe91.js";
+import "react/jsx-runtime";
+import "react";
+import "antd";
+import "../../chunks/SnackBarProvider.xMKXdZ88.js";
+import { K as k } from "../../chunks/index.1blqoZQ8.js";
+import "../../theme/utils/tokens-mapper/index.js";
+import "../../translation/utils/index.js";
+import "../../chunks/index.qBmLATvd.js";
 import "../DataDisplay/Avatar/index.js";
 import "../DataDisplay/Badge/index.js";
-import { l as z } from "../../chunks/index.yWVMx2TR.js";
-import { KitEmpty as $ } from "../DataDisplay/Empty/index.js";
+import "../DataDisplay/Empty/index.js";
 import "../DataDisplay/IdCard/index.js";
 import "../DataDisplay/Table/index.js";
 import "../DataDisplay/Tabs/index.js";
 import "../DataDisplay/Tree/index.js";
 import "../DataDisplay/Tooltip/index.js";
+import "../../chunks/useKitTheme.KSAU-Pdv.js";
 import "classnames";
-const M = "aristid-ds-grid", m = (i, o) => !i && !o ? "" : i ? o ? `@media screen and (min-width: ${i}px) and (max-width: ${o}px)` : `@media screen and (min-width: ${i}px)` : `@media screen and (max-width: ${o}px)`, g = (i) => {
-  var o, t;
-  const e = (o = i.closed.colWidth) !== null && o !== void 0 ? o : "auto", r = (t = i.open.colWidth) !== null && t !== void 0 ? t : "auto";
-  return `
-        .kit-row-inner {
-            grid-template-columns: repeat(${i.columns}, ${e === "auto" ? "1fr" : `${e}px`});
-            column-gap: ${i.closed.colGap}px;
-            width: ${e === "auto" ? "100%" : "auto"};
-            ${i.closed.marginRight ? `margin-right: ${i.closed.marginRight}px;` : ""}
-            ${i.horizontalPadding ? `padding: 0 ${i.horizontalPadding}px` : ""}
-        }
-        &.kit-row-menu-open {
-            .kit-row-inner {
-                grid-template-columns: repeat(${i.columns}, ${r === "auto" ? "1fr" : `${r}px`});
-                column-gap: ${i.open.colGap}px;
-                width: ${r === "auto" ? "100%" : "auto"};
-                ${i.open.marginRight ? `margin-right: ${i.open.marginRight}px;` : ""}
-                ${i.horizontalPadding ? `padding: 0 ${i.horizontalPadding}px` : ""}
-            }
-        }
-    `;
-}, B = ({ theme: i, customTheme: o, id: t }) => {
-  const r = K(() => s(i, o == null ? void 0 : o.general), [i, o]).breakpoints.reverse(), c = [
-    // add css rules for fixed rows breakpoints (non mediaQueries)
-    ...r.map((d) => `
-            .${t}.kit-row.kit-row-fixed.${d} {
-                ${g(i.grid[d])}
-            }
-        `),
-    // add css rules for non  width > larger breakpoints
-    `
-            ${m(i.grid[r[0]].width + 1, void 0)} {
-                /* breakpoint: ${r[0]}*/
-                .${t}.kit-row:not(.kit-row-fixed) {
-                    ${g(i.grid[r[0]])}
-                }
-            }
-        `,
-    // add css rules for intermediate breakpoints breakpoints
-    ...r.slice(0, -1).map((d, l) => `
-                ${m(i.grid[r[l + 1]].width + 1, i.grid[d].width)} {
-                    /* breakpoint: ${d}*/
-                    .${t}.kit-row:not(.kit-row-fixed) {
-                        ${g(i.grid[d])}
-                    }
-                }
-                `),
-    // css rules for width < smallest breakpoint
-    `
-            ${m(void 0, i.grid[r[r.length - 1]].width)} {
-                /* breakpoint: ${r[r.length - 1]}*/
-                .${t}.kit-row:not(.kit-row-fixed) {
-                    ${g(i.grid[r[r.length - 1]])}
-                }
-            }
-        `
-  ];
-  return n(w, { id: M, hasSourceMap: !1, children: c.join("") });
-}, N = R`
-  .${(i) => i.id} {
-      ${(i) => h(i.customTheme)};
-
-  }
-`, U = "aristid-ds-global", V = ({ children: i, customTheme: o, id: t, useMediaQueries: e = !0 }) => {
-  const [r, c] = k(null), { theme: d, appId: l, spacing: u } = D(t, o);
-  return b(() => {
-    const p = h(a, "--general");
-    c(p);
-  }, []), n(G.Provider, { value: { theme: d, appId: l, spacing: u }, children: r !== null && v(x, { children: [n(w, { id: U, hasSourceMap: !1, children: `
-                            :root{
-                                ${Object.keys(r).map((p) => `${p}: ${r[p]}`).join(";")}
-                            }
-                        ` }), o && n(N, { id: l, customTheme: s({ general: { utilities: a.utilities } }, o) }), e && n(B, { theme: a, customTheme: o, id: l }), i] }) });
-}, D = (i, o) => {
-  var t, e, r;
-  const c = S(i || "ds-" + C().substring(0, 8)), d = s(a.spacing, (t = o == null ? void 0 : o.general) === null || t === void 0 ? void 0 : t.spacing), l = s(a.breakpoints, (e = o == null ? void 0 : o.general) === null || e === void 0 ? void 0 : e.breakpoints), u = s(a.grid, (r = o == null ? void 0 : o.general) === null || r === void 0 ? void 0 : r.grid);
-  return {
-    theme: a,
-    appId: c.current,
-    spacing: d,
-    breakpoints: l,
-    grid: u
-  };
-}, O = ({ children: i }) => {
-  const o = Q();
-  return n(_.Provider, { value: o, children: i });
-}, Q = () => {
-  const [i, o] = k(f);
-  return { locale: i, setKitLocale: (e) => {
-    if (e.locale === "frFR") {
-      const r = s(f, e);
-      o(r);
-    } else {
-      const r = s(E, e);
-      o(r);
-    }
-  } };
-}, wi = ({ children: i, locale: o, customTheme: t, id: e, useMediaQueries: r }) => n(V, { customTheme: t, id: e, useMediaQueries: r, children: n(O, { children: n(q, { locale: o, children: n(z, { children: i }) }) }) }), q = ({ children: i, locale: o }) => {
-  const { locale: t, setKitLocale: e } = j();
-  return P(() => {
-    o !== void 0 && e(o);
-  }, [o, e]), n(L, { theme: I, locale: A(o), renderEmpty: () => {
-    var r;
-    return n($, { className: "default-render", image: $.ASSET_LIST, description: (r = t.Empty) === null || r === void 0 ? void 0 : r.noData });
-  }, children: v(F, { children: [n(y, {}), i] }) });
-};
 export {
-  wi as KitApp
+  k as KitApp
 };

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

@@ -1,4 +1,4 @@
-import { a as e } from "../../../chunks/index.yWVMx2TR.js";
+import { b as e } from "../../../chunks/index.1blqoZQ8.js";
 export {
   e as KitCollapse
 };

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

@@ -1,4 +1,4 @@
-import "../../../assets/index31.css";
+import "../../../assets/index29.css";
 import { jsxs as e, jsx as a } from "react/jsx-runtime";
 import { Empty as m } from "antd";
 import { u } from "../../../chunks/useKitTheme.KSAU-Pdv.js";

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

@@ -1,4 +1,5 @@
 import "react/jsx-runtime";
+import "react";
 import "antd";
 import "../../../chunks/index.qBmLATvd.js";
 import "../../../chunks/useKitTheme.KSAU-Pdv.js";
@@ -12,7 +13,11 @@ import "color-string";
 import "lodash/isEmpty";
 import "classnames";
 import "../../../chunks/styles.module.Q_QQjQdX.js";
-import { b as g } from "../../../chunks/index.yWVMx2TR.js";
+import { c as n } from "../../../chunks/index.1blqoZQ8.js";
+import "../../Feedback/Alert/index.js";
+import "../../Feedback/Progress/index.js";
+import "../../Feedback/Loader/index.js";
+import "react-hot-toast";
 export {
-  g as KitError
+  n as KitError
 };

package/dist/Kit/DataDisplay/Error/types.d.ts

@@ -1,10 +1,15 @@
 import {EmptyProps} from 'antd';
 import {KitHTMLAttributes} from '../../../types';
-import {ReactNode} from 'react';
+import {ReactElement, ReactNode} from 'react';
 
 type AntdEmptyTypesToOmit = 'description';
 
+type KitHttpErrorCode = '401' | '403' | '404' | '500' | '502' | '503';
+
+type KitErrorImageAlt = ({alt: string}) => ReactElement;
+
 export interface IKitError extends KitHTMLAttributes<HTMLDivElement>, Omit<EmptyProps, AntdEmptyTypesToOmit> {
     title: string;
     description: ReactNode;
+    httpErrorCode?: KitHttpErrorCode;
 }

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

@@ -9,7 +9,7 @@ import "../../DataEntry/Input/index.js";
 import "../../DataEntry/InputNumber/index.js";
 import "../../DataEntry/Radio/index.js";
 import "../../DataEntry/Rate/index.js";
-import { K as y } from "../../../chunks/index.yWVMx2TR.js";
+import { a as y } from "../../../chunks/index.1blqoZQ8.js";
 import "../../DataEntry/Switch/index.js";
 import "../../DataEntry/DatePicker/index.js";
 import "../../DataEntry/AutoComplete/index.js";

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

@@ -5,7 +5,7 @@ import "../../DataEntry/Input/index.js";
 import "../../DataEntry/InputNumber/index.js";
 import "../../DataEntry/Radio/index.js";
 import "../../DataEntry/Rate/index.js";
-import { c as H } from "../../../chunks/index.yWVMx2TR.js";
+import { d as H } from "../../../chunks/index.1blqoZQ8.js";
 import "../../DataEntry/Switch/index.js";
 import "../../DataEntry/DatePicker/index.js";
 import "../../DataEntry/AutoComplete/index.js";

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

@@ -4,9 +4,11 @@ import {IKitActionButton} from '../../DataDisplay/types';
 import {KitHTMLAttributes} from '../../../types';
 
 export interface IKitItemList extends KitHTMLAttributes<HTMLDivElement> {
-    idCardProps: IKitIdCard;
+    idCardProps?: IKitIdCard;
+    idCardSubstitute?: ReactNode;
     draggableHandler?: ReactNode;
     onSelect?: (isChecked: boolean) => void;
+    checkboxAriaLabel?: string;
     onClick?: () => void;
     actions?: IKitActionButton[];
     content?: ReactNode;

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

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "classnames";
-import { d as g } from "../../../chunks/index.yWVMx2TR.js";
+import { e as g } from "../../../chunks/index.1blqoZQ8.js";
 import "react";
 import "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import "@fortawesome/react-fontawesome";

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

@@ -1,43 +1,43 @@
 import "../../../assets/index20.css";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { Table as I } from "antd";
-import k from "classnames";
-import { u as N } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { KitButton as g } from "../../General/Button/index.js";
+import N from "classnames";
+import { u as g } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { KitButton as A } from "../../General/Button/index.js";
 import "../../General/Typography/index.js";
-import { KitIcon as A } from "../../General/Icon/index.js";
-import { FontAwesomeIcon as x } from "@fortawesome/react-fontawesome";
-import { faUpDown as K, faArrowDown as T, faArrowUp as R, faCaretDown as j, faCaretRight as z } from "@fortawesome/free-solid-svg-icons";
-const h = {
-  "kit-table": "_kit-table_ztqiv_2",
-  "expand-button": "_expand-button_ztqiv_555"
+import { KitIcon as S } from "../../General/Icon/index.js";
+import { FontAwesomeIcon as w } from "@fortawesome/react-fontawesome";
+import { faUpDown as K, faArrowDown as T, faArrowUp as R, faCaretDown as W, faCaretRight as j } from "@fortawesome/free-solid-svg-icons";
+const f = {
+  "kit-table": "_kit-table_nebkd_2",
+  "expand-button": "_expand-button_nebkd_556"
 }, _ = (n) => {
-  const l = n == null ? void 0 : n.split(" "), i = l == null ? void 0 : l.filter((e) => e !== "ant-table-cell").join(" "), o = l == null ? void 0 : l.filter((e) => ["ant-table-cell", "ant-table-cell-ellipsis", "ant-table-selection-column"].includes(e)).join(" ");
+  const l = n == null ? void 0 : n.split(" "), i = l == null ? void 0 : l.filter((t) => t !== "ant-table-cell").join(" "), a = l == null ? void 0 : l.filter((t) => ["ant-table-cell", "ant-table-cell-ellipsis", "ant-table-selection-column"].includes(t)).join(" ");
   return {
     antCell: i,
-    internalCell: o
+    internalCell: a
   };
 }, D = (n) => ({
   header: {
-    cell: ({ children: l, className: i, style: o, title: e, rowSpan: d, colSpan: c, ...v }) => {
-      const s = _(i);
-      return a("th", { className: s.antCell, style: o, title: e, rowSpan: d, colSpan: c, ...v, children: a("div", { className: s.internalCell, children: l }) });
+    cell: ({ children: l, className: i, style: a, title: t, rowSpan: c, colSpan: s, ...v }) => {
+      const d = _(i);
+      return o("th", { className: d.antCell, style: a, title: t, rowSpan: c, colSpan: s, ...v, children: o("div", { className: d.internalCell, children: l }) });
     }
   },
   body: {
-    cell: ({ children: l, className: i, style: o, title: e, rowSpan: d, colSpan: c, ...v }) => {
-      var s, u;
-      const C = (s = n == null ? void 0 : n.body) === null || s === void 0 ? void 0 : s.cell, b = _(i);
-      let f = "";
-      return !((u = b.antCell) === null || u === void 0) && u.includes("ant-table-cell-ellipsis") && (f = e), a("td", { className: b.antCell, style: o, title: f, rowSpan: d, colSpan: c, children: a("div", { className: b.internalCell, children: C ? a(C, { title: e, ...v, children: l }) : l }) });
+    cell: ({ children: l, className: i, style: a, title: t, rowSpan: c, colSpan: s, ...v }) => {
+      var d, u;
+      const h = (d = n == null ? void 0 : n.body) === null || d === void 0 ? void 0 : d.cell, b = _(i);
+      let C = "";
+      return !((u = b.antCell) === null || u === void 0) && u.includes("ant-table-cell-ellipsis") && (C = t), o("td", { className: b.antCell, style: a, title: C, rowSpan: c, colSpan: s, children: o("div", { className: b.internalCell, children: h ? o(h, { title: t, ...v, children: l }) : l }) });
     },
     row: ({ children: l, ...i }) => {
-      var o;
-      const e = (o = n == null ? void 0 : n.body) === null || o === void 0 ? void 0 : o.row;
-      return e ? a("tr", { ...i, tabIndex: 0, children: a(e, { children: l }) }) : a("tr", { ...i, tabIndex: 0, children: l });
+      var a;
+      const t = (a = n == null ? void 0 : n.body) === null || a === void 0 ? void 0 : a.row;
+      return t ? o("tr", { ...i, tabIndex: 0, children: o(t, { children: l }) }) : o("tr", { ...i, tabIndex: 0, children: l });
     }
   }
-}), S = ({ sortOrder: n }) => {
+}), U = ({ sortOrder: n }) => {
   let l, i;
   switch (n) {
     case "ascend":
@@ -50,35 +50,39 @@ const h = {
       l = K;
       break;
   }
-  return a(A, { color: i, icon: a(x, { icon: l }) });
-}, W = ({ className: n, style: l, cellsBackgroundColor: i, columns: o, onChange: e, components: d, ...c }) => {
-  const { appId: v, theme: s } = N(), u = k(v, h["kit-table"], n), C = o == null ? void 0 : o.map((t) => (t.sorter && (t.sortIcon = ({ sortOrder: p }) => a(S, { sortOrder: p })), t)), b = (t, p, m, r) => {
-    e == null || e(t, m, r);
-  }, f = ({ record: t, expanded: p, onExpand: m }) => {
+  return o(S, { color: i, icon: o(w, { icon: l }) });
+}, z = ({ className: n, style: l, cellsBackgroundColor: i, columns: a, onChange: t, components: c, ...s }) => {
+  const { appId: v, theme: d } = g(), u = N(v, f["kit-table"], n), h = a == null ? void 0 : a.map((e) => (e.sorter && (e.sortIcon = ({ sortOrder: m }) => o(U, { sortOrder: m })), e)), b = (e, m, p, r) => {
+    t == null || t(e, p, r);
+  }, C = ({ record: e, expanded: m, onExpand: p }) => {
     var r;
-    if (!(!Array.isArray(t == null ? void 0 : t.children) || !(!((r = t == null ? void 0 : t.children) === null || r === void 0) && r.length)))
-      return a(g, { className: h["expand-button"], type: "tertiary", onClick: (y) => m(t, y), children: a(x, { icon: p ? j : z }) });
-  }, w = (t, p, m) => {
+    if (!(!Array.isArray(e == null ? void 0 : e.children) || !(!((r = e == null ? void 0 : e.children) === null || r === void 0) && r.length)))
+      return o(A, { className: f["expand-button"], type: "tertiary", onClick: (y) => p(e, y), children: o(w, { icon: m ? W : j }) });
+  }, x = (e, m, p) => {
     var r;
-    return m > 0 && (!Array.isArray(t == null ? void 0 : t.children) || !(!((r = t == null ? void 0 : t.children) === null || r === void 0) && r.length)) ? "last-expandable-level" : "";
-  };
-  return a(I, {
+    return p > 0 && (!Array.isArray(e == null ? void 0 : e.children) || !(!((r = e == null ? void 0 : e.children) === null || r === void 0) && r.length)) ? "last-expandable-level" : "";
+  }, k = { ...s == null ? void 0 : s.rowSelection };
+  return o(I, {
     className: u,
     style: { "--kit-table-cells-background-color": i, ...l },
-    columns: C,
-    components: D(d),
+    columns: h,
+    components: D(c),
     onChange: b,
     // Pour l'instant on garde expandable dans les props à Omit<>
     // A voir si on permet de custom uniquement certaines propriété
     expandable: {
-      expandedRowClassName: w,
-      expandIcon: f,
-      indentSize: s.spacing.m
+      expandedRowClassName: x,
+      expandIcon: C,
+      indentSize: d.spacing.m
     },
-    ...c
+    ...s,
+    rowSelection: {
+      ...k,
+      columnWidth: "var(--kit-table-checkbox-width)"
+    }
   });
 };
-W.displayName = "KitTable";
+z.displayName = "KitTable";
 export {
-  W as KitTable
+  z as KitTable
 };

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

@@ -1,4 +1,4 @@
-import { e as o } from "../../../chunks/index.yWVMx2TR.js";
+import { f as o } from "../../../chunks/index.1blqoZQ8.js";
 export {
   o as KitTag
 };

package/dist/Kit/DataDisplay/index.js

@@ -1,6 +1,6 @@
 import { KitAvatar as o } from "./Avatar/index.js";
 import { KitBadge as a } from "./Badge/index.js";
-import { a as K, b as m, K as p, c as f, d as x, e as s } from "../../chunks/index.yWVMx2TR.js";
+import { b as K, c as m, a as p, d as f, e as x, f as s } from "../../chunks/index.1blqoZQ8.js";
 import { KitEmpty as T } from "./Empty/index.js";
 import { KitIdCard as C } from "./IdCard/index.js";
 import { K as b } from "../../chunks/index.qBmLATvd.js";

package/dist/Kit/DataEntry/AutoComplete/index.js

@@ -1,27 +1,28 @@
 import "../../../assets/index8.css";
 import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as I, useState as N } from "react";
-import { AutoComplete as y } from "antd";
-import { KitInput as O } from "../Input/index.js";
-import { K as P } from "../../../chunks/InputWrapper.ZM2BYw23.js";
-import { FontAwesomeIcon as j } from "@fortawesome/react-fontawesome";
-import { faMagnifyingGlass as B } from "@fortawesome/free-solid-svg-icons";
-import G from "classnames";
-const M = {
+import { forwardRef as F, useState as v } from "react";
+import { AutoComplete as O } from "antd";
+import { KitInput as P } from "../Input/index.js";
+import { K as j } from "../../../chunks/InputWrapper.tJodbKzs.js";
+import { FontAwesomeIcon as B } from "@fortawesome/react-fontawesome";
+import { faMagnifyingGlass as G } from "@fortawesome/free-solid-svg-icons";
+import M from "classnames";
+const R = {
   "kit-autocomplete": "_kit-autocomplete_kox09_2"
-}, R = (e, r, o) => G(e, "ant-select-dropdown", "kit-select-dropdown-bottom", {
+}, S = (e, r, o) => M(e, "ant-select-dropdown", "kit-select-dropdown-bottom", {
   "kit-select-dropdown-focus": r,
   "kit-select-dropdown-error": o === "error",
   "kit-select-dropdown-warning": o === "warning"
-}), S = I(({ allowClear: e, label: r, helper: o, autoFocus: l, defaultValue: a, disabled: i, placeholder: f, status: n, value: u, onFocus: s, onBlur: m, popupClassName: d, wrapperClassName: w, required: k, infoIcon: _, actions: g, onInfoClick: C, ...K }, h) => {
-  const [x, c] = N(!1), A = (p) => {
-    c(!0), s && s(p);
-  }, F = (p) => {
-    c(!1), m && m(p);
+}), W = F(({ allowClear: e, label: r, helper: o, htmlFor: s, autoFocus: d, defaultValue: u, disabled: m, placeholder: w, status: i, value: k, onFocus: c, onBlur: l, popupClassName: _, wrapperClassName: g, required: C, infoIcon: K, actions: x, onInfoClick: A, ...a }, I) => {
+  var n;
+  const [N, f] = v(!1), h = (p) => {
+    f(!0), c && c(p);
+  }, y = (p) => {
+    f(!1), l && l(p);
   };
-  return t(P, { label: r, helper: o, disabled: i, status: n, className: w, required: k, infoIcon: _, actions: g, onInfoClick: C, children: t(y, { ...K, disabled: i, ref: h, className: M["kit-autocomplete"], popupClassName: R(d, x, n), children: t(O, { prefix: t(j, { icon: B }), allowClear: e, autoFocus: l, defaultValue: a, placeholder: f, status: n, value: u, onBlur: F, onFocus: A }) }) });
+  return t(j, { label: r, helper: o, htmlFor: s, disabled: m, status: i, className: g, required: C, infoIcon: K, actions: x, onInfoClick: A, children: t(O, { ...a, id: (n = a.id) !== null && n !== void 0 ? n : s, disabled: m, ref: I, className: R["kit-autocomplete"], popupClassName: S(_, N, i), children: t(P, { prefix: t(B, { icon: G }), allowClear: e, autoFocus: d, defaultValue: u, placeholder: w, status: i, value: k, onBlur: y, onFocus: h }) }) });
 });
-S.displayName = "KitAutoComplete";
+W.displayName = "KitAutoComplete";
 export {
-  S as KitAutoComplete
+  W as KitAutoComplete
 };

package/dist/Kit/DataEntry/AutoComplete/types.d.ts

@@ -5,6 +5,7 @@ import {ReactNode, ReactElement, MouseEvent} from 'react';
 export interface IKitAutoComplete extends AutoCompleteProps<T, E>, KitHTMLAttributes<HTMLInputElement> {
     label?: string;
     helper?: string;
+    htmlFor?: string;
     allowClear?: boolean;
     placeholder?: string;
     wrapperClassName?: string;

package/dist/Kit/DataEntry/Checkbox/index.js

@@ -7,7 +7,7 @@ import w from "classnames";
 import te from "rc-util/es/omit";
 import { ConfigContext as ce } from "antd/es/config-provider/";
 import ie from "antd/es/checkbox/style";
-import { K as ue } from "../../../chunks/InputWrapper.ZM2BYw23.js";
+import { K as ue } from "../../../chunks/InputWrapper.tJodbKzs.js";
 const R = p(null), de = ({ defaultValue: v, children: o, options: a = [], prefixCls: m, className: l, wrapperClassName: f, status: b, rootClassName: u, style: t, onChange: d, label: x, helper: j, required: A, infoIcon: B, actions: D, onInfoClick: E, ...n }, T) => {
   const { getPrefixCls: W, direction: q } = O(ce), [s, G] = S(n.value || v || []), [z, y] = S([]);
   V(() => {

package/dist/Kit/DataEntry/ColorPicker/index.js

@@ -1,6 +1,6 @@
 import "../../../assets/index10.css";
 import { jsx as t } from "react/jsx-runtime";
-import { K as f } from "../../../chunks/InputWrapper.ZM2BYw23.js";
+import { K as f } from "../../../chunks/InputWrapper.tJodbKzs.js";
 import { u as C } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import { ColorPicker as K } from "antd";
 import i from "classnames";

package/dist/Kit/DataEntry/DatePicker/index.js

@@ -1,24 +1,26 @@
 import "../../../assets/index22.css";
-import { jsx as e } from "react/jsx-runtime";
-import { faCircleXmark as I, faClock as K, faCalendar as h, faArrowRight as A } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as i } from "@fortawesome/react-fontawesome";
-import { K as R } from "../../../chunks/InputWrapper.ZM2BYw23.js";
-import { u as w } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { DatePicker as C } from "antd";
-import D from "classnames";
-import { forwardRef as x } from "react";
-const N = {
+import { jsx as t } from "react/jsx-runtime";
+import { faCircleXmark as R, faClock as w, faCalendar as C, faArrowRight as W } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
+import { K as D } from "../../../chunks/InputWrapper.tJodbKzs.js";
+import { u as h } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { DatePicker as x } from "antd";
+import N from "classnames";
+import { forwardRef as g } from "react";
+const z = {
   "kit-datepicker": "_kit-datepicker_122z1_2",
   "kit-rangepicker": "_kit-rangepicker_122z1_133"
-}, S = x(({ label: d, helper: m, suffixIcon: a, className: r, wrapperClassName: o, picker: c = "date", allowClear: f = !0, required: p, infoIcon: u, actions: k, onInfoClick: l, readonly: t = !1, disabled: n, ...s }, b) => {
-  const { appId: v } = w(), _ = () => c === "time" ? e(i, { icon: K }) : e(i, { icon: h }), z = D(v, N["kit-datepicker"], r, t ? "kit-picker-readonly" : "");
-  return e(R, { label: d, helper: m, disabled: n, status: s.status, className: o, required: p, infoIcon: u, actions: k, onInfoClick: l, children: e("div", { children: e(C, { ...s, picker: c, disabled: t || n, variant: t ? "borderless" : void 0, ref: b, suffixIcon: a ?? _(), allowClear: !t && f ? { clearIcon: e(i, { "aria-label": "clear", icon: I }) } : !1, className: z }) }) });
-}), W = x(({ label: d, className: m, helper: a, suffixIcon: r, picker: o, allowClear: c = !0, required: f, infoIcon: p, actions: u, onInfoClick: k, readonly: l = !1, ...t }, n) => {
-  const { appId: s } = w(), b = () => o === "time" ? e(i, { icon: K }) : e(i, { icon: h }), v = () => t.disabled === void 0 ? !1 : typeof t.disabled == "boolean" ? t.disabled : t.disabled[0] && t.disabled[1], _ = D(s, N["kit-rangepicker"], m, l ? "kit-picker-readonly" : "");
-  return e(R, { label: d, helper: a, disabled: v(), status: t.status, required: f, infoIcon: p, actions: u, onInfoClick: k, children: e("div", { children: e(C.RangePicker, { ...t, picker: o, ref: n, disabled: l || t.disabled, variant: l ? "borderless" : void 0, suffixIcon: r ?? b(), allowClear: c ? { clearIcon: e(i, { "aria-label": "clear", icon: I }) } : !1, className: _, separator: e(i, { icon: A }) }) }) });
-}), j = W, g = S;
-g.displayName = "KitDatePicker";
-g.RangePicker = j;
+}, j = g(({ label: m, helper: u, htmlFor: c, suffixIcon: r, className: l, wrapperClassName: s, picker: d = "date", allowClear: p = !0, required: b, infoIcon: k, actions: v, onInfoClick: n, readonly: i = !1, disabled: f, ...e }, _) => {
+  var o;
+  const { appId: I } = h(), K = () => d === "time" ? t(a, { icon: w }) : t(a, { icon: C }), S = N(I, z["kit-datepicker"], l, i ? "kit-picker-readonly" : "");
+  return t(D, { label: m, helper: u, htmlFor: c, disabled: f, status: e.status, className: s, required: b, infoIcon: k, actions: v, onInfoClick: n, children: t("div", { children: t(x, { ...e, id: (o = e.id) !== null && o !== void 0 ? o : c, picker: d, disabled: i || f, variant: i ? "borderless" : void 0, ref: _, suffixIcon: r ?? K(), allowClear: !i && p ? { clearIcon: t(a, { "aria-label": "clear", icon: R }) } : !1, className: S }) }) });
+}), T = g(({ label: m, className: u, helper: c, htmlFor: r, suffixIcon: l, picker: s, allowClear: d = !0, required: p, infoIcon: b, actions: k, onInfoClick: v, readonly: n = !1, ...i }, f) => {
+  var e;
+  const { appId: _ } = h(), o = () => s === "time" ? t(a, { icon: w }) : t(a, { icon: C }), I = () => i.disabled === void 0 ? !1 : typeof i.disabled == "boolean" ? i.disabled : i.disabled[0] && i.disabled[1], K = N(_, z["kit-rangepicker"], u, n ? "kit-picker-readonly" : "");
+  return t(D, { label: m, helper: c, htmlFor: r, disabled: I(), status: i.status, required: p, infoIcon: b, actions: k, onInfoClick: v, children: t("div", { children: t(x.RangePicker, { ...i, id: (e = i.id) !== null && e !== void 0 ? e : r, picker: s, ref: f, disabled: n || i.disabled, variant: n ? "borderless" : void 0, suffixIcon: l ?? o(), allowClear: d ? { clearIcon: t(a, { "aria-label": "clear", icon: R }) } : !1, className: K, separator: t(a, { icon: W }) }) }) });
+}), X = T, A = j;
+A.displayName = "KitDatePicker";
+A.RangePicker = X;
 export {
-  g as KitDatePicker
+  A as KitDatePicker
 };

package/dist/Kit/DataEntry/DatePicker/types.d.ts

@@ -7,6 +7,7 @@ interface IInternalDatePicker {
     bordered?: never;
     label?: string;
     helper?: string;
+    htmlFor?: string;
     allowClear?: boolean;
     cellRender?: DatePickerProps['cellrender'];
     wrapperClassName?: string;
@@ -31,6 +32,7 @@ interface IInternalRangerPicker {
     bordered?: never;
     label?: string;
     helper?: string;
+    htmlFor?: string;
     allowClear?: boolean;
     required?: boolean;
     infoIcon?: ReactNode;