@edifice.io/react 2.0.0-develop-rc.3

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Add a label
+     */
+    label?: string;
+    /**
+     * If disable
+     */
+    disabled?: boolean;
+    /**
+     * If checked
+     */
+    checked?: boolean;
+    /**
+     * If indeterminate
+     */
+    indeterminate?: boolean;
+}
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useEffect, useId } from "react";
+import clsx from "clsx";
+const Checkbox = /* @__PURE__ */ forwardRef(({
+  label,
+  disabled = !1,
+  checked = !1,
+  indeterminate = !1,
+  ...restProps
+}, ref) => {
+  const refCheckbox = useRef(null);
+  useImperativeHandle(ref, () => ({
+    ...refCheckbox.current
+  })), useEffect(() => {
+    refCheckbox.current.indeterminate = indeterminate;
+  }, [refCheckbox, indeterminate]);
+  const id = useId(), checkboxProps = {
+    type: "checkbox",
+    checked,
+    disabled,
+    ref: refCheckbox,
+    className: clsx(restProps.className, "form-check-input c-pointer"),
+    id
+  }, inputProps = {
+    ...restProps,
+    ...checkboxProps
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "form-check d-flex align-items-center gap-8", children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps }),
+    label && /* @__PURE__ */ jsx("label", { className: "form-check-label", htmlFor: inputProps.id, children: label })
+  ] });
+}), Checkbox$1 = Checkbox;
+export {
+  Checkbox$1 as default
+};

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+export * from './Checkbox';

package/dist/components/ColorPicker/ColorPalette.d.ts

@@ -0,0 +1,46 @@
+import { TooltipProps } from '../Tooltip';
+export interface ColorPaletteItem {
+    /**
+     * CSS Color Value, in the form #AABBCC
+     */
+    value: string;
+    /**
+     * i18n key describing the color.
+     */
+    description: string;
+    /**
+     * Is it a dark or light color ?
+     * When undefined, will be considered Dark.
+     */
+    hue?: 'dark' | 'light';
+    /**
+     * Is it intended to be a reset color ?
+     */
+    isReset?: boolean;
+}
+/** Variations of one color. */
+export type ColorPaletteHues = Array<ColorPaletteItem>;
+export interface ColorPalette {
+    /**
+     * Description of the color palette.
+     */
+    label: string;
+    /**
+     * [Optional] informative tooltip.
+     */
+    tooltip?: Partial<TooltipProps>;
+    /**
+     * Array of colors * variations.
+     */
+    colors: ColorPaletteHues[];
+    /**
+     * Reset option
+     */
+    reset?: ColorPaletteItem;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+export declare const DefaultPalette: ColorPalette;
+export declare const AccessiblePalette: ColorPalette;

package/dist/components/ColorPicker/ColorPalette.js

@@ -0,0 +1,171 @@
+const DefaultPalette = {
+  className: "fw-bold",
+  label: "defaultPalette",
+  colors: [
+    /* Paint It Black */
+    [{
+      value: "#4A4A4A",
+      description: "color.gray.darkest"
+    }, {
+      value: "#909090",
+      description: "color.gray.dark"
+    }, {
+      value: "#C7C7C7",
+      description: "color.gray.medium"
+    }, {
+      value: "#F2F2F2",
+      description: "color.gray.light",
+      hue: "light"
+    }, {
+      value: "#FFFFFF",
+      description: "color.white",
+      hue: "light"
+    }],
+    /* Blue Sunday */
+    [{
+      value: "#005A8A",
+      description: "color.blue.darkest"
+    }, {
+      value: "#2F7EA7",
+      description: "color.blue.dark"
+    }, {
+      value: "#46AFE6",
+      description: "color.blue.medium"
+    }, {
+      value: "#B9E3F8",
+      description: "color.blue.light",
+      hue: "light"
+    }, {
+      value: "#E5F5FF",
+      description: "color.blue.lightest",
+      hue: "light"
+    }],
+    /* Purple haze */
+    [{
+      value: "#550070",
+      description: "color.purple.darkest"
+    }, {
+      value: "#7C2C96",
+      description: "color.purple.dark"
+    }, {
+      value: "#A348C0",
+      description: "color.purple.medium"
+    }, {
+      value: "#D7B5E2",
+      description: "color.purple.light",
+      hue: "light"
+    }, {
+      value: "#F6ECF9",
+      description: "color.purple.lightest",
+      hue: "light"
+    }],
+    /* Red House */
+    [{
+      value: "#9E0016",
+      description: "color.red.darkest"
+    }, {
+      value: "#C6253B",
+      description: "color.red.dark"
+    }, {
+      value: "#FF3A55",
+      description: "color.red.medium"
+    }, {
+      value: "#FFB6C0",
+      description: "color.red.light",
+      hue: "light"
+    }, {
+      value: "#FFECEE",
+      description: "color.red.lightest",
+      hue: "light"
+    }],
+    /* The Brown Album */
+    [{
+      value: "#9E4800",
+      description: "color.brown.darkest"
+    }, {
+      value: "#DA6A0B",
+      description: "color.brown.dark"
+    }, {
+      value: "#FF8D2E",
+      description: "color.brown.medium"
+    }, {
+      value: "#FFCBA0",
+      description: "color.brown.light",
+      hue: "light"
+    }, {
+      value: "#FFEFE3",
+      description: "color.brown.lightest",
+      hue: "light"
+    }],
+    /* Yellow Submarine */
+    [{
+      value: "#A89400",
+      description: "color.yellow.darkest"
+    }, {
+      value: "#D1AF00",
+      description: "color.yellow.dark"
+    }, {
+      value: "#F1CA00",
+      description: "color.yellow.medium"
+    }, {
+      value: "#FAEA9C",
+      description: "color.yellow.light",
+      hue: "light"
+    }, {
+      value: "#FBF4D5",
+      description: "color.yellow.lightest",
+      hue: "light"
+    }],
+    /* Green Naugahyde */
+    [{
+      value: "#2E6105",
+      description: "color.green.darkest"
+    }, {
+      value: "#4E9019",
+      description: "color.green.dark"
+    }, {
+      value: "#5AC235",
+      description: "color.green.medium"
+    }, {
+      value: "#C8E4AF",
+      description: "color.green.light",
+      hue: "light"
+    }, {
+      value: "#EAF7E4",
+      description: "color.green.lightest",
+      hue: "light"
+    }]
+  ]
+}, AccessiblePalette = {
+  label: "accessiblePalette",
+  tooltip: {
+    message: "Veni, vidi, vici"
+  },
+  colors: [[{
+    value: "#4A4A4A",
+    description: "color.gray"
+  }], [{
+    value: "#648FFF",
+    description: "color.blue"
+  }], [{
+    value: "#785EF0",
+    description: "color.purple"
+  }], [{
+    value: "#DC267F",
+    description: "color.red"
+  }], [{
+    value: "#FE6100",
+    description: "color.brown"
+  }], [{
+    value: "#FFB000",
+    description: "color.orange"
+  }], [{
+    value: "#F3EA14",
+    description: "color.yellow"
+  }]],
+  className: "mt-16"
+};
+export {
+  AccessiblePalette,
+  DefaultPalette
+};

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef } from 'react';
+import { ColorPalette, ColorPaletteItem } from './ColorPalette';
+export interface ColorPickerProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Palettes of pickable colors
+     */
+    palettes?: ColorPalette[];
+    /**
+     * Current picked color
+     */
+    model?: string;
+    /**
+     * Triggered when a color is picked
+     */
+    onSuccess?: (item: ColorPaletteItem) => void;
+}
+declare const ColorPicker: import('react').ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ColorPicker;

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { DefaultPalette, AccessiblePalette } from "./ColorPalette.js";
+import ColorPickerItem from "./ColorPickerItem.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import { Icon } from "../Icon/Icon.js";
+const ColorPicker = /* @__PURE__ */ forwardRef(({
+  palettes = [DefaultPalette, AccessiblePalette],
+  model = "#4A4A4A",
+  onSuccess,
+  ...restProps
+}, ref) => {
+  const {
+    t
+  } = useTranslation(), handleClick = (item) => {
+    item && (onSuccess == null || onSuccess(item));
+  };
+  return /* @__PURE__ */ jsx("div", { ref, ...restProps, children: palettes.map((palette, paletteIdx) => /* @__PURE__ */ jsxs("div", { className: clsx("color-picker mx-8", palette.className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "color-picker-label small mt-4 mb-8", children: [
+      t(palette.label),
+      palette.tooltip && /* @__PURE__ */ jsx(Tooltip, { message: "", placement: "auto", ...palette.tooltip, children: /* @__PURE__ */ jsx(Icon, { name: "info-circle", size: "18", className: "mx-4 position-relative", style: {
+        top: "4px"
+      } }) })
+    ] }),
+    // Show/hide the reset option
+    palette.reset && /* @__PURE__ */ jsxs("button", { className: "color-picker-reset small my-8 gap-4", onClick: () => handleClick(palette.reset), children: [
+      /* @__PURE__ */ jsx(Icon, { name: "delete-color", size: "20" }),
+      palette.reset.description
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "color-picker-palette d-flex gap-2 justify-content-between", children: palette.colors.map((hues, hueIndex) => /* @__PURE__ */ jsx("div", { className: "color-picker-hue d-flex gap-2 justify-content-between flex-column ", children: hues.map((color) => /* @__PURE__ */ jsx("button", { "aria-label": color.description, className: "color-picker-hue-color", onClick: () => handleClick(color), children: /* @__PURE__ */ jsx(ColorPickerItem, { ...restProps, model: color, selected: model === color.value }) }, color.value)) }, hueIndex)) })
+  ] }, paletteIdx)) });
+}), ColorPicker$1 = ColorPicker;
+export {
+  ColorPicker$1 as default
+};

package/dist/components/ColorPicker/ColorPickerItem.d.ts

@@ -0,0 +1,20 @@
+import { ColorPaletteItem } from './ColorPalette';
+export interface ColorPickerItemProps {
+    /**
+     * Color item to display
+     */
+    model: ColorPaletteItem;
+    /**
+     * Render as selected
+     */
+    selected?: boolean;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const ColorPickerItem: {
+    ({ model, selected, className, }: ColorPickerItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ColorPickerItem;

package/dist/components/ColorPicker/ColorPickerItem.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../Icon/Icon.js";
+const ColorPickerItem = ({
+  model,
+  selected,
+  className
+}) => model.isReset ? /* @__PURE__ */ jsx(Icon, { name: "delete-color" }) : /* @__PURE__ */ jsx("div", { "aria-label": model.description, className: clsx("color-picker-hue-color-item rounded-1", className, model.hue === "light" ? "light" : "dark", selected && "selected"), style: {
+  backgroundColor: model.value
+} }), ColorPickerItem$1 = ColorPickerItem;
+export {
+  ColorPickerItem$1 as default
+};

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ColorPicker } from './ColorPicker';
+export { default as ColorPickerItem } from './ColorPickerItem';
+export * from './ColorPicker';
+export * from './ColorPickerItem';
+export * from './ColorPalette';

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,31 @@
+import { ChangeEvent } from 'react';
+export interface ComboboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onSearchResultsChange: (model: (string | number)[]) => void;
+    onSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    options: OptionListItemType[];
+    value: string;
+    isLoading: boolean;
+    noResult: boolean;
+    searchMinLength?: number;
+    placeholder?: string;
+}
+export interface OptionListItemType {
+    /**
+     * Value
+     */
+    value: string | number;
+    /**
+     * Label
+     */
+    label: string;
+    /**
+     * Add an icon
+     */
+    icon?: any;
+}
+declare const Combobox: {
+    ({ onSearchResultsChange, onSearchInputChange, options, value, isLoading, noResult, searchMinLength, placeholder, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, }: import('./ComboboxTrigger').ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Combobox;

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import ComboboxTrigger from "./ComboboxTrigger.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+import Loading from "../Loading/Loading.js";
+const Combobox = ({
+  onSearchResultsChange,
+  onSearchInputChange,
+  options,
+  value,
+  isLoading,
+  noResult,
+  searchMinLength,
+  placeholder
+}) => {
+  const {
+    t
+  } = useTranslation(), [localValue, setLocalValue] = useState([]);
+  useEffect(() => {
+    onSearchResultsChange(localValue);
+  }, [localValue]);
+  const handleOptionClick = (value2) => {
+    setLocalValue([value2]);
+  }, renderContent = () => isLoading ? /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center p-4", children: [
+    /* @__PURE__ */ jsx(Loading, { isLoading }),
+    /* @__PURE__ */ jsx("span", { className: "ps-4", children: t("explorer.search.pending") })
+  ] }) : noResult ? /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), children: option.label }),
+    index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
+  ] }, index));
+  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, children: [
+    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, value }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderContent() })
+  ] });
+};
+Combobox.Trigger = ComboboxTrigger;
+const Combobox$1 = Combobox;
+export {
+  Combobox$1 as default
+};

package/dist/components/Combobox/ComboboxTrigger.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent } from 'react';
+export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'button'> {
+    handleSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    value: string;
+    searchMinLength?: number;
+    placeholder?: string;
+}
+declare const ComboboxTrigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default ComboboxTrigger;

package/dist/components/Combobox/ComboboxTrigger.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useDropdownContext } from "../Dropdown/DropdownContext.js";
+import Input from "../Input/Input.js";
+import FormControl from "../Form/FormControl.js";
+const ComboboxTrigger = ({
+  placeholder,
+  value = "",
+  searchMinLength = 3,
+  handleSearchInputChange
+}) => {
+  const {
+    triggerProps,
+    itemProps,
+    setVisible
+  } = useDropdownContext(), inputProps = {
+    ...triggerProps,
+    role: "combobox",
+    onClick: () => {
+      value.length >= searchMinLength && setVisible(!0);
+    },
+    onChange: handleSearchInputChange
+  };
+  return useEffect(() => {
+    setVisible(value.length >= searchMinLength);
+  }, [setVisible, value, searchMinLength]), /* @__PURE__ */ jsx(FormControl, { className: "d-flex align-items-center", id: "search", children: /* @__PURE__ */ jsx(Input, { ...inputProps, className: "max-w-512", noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown }) });
+};
+export {
+  ComboboxTrigger as default
+};

package/dist/components/Combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Combobox } from './Combobox';
+export * from './Combobox';

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+import { default as DropdownCheckboxItem } from './DropdownCheckboxItem';
+export interface DropdownProps {
+    /** Children Props */
+    children: ReactNode | ((...props: any) => ReactNode);
+    /** Full width Dropdown */
+    block?: boolean;
+    /**
+     * Add overflow and maxHeight
+     */
+    overflow?: boolean;
+    /**
+     * Default placement with FloatingUI
+     */
+    placement?: Placement;
+    /**
+     * Extra keydown handler for the Dropdown Trigger.
+     * Useful for a11y keyboard navigation between a Dropdown element and other elements,
+     * for example in the Toolbar component.
+     */
+    extraTriggerKeyDownHandler?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback to get notified when dropdown `visible` state changes (opened/closed).
+     */
+    onToggle?: (visible: boolean) => void;
+    /**
+     * Whether the trigger is hovered or not.
+     */
+    isTriggerHovered?: boolean;
+}
+export type DropdownMenuOptions = {
+    /**
+     * Object type
+     */
+    type?: undefined;
+    /**
+     * Icon component
+     */
+    icon: JSX.Element;
+    /**
+     * Label for a11y
+     */
+    label: string;
+    /**
+     * Action OnClick
+     */
+    action: (elem: any) => any;
+} | {
+    /**
+     * Object type
+     */
+    type: 'divider';
+};
+declare const Dropdown: {
+    ({ children, block, overflow, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import('react').ForwardRefExoticComponent<Omit<import('./DropdownTrigger').DropdownTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Menu: import('react').ForwardRefExoticComponent<Omit<import('./DropdownMenu').DropdownMenuProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: {
+        ({ type, icon, onClick, children, className, ...restProps }: import('./DropdownItem').DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    CheckboxItem: {
+        ({ children, value, model, onChange, }: DropdownCheckboxItem): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    RadioItem: {
+        ({ children, value, model, onChange, }: import('./DropdownRadioItem').DropdownRadioItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    MenuGroup: import('react').ForwardRefExoticComponent<import('./DropdownMenuGroup').DropdownMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default Dropdown;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import clsx from "clsx";
+import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
+import { DropdownContext } from "./DropdownContext.js";
+import DropdownItem from "./DropdownItem.js";
+import DropdownMenu from "./DropdownMenu.js";
+import DropdownMenuGroup from "./DropdownMenuGroup.js";
+import DropdownRadioItem from "./DropdownRadioItem.js";
+import DropdownSeparator from "./DropdownSeparator.js";
+import DropdownTrigger from "./DropdownTrigger.js";
+import useDropdown from "../../hooks/useDropdown/useDropdown.js";
+import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
+const Root = ({
+  children,
+  block,
+  overflow = !0,
+  placement = "bottom-start",
+  extraTriggerKeyDownHandler,
+  onToggle,
+  isTriggerHovered = !1
+}) => {
+  const {
+    visible,
+    isFocused,
+    triggerProps,
+    menuProps,
+    itemProps,
+    itemRefs,
+    setVisible
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered), ref = useClickOutside(() => {
+    setVisible(!1);
+  }), value = useMemo(() => ({
+    visible,
+    isFocused,
+    triggerProps,
+    menuProps,
+    itemProps,
+    itemRefs,
+    block,
+    setVisible
+  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
+    "w-100": block,
+    overflow
+  });
+  return useEffect(() => {
+    onToggle == null || onToggle(visible);
+  }, [visible]), /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: dropdown, children: typeof children == "function" ? children(triggerProps, itemRefs) : children }) });
+}, Dropdown = /* @__PURE__ */ Object.assign(Root, {
+  Trigger: DropdownTrigger,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  CheckboxItem: DropdownCheckboxItem,
+  RadioItem: DropdownRadioItem,
+  MenuGroup: DropdownMenuGroup
+}), Dropdown$1 = Dropdown;
+export {
+  Dropdown$1 as default
+};

package/dist/components/Dropdown/DropdownCheckboxItem.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+interface DropdownCheckboxItem {
+    /**
+     * Children Node
+     */
+    children: ReactNode;
+    /**
+     * Value
+     */
+    value: string | number;
+    /**
+     * Model
+     */
+    model: (string | number)[];
+    /**
+     * OnKeyDown handler
+     */
+    onChange: (value: string | number) => void;
+}
+declare const DropdownCheckboxItem: {
+    ({ children, value, model, onChange, }: DropdownCheckboxItem): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DropdownCheckboxItem;