@m4l/components 0.0.8 → 0.0.9

package/dist/components/hook-form/RHFAutocompleteAsync/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SKTRHFAutocompleteAsyncWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PropertieValueLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTInputText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -0,0 +1,17 @@
+export interface SkeletonProps {
+    isSkeleton?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+export interface RHFAutocompleteAsyncProps<T> {
+    name: string;
+    getOptionLabel: (option: T) => string;
+    isOptionEqualToValue: (option: T, value: T) => boolean;
+    skeletonProps?: SkeletonProps;
+    endPoint: string;
+    timeout?: number;
+    parms?: any;
+    resultField?: string;
+    label: string;
+    isRemote?: boolean;
+}

package/dist/components/hook-form/RHFCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFCheckboxProps } from './types';
+export declare function RHFCheckbox({ name, sizeCheck, isSkeleton, ...other }: RHFCheckboxProps): JSX.Element;

package/dist/components/hook-form/RHFCheckbox/index.js

@@ -0,0 +1,41 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperSKTRHFCheckbox = styled("div")(() => ({
+  display: "flex"
+}));
+function SKTRHFCheckbox() {
+  return /* @__PURE__ */ jsx(WrapperSKTRHFCheckbox, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rectangular",
+      width: 16,
+      height: 16
+    })
+  });
+}
+function RHFCheckbox({
+  name,
+  sizeCheck = "small",
+  isSkeleton = false,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field
+      }) => isSkeleton ? /* @__PURE__ */ jsx(SKTRHFCheckbox, {}) : /* @__PURE__ */ jsx(Checkbox, {
+        size: sizeCheck,
+        ...field,
+        checked: field.value
+      })
+    }),
+    ...other
+  });
+}
+export { RHFCheckbox as R };

package/dist/components/hook-form/RHFCheckbox/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SKTRHFCheckbox(): JSX.Element;

package/dist/components/hook-form/RHFCheckbox/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFCheckbox/types.d.ts

@@ -0,0 +1,10 @@
+import { FormControlLabelProps } from '@mui/material';
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+    name: string;
+    sizeCheck?: 'small' | 'medium';
+    isSkeleton?: boolean;
+}
+export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+    name: string;
+    options: string[];
+}

package/dist/components/hook-form/RHFMultiCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFMultiCheckboxProps } from './types';
+export declare function RHFMultiCheckbox({ name, options, ...other }: RHFMultiCheckboxProps): JSX.Element;

package/dist/components/hook-form/RHFMultiCheckbox/index.js

@@ -0,0 +1,32 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFMultiCheckbox({
+  name,
+  options,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field
+    }) => {
+      const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
+      return /* @__PURE__ */ jsx(FormGroup, {
+        children: options.map((option) => /* @__PURE__ */ jsx(FormControlLabel, {
+          control: /* @__PURE__ */ jsx(Checkbox, {
+            checked: field.value.includes(option),
+            onChange: () => field.onChange(onSelected(option))
+          }),
+          label: option,
+          ...other
+        }, option))
+      });
+    }
+  });
+}
+export { RHFMultiCheckbox as R };

package/dist/components/hook-form/RHFMultiCheckbox/types.d.ts

@@ -0,0 +1,10 @@
+import { FormControlLabelProps } from '@mui/material';
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+    name: string;
+    sizeCheck?: 'small' | 'medium';
+    isSkeleton?: boolean;
+}
+export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+    name: string;
+    options: string[];
+}

package/dist/components/hook-form/RHFRadioGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RadioGroupProps } from '@mui/material';
+interface IProps {
+    name: string;
+    options: string[];
+    getOptionLabel?: string[];
+}
+export declare function RHFRadioGroup({ name, options, getOptionLabel, ...other }: IProps & RadioGroupProps): JSX.Element;
+export {};

package/dist/components/hook-form/RHFRadioGroup.js

@@ -0,0 +1,41 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsxs("div", {
+      children: [/* @__PURE__ */ jsx(RadioGroup, {
+        ...field,
+        row: true,
+        ...other,
+        children: options.map((option, index) => /* @__PURE__ */ jsx(FormControlLabel, {
+          value: option,
+          control: /* @__PURE__ */ jsx(Radio, {}),
+          label: getOptionLabel?.length ? getOptionLabel[index] : option
+        }, option))
+      }), !!error && /* @__PURE__ */ jsx(FormHelperText, {
+        error: true,
+        sx: {
+          px: 2
+        },
+        children: error.message
+      })]
+    })
+  });
+}
+export { RHFRadioGroup as R };

package/dist/components/hook-form/RHFSelect.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+interface IProps {
+    name: string;
+    children: any;
+}
+export declare function RHFSelect({ name, children, ...other }: IProps & TextFieldProps): JSX.Element;
+export {};

package/dist/components/hook-form/RHFSelect.js

@@ -0,0 +1,34 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFSelect({
+  name,
+  children,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsx(TextField, {
+      ...field,
+      select: true,
+      fullWidth: true,
+      SelectProps: {
+        native: true
+      },
+      error: !!error,
+      helperText: error?.message,
+      ...other,
+      children
+    })
+  });
+}
+export { RHFSelect as R };

package/dist/components/hook-form/RHFTextField/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import { RHFTextFieldProps } from './types';
+export declare function RHFTextField(props: RHFTextFieldProps & TextFieldProps): JSX.Element;

package/dist/components/hook-form/RHFTextField/index.js

@@ -0,0 +1,57 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const SKTRHFWrapperTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+function RHFTextField(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonProps: skeletoProps = {},
+    ...other
+  } = props;
+  const {
+    isSkeleton = true,
+    width = "100%",
+    height = 14
+  } = skeletoProps;
+  const {
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width,
+        height
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsx(TextField, {
+      autoComplete,
+      ...field,
+      fullWidth: true,
+      error: !!error,
+      helperText: error?.message,
+      ...other
+    })
+  });
+}
+export { RHFTextField as R };

package/dist/components/hook-form/RHFTextField/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SKTRHFWrapperTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFTextField/types.d.ts

@@ -0,0 +1,9 @@
+export interface SkeletonProps {
+    isSkeleton?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+export interface RHFTextFieldProps {
+    skeletonProps?: SkeletonProps;
+    name: string;
+}

package/dist/components/hook-form/index.d.ts

@@ -0,0 +1,7 @@
+export { FormProvider } from './FormProvider';
+export { RHFAutocompleteAsync } from './RHFAutocompleteAsync';
+export { RHFCheckbox } from './RHFCheckbox';
+export { RHFMultiCheckbox } from './RHFMultiCheckbox';
+export { RHFSelect } from './RHFSelect';
+export { RHFTextField } from './RHFTextField';
+export { RHFRadioGroup } from './RHFRadioGroup';

package/dist/components/index.d.ts

@@ -1,14 +1,19 @@
-export * from '../components/mui_extended';
-export * from '../components/DataGrid';
-export * from '../components/DataGrid/dictionary';
-export * from '../components/ObjectLogs';
-export * from '../components/ObjectLogs/dictionary';
+export { DataGrid } from '../components/DataGrid';
+export type { Column } from 'react-data-grid';
+export type { RowKey } from '../components/DataGrid/types';
+export { getGridComponentsDictionary } from '../components/DataGrid/dictionary';
 export * from '../components/FormActions';
 export * from '../components/FormActions/dictionary';
+export * from '../components/hook-form';
 export * from '../components/ModalDialog';
 export * from '../components/ModalDialog/dictionary';
 export * from '../components/NoItemSelected';
 export * from '../components/NoItemSelected/dictionary';
+export * from '../components/ObjectLogs';
+export * from '../components/ObjectLogs/dictionary';
+export * from '../components/PropertyValue';
 export * from '../components/Resizeable';
+export * from '../components/ScrollBar';
 export * from '../components/SplitLayout';
+export * from '../components/mui_extended';
 export type { SplitPosition } from '../components/SplitLayout/types';

package/dist/components/mui_extended/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AccordionProps } from './types';
+export declare function Accordion(props: AccordionProps): JSX.Element;

package/dist/components/mui_extended/Accordion/index.js

@@ -0,0 +1,45 @@
+import { Accordion as Accordion$1, AccordionSummary, Skeleton, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.js";
+import { useEnvironment } from "@m4l/core";
+import { jsxs, jsx } from "react/jsx-runtime";
+function Accordion(props) {
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const {
+    label,
+    isSkeleton,
+    SKTWidht,
+    SKTHeight,
+    children,
+    accordionProps,
+    summaryProps
+  } = props;
+  return /* @__PURE__ */ jsxs(Accordion$1, {
+    variant: "outlined",
+    square: true,
+    TransitionProps: {
+      unmountOnExit: true
+    },
+    defaultExpanded: true,
+    ...accordionProps,
+    children: [/* @__PURE__ */ jsx(AccordionSummary, {
+      "aria-controls": "expanded-content",
+      disableTouchRipple: false,
+      expandIcon: /* @__PURE__ */ jsx(IconButton, {
+        "aria-label": "settings",
+        src: `${host_static_assets}/${environment}/frontend/components/accordion/assets/icons/expanded.svg`
+      }),
+      ...summaryProps,
+      children: isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidht,
+        height: SKTHeight
+      }) : label
+    }), /* @__PURE__ */ jsx(AccordionDetails, {
+      children
+    })]
+  });
+}
+export { Accordion as A };

package/dist/components/mui_extended/Accordion/types.d.ts

@@ -0,0 +1,11 @@
+import { AccordionProps as MUIAccordionProps, AccordionSummaryProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export declare type AccordionProps = {
+    label: string;
+    children: ReactNode;
+    accordionProps?: MUIAccordionProps;
+    summaryProps?: AccordionSummaryProps;
+    isSkeleton?: boolean;
+    SKTWidht?: string | number;
+    SKTHeight?: string | number;
+};

package/dist/components/mui_extended/BoxIcon/index.js

@@ -1,4 +1,4 @@
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 function BoxIcon({
   src,

package/dist/components/mui_extended/Breadcrumbs/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { BreadcrumbsProps } from './types';
-export default function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
+export declare function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
+export default Breadcrumbs;

package/dist/components/mui_extended/MenuPopover/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { MenuPopoverProps } from './types';
-export default function MenuPopover({ children, arrow, disabledArrow, sx, ...other }: MenuPopoverProps): JSX.Element;
+export declare function MenuPopover({ children, arrow, disabledArrow, sx, ...other }: MenuPopoverProps): JSX.Element;
+export default MenuPopover;

package/dist/components/mui_extended/Tab/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Tab(props: any): JSX.Element;

package/dist/components/mui_extended/Tab/index.js

@@ -0,0 +1,29 @@
+import { Skeleton, Tab as Tab$1 } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const SKTTabWrapper = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(1.5, 2)
+}));
+function Tab(props) {
+  const {
+    isSkeleton,
+    SKTWidth,
+    SKTHeight,
+    ...other
+  } = props;
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTTabWrapper, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidth,
+        height: SKTHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Tab$1, {
+    ...other
+  });
+}
+export { Tab as T };

package/dist/components/mui_extended/Tab/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SKTTabWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,13 +1,15 @@
+export { Accordion } from './Accordion';
 export { BoxIcon } from './BoxIcon';
-export { default as MenuPopover } from './MenuPopover';
-export { default as IconButton } from './IconButton';
-export { default as Breadcrumbs } from './Breadcrumbs';
+export { Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
-export { default as MenuActions } from './MenuActions';
+export { IconButton } from './IconButton';
+export { MenuActions } from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
-export { default as Pager } from './Pager';
-export * from './Pager/dicctionary';
+export { MenuPopover } from './MenuPopover';
+export { Pager } from './Pager';
 export type { PagerProps } from './Pager/types';
+export { Tab } from './Tab';
+export { getPagerComponentsDictionary } from './Pager/dicctionary';
 declare module '@mui/material/styles/createPalette' {
     interface TypeBackground {
         neutral: string;

package/dist/contexts/ModalContext/index.js

@@ -1,6 +1,6 @@
 import { createContext, useState } from "react";
 import { useEnvironment, voidFunction } from "@m4l/core";
-import Typography from "@mui/material/Typography";
+import { Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { B as BoxIcon } from "../../components/mui_extended/BoxIcon/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";