aristid-ds 1.1.0 → 2.0.0-36716c3

package/CHANGELOG.md

@@ -1,6 +1,60 @@
 # Changelog
 
+## [X.X.X](https://www.npmjs.com/package/aristid-ds/v/X.X.X) (2024-XX-XX)
+### ✨ Features
+* **Empty:**
+  * Add a new component `KitEmpty` (@philippechevieux)
+
+
+### 🐛 Bug Fixes
+* **Build**: Build as EsModule and commonjs module (@evoiron)
+
+## [2.0.0](https://www.npmjs.com/package/aristid-ds/v/2.0.0) (2024-03-06)
+### ✨ Features
+* **⚠️ Breaking change - Modal:**  (@evoiron)
+  * update Modal Design
+  * update confirmModal Options: 
+    * remove `secondLine` property
+    * rename `firstLine` to `content`
+    * add `dangerConfirm` property to show Cta Button as danger look n' feel, 
+    * add `showCloseIcon` to display top tight button for closing
+* **Section:** (@Delmotte-Vincent)
+  * Add new component Section
+* **Typography:**
+  * update default typography color (@evoiron)
+* **InputWrapper:**
+  * Add 4 properties: (@evoiron)
+    * `required`: show a red asterisk right after the label
+    * `actions`: an array of items to display at the right of the label
+    * `onInfoClick`: When set, display a clickable info icon which triggers this event
+    * `infoIcon`: customise the infoIcon displayed
+  * These components now accept the 4 properties above: (@evoiron)
+    * `AutoComplete`, `Checkbox.Group`, `Radio.Group`, `ColorPicker`, `DatePicker`, `RangePicker`, `Input`, `InputNumber`, `Select`
+* **ItemList**
+    * Add `draggable` property showing an icon that indicates the item is draggable (@fatb38)
+* **Tabs:**
+    * Add `hideSeparator` prop to hide separator between tabs and content (@P0ppoff)
+    * (Style) Allow tabs center on extraContent (@P0ppoff)
+    * (Style) Reduce space between tabs and separator (@P0ppoff)
+
+### 🐛 Bug Fixes
+* **Package**: include typescript definitions for each component in built package (@evoiron)
+* **Select:**
+  * Fix default border color (@philippechevieux)
+* **Badge:**
+  * Fix custom className bug (@evoiron)
+* **Input:**
+   * Update color of content, label, placeholder and clear icon (@TdyP)
+  * Add aria-label on clear icon to improve testability (@TdyP)
+* **InputNumber:**
+  * Update color of content, label, placeholder and clear icon (@TdyP)
+* **ColorPicker:**
+  * Update color of content, label and placeholder (@TdyP)
+* **DatePicker:**
+  * Update color of content, label and placeholder (@TdyP)
+
 ## [1.1.0](https://www.npmjs.com/package/aristid-ds/v/1.1.0) (2024-02-28)
+
 ### ✨ Features
 * **Nightly build:**
   * publish a nightly version of the package under `next`. (@evoiron)
@@ -19,8 +73,6 @@
 * **InputWrapper:**
   * Fix border default color (@philippechevieux)
 
-
-
 ## [1.0.1](https://www.npmjs.com/package/aristid-ds/v/1.0.1) (2024-02-26)
 ### 🐛 Bug Fixes
 * **Typography:**

package/dist/Kit/App/index.js

@@ -1,80 +1,92 @@
 import "../../assets/index19.css";
-import r, { useState as p, useLayoutEffect as g, useRef as v, useEffect as K } from "react";
-import { ConfigProvider as E } from "antd";
-import { I as L } from "../../chunks/SnackBarProvider.v49b6mkx.js";
+import o, { useState as d, useLayoutEffect as g, useRef as E, useEffect as K } from "react";
+import { ConfigProvider as L } from "antd";
+import { I as S } from "../../chunks/SnackBarProvider.v49b6mkx.js";
 import { createGlobalStyle as P } from "styled-components";
-import { toCssVariables as d, uuid as S } from "../../utils/functions/index.js";
-import l from "lodash/merge";
-import { Style as C } from "react-style-tag";
-import { K as b } from "../../chunks/useKitTheme.KSAU-Pdv.js";
-import { KitAristidThemeGeneral as s } from "../../theme/aristid/general/index.js";
-import { antdThemeConfig as h } from "../../theme/utils/tokens-mapper/index.js";
-import { frFR as m } from "../../translation/fr-FR/index.js";
-import { enUS as I } from "../../translation/en-US/index.js";
-import { K as F, u as R } from "../../chunks/useKitLocale.96CdK3og.js";
-import { mapKitLocaleToAntdLocale as T } from "../../translation/utils/index.js";
-import { d as $ } from "../../chunks/notification-provider.KGowspef.js";
-const k = P`
+import { toCssVariables as f, uuid as C } from "../../utils/functions/index.js";
+import m from "lodash/merge";
+import { Style as b } from "react-style-tag";
+import { K as y } from "../../chunks/useKitTheme.KSAU-Pdv.js";
+import { KitAristidThemeGeneral as l } from "../../theme/aristid/general/index.js";
+import { antdThemeConfig as I } from "../../theme/utils/tokens-mapper/index.js";
+import { frFR as c } from "../../translation/fr-FR/index.js";
+import { enUS as T } from "../../translation/en-US/index.js";
+import { a as h, u as k } from "../../chunks/index.-7K1zF8V.js";
+import { mapKitLocaleToAntdLocale as A } from "../../translation/utils/index.js";
+import { d as F } from "../../chunks/notification-provider.KGowspef.js";
+import "../DataDisplay/Avatar/index.js";
+import "../DataDisplay/Badge/index.js";
+import "../../chunks/index.fN8eYpwW.js";
+import { KitEmpty as p } from "../DataDisplay/Empty/index.js";
+import "../DataDisplay/LegacyCard/index.js";
+import "../DataDisplay/Tabs/index.js";
+import "../DataDisplay/Tree/index.js";
+import "../DataDisplay/Tooltip/index.js";
+import "classnames";
+const R = P`
   .${(t) => t.id} {
-    ${(t) => d(t.customTheme)};
+    ${(t) => f(t.customTheme)};
   }
-`, y = "aristid-ds-global", A = ({ children: t, customTheme: e, id: o }) => {
-  const [n, i] = p(null), { theme: f, appId: c, spacing: u } = x(o, e);
+`, $ = "aristid-ds-global", x = ({ children: t, customTheme: e, id: n }) => {
+  const [r, i] = d(null), { theme: u, appId: s, spacing: v } = _(n, e);
   return g(() => {
-    const a = d(s, "--general");
+    const a = f(l, "--general");
     i(a);
-  }, []), r.createElement(b.Provider, { value: { theme: f, appId: c, spacing: u } }, n !== null && r.createElement(
-    r.Fragment,
+  }, []), o.createElement(y.Provider, { value: { theme: u, appId: s, spacing: v } }, r !== null && o.createElement(
+    o.Fragment,
     null,
-    r.createElement(C, { id: y, hasSourceMap: !1 }, `
+    o.createElement(b, { id: $, hasSourceMap: !1 }, `
                             :root{
-                                ${Object.keys(n).map((a) => `${a}: ${n[a]}`).join(";")}
+                                ${Object.keys(r).map((a) => `${a}: ${r[a]}`).join(";")}
                             }
                         `),
-    e && r.createElement(k, { id: c, customTheme: e }),
+    e && o.createElement(R, { id: s, customTheme: e }),
     t
   ));
-}, x = (t, e) => {
-  var o;
-  const n = v(t || "ds-" + S().substring(0, 8)), i = l(s.spacing, (o = e == null ? void 0 : e.general) === null || o === void 0 ? void 0 : o.spacing);
-  return { theme: s, appId: n.current, spacing: i };
+}, _ = (t, e) => {
+  var n;
+  const r = E(t || "ds-" + C().substring(0, 8)), i = m(l.spacing, (n = e == null ? void 0 : e.general) === null || n === void 0 ? void 0 : n.spacing);
+  return { theme: l, appId: r.current, spacing: i };
 }, j = ({ children: t }) => {
   const e = G();
-  return r.createElement(F.Provider, { value: e }, t);
+  return o.createElement(h.Provider, { value: e }, t);
 }, G = () => {
-  const [t, e] = p(m);
-  return { locale: t, setKitLocale: (n) => {
-    if (n.locale === "frFR") {
-      const i = l(m, n);
+  const [t, e] = d(c);
+  return { locale: t, setKitLocale: (r) => {
+    if (r.locale === "frFR") {
+      const i = m(c, r);
       e(i);
     } else {
-      const i = l(I, n);
+      const i = m(T, r);
       e(i);
     }
   } };
-}, Z = ({ children: t, locale: e, customTheme: o, id: n }) => r.createElement(
-  A,
-  { customTheme: o, id: n },
-  r.createElement(
+}, se = ({ children: t, locale: e, customTheme: n, id: r }) => o.createElement(
+  x,
+  { customTheme: n, id: r },
+  o.createElement(
     j,
     null,
-    r.createElement(U, { locale: e }, t)
+    o.createElement(N, { locale: e }, t)
   )
-), U = ({ children: t, locale: e }) => {
-  const { setKitLocale: o } = R();
+), N = ({ children: t, locale: e }) => {
+  const { locale: n, setKitLocale: r } = k();
   return K(() => {
-    e !== void 0 && o(e);
-  }, [e, o]), r.createElement(
-    E,
-    { theme: h, locale: T(e) },
-    r.createElement(
-      $,
+    e !== void 0 && r(e);
+  }, [e, r]), o.createElement(
+    L,
+    { theme: I, locale: A(e), renderEmpty: () => {
+      var i;
+      return o.createElement(p, { className: "default-render", image: p.ASSET_LIST, description: (i = n.Empty) === null || i === void 0 ? void 0 : i.noData });
+    } },
+    o.createElement(
+      F,
       null,
-      r.createElement(L, null),
+      o.createElement(S, null),
       t
     )
   );
 };
 export {
-  Z as KitApp
+  se as KitApp
 };

package/dist/Kit/App/types.d.ts

@@ -0,0 +1,6 @@
+import {KitHTMLAttributes} from '../../types';
+import {ReactNode} from 'react';
+
+export interface KitAppProps extends KitHTMLAttributes {
+    children?: ReactNode;
+}

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

@@ -0,0 +1,21 @@
+import {AvatarProps} from 'antd';
+import {GroupProps} from 'antd/es/avatar';
+import {KitHTMLAttributes} from '../../../types';
+import {FunctionComponent} from 'react';
+import {KitColorProp} from '../../../utils/functions/types';
+
+type AntdAvatarTypesToOmit = '';
+type AntdAvatarGroupTypesToOmit = 'maxStyle';
+
+export interface IKitAvatar extends Omit<AvatarProps, AntdAvatarTypesToOmit>, KitHTMLAttributes<HTMLSpanElement> {
+    color?: KitColorProp;
+    secondaryColorInvert?: boolean;
+}
+
+export interface IKitAvatarGroup
+    extends Omit<GroupProps, AntdAvatarGroupTypesToOmit>,
+        KitHTMLAttributes<HTMLDivElement> {}
+
+export type KitAvatarCompoundedComponent = FunctionComponent<IKitAvatar> & {
+    Group: FunctionComponent<IKitAvatarGroup>;
+};

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

@@ -1,18 +1,18 @@
 import "../../../assets/index.css";
-import l, { useMemo as p } from "react";
-import { Badge as g } from "antd";
-import { u } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { isValidColor as c, getColor as d, getLighterColor as f } from "../../../utils/functions/index.js";
-import { kitBadgeCssTokens as m } from "../../../theme/aristid/components/DataDisplay/Badge/index.js";
-import n from "classnames";
-const k = {
+import g, { useMemo as l } from "react";
+import { Badge as u } from "antd";
+import { u as d } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { isValidColor as f, getColor as n, getLighterColor as c } from "../../../utils/functions/index.js";
+import { kitBadgeCssTokens as s } from "../../../theme/aristid/components/DataDisplay/Badge/index.js";
+import k from "classnames";
+const b = {
   "kit-badge": "_kit-badge_16zpm_2"
-}, B = (t, e) => !t || !c(t) ? null : {
-  [m.colors.background.default]: d(t, e),
-  [m.colors.typography.default]: f(t, e)
-}, C = ({ color: t, style: e, secondaryColorInvert: o = !1, ...s }) => {
-  const { appId: a } = u(), i = p(() => ({ ...e, ...B(t, o) }), [t, o, e]), r = n(a, k["kit-badge"], s.className);
-  return l.createElement(g, { style: i, className: r, ...s });
+}, B = (t, e) => !t || !f(t) ? null : {
+  [s.colors.background.default]: n(t, e),
+  [s.colors.typography.default]: c(t, e)
+}, C = ({ color: t, style: e, secondaryColorInvert: o = !1, className: m, ...r }) => {
+  const { appId: a } = d(), i = l(() => ({ ...e, ...B(t, o) }), [t, o, e]), p = k(a, b["kit-badge"], m);
+  return g.createElement(u, { style: i, ...r, className: p });
 };
 C.displayName = "KitBadge";
 export {

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

@@ -0,0 +1,10 @@
+import {BadgeProps} from 'antd';
+import {KitHTMLAttributes} from '../../../types';
+import {KitColorProp} from '../../../utils/functions/types';
+
+type AntdBadgeTypesToOmit = 'color' | 'size' | 'offset' | 'text';
+
+export interface IKitBadge extends KitHTMLAttributes<HTMLDivElement>, Omit<BadgeProps, AntdBadgeTypesToOmit> {
+    color?: KitColorProp;
+    secondaryColorInvert?: boolean;
+}

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

@@ -8,7 +8,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.0RmfE2Nm.js";
+import { K as y } from "../../../chunks/index.fN8eYpwW.js";
 import "../../DataEntry/Switch/index.js";
 import "../../DataEntry/DatePicker/index.js";
 import "../../DataEntry/AutoComplete/index.js";
@@ -22,7 +22,7 @@ import "../../Navigation/DropDown/index.js";
 import "../../Navigation/Steps/index.js";
 import "antd";
 import "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import "../../../chunks/styles.module.x1Oajwjm.js";
+import "../../../chunks/styles.module.h70MuyQF.js";
 export {
   y as KitCard
 };

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

@@ -0,0 +1,32 @@
+import {CSSProperties, ReactNode} from 'react';
+import {IKitTagConfig} from '../../DataDisplay/Tag/types';
+import {CheckboxChangeEvent} from 'antd/es/checkbox';
+import {SwitchChangeEventHandler} from 'antd/es/switch';
+
+export interface IKitCard {
+    title: string;
+    actions?: IKitCardAction[];
+    activated?: boolean;
+    brandingBar?: boolean;
+    className?: string;
+    description?: string;
+    extra?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    previewSrc?: string;
+    onActivate?: SwitchChangeEventHandler;
+    onSelect?: (e: CheckboxChangeEvent) => void;
+    selected?: boolean;
+    tags?: IKitTagConfig[];
+}
+
+export interface IKitCardAction {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    onClick: (e: unknown) => void;
+}
+
+export interface IStyledKitCard {
+    $brandingBar: boolean;
+}

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

@@ -1,4 +1,4 @@
-import { b as e } from "../../../chunks/index.0RmfE2Nm.js";
+import { b as e } from "../../../chunks/index.fN8eYpwW.js";
 export {
   e as KitCollapse
 };

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

@@ -0,0 +1,68 @@
+import {CollapseProps} from 'antd';
+import {ReactNode, MouseEvent, ReactInstance, KeyboardEvent, FunctionComponent} from 'react';
+import {KitHTMLAttributes} from '../../../types';
+import {SwitchChangeEventHandler} from 'antd/es/switch';
+
+type AntdCollapseTypesToOmit = 'bordered' | 'expandIconPosition' | 'ghost';
+
+export interface IKitCollapse extends Omit<CollapseProps, AntdCollapseTypesToOmit>, KitHTMLAttributes<HTMLDivElement> {}
+
+export interface IKitHeader {
+    imageSrc?: string;
+    title?: string;
+    description?: string;
+    tagContent?: ReactNode;
+    onSwitchChange?: SwitchChangeEventHandler;
+    disabled?: boolean;
+}
+
+export interface IKitHeaderSwitch {
+    onSwitchChange: NonNullable<IKitHeader['onSwitchChange']>;
+    disabled: NonNullable<IKitHeader['disabled']>;
+}
+
+export interface IKitHeaderImage {
+    imageSrc: NonNullable<IKitHeader['imageSrc']>;
+}
+
+export interface IKitHeaderContent {
+    title: IKitHeader['title'];
+    description: IKitHeader['description'];
+    tagContent: IKitHeader['tagContent'];
+    disabled: IKitHeader['disabled'];
+}
+
+export interface IKitMenuInfo {
+    key: string;
+    keyPath: string[];
+    /** @deprecated This will not support in future. You should avoid to use this */
+    item: ReactInstance;
+    domEvent: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+}
+
+interface IAction {
+    icon: ReactNode;
+    label: string;
+    onClick?: (e: MouseEvent<HTMLElement> | IKitMenuInfo) => void;
+}
+
+interface IActions extends Array<IAction> {}
+
+export interface IKitHeaderExtra {
+    actions?: IActions;
+    disabled?: boolean;
+}
+
+export interface IKitHeaderExtraActions {
+    actions: NonNullable<IKitHeaderExtra['actions']>;
+    disabled: NonNullable<IKitHeaderExtra['disabled']>;
+}
+
+export interface IKitHeaderExtraMoreActions {
+    actions: NonNullable<IKitHeaderExtra['actions']>;
+}
+
+export type KitCollapseCompoundedComponent = FunctionComponent<IKitCollapse> & {
+    Header: FunctionComponent<IKitHeader>;
+    HeaderExtra: FunctionComponent<IKitHeaderExtra>;
+};

package/dist/Kit/DataDisplay/Empty/Empty.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { IKitEmpty } from './types';
+declare const KitEmpty: FunctionComponent<IKitEmpty>;
+export default KitEmpty;

package/dist/Kit/DataDisplay/Empty/index.d.ts

@@ -0,0 +1,2 @@
+import { KitEmptyCompoundedComponent } from './types';
+export declare const KitEmpty: KitEmptyCompoundedComponent;