@kwantis-id3/frontend-library 0.14.2 → 0.16.0

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

@@ -6,9 +6,12 @@ import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export type AccordionProps = {
     title: string;
     children: React.ReactNode;
+    customTrigger?: React.ReactNode;
     color?: ThemeColorsExtended;
     iconColor?: ThemeColorsExtended;
     dividerColor?: ThemeColorsExtended;
+    hideIcon?: boolean;
+    hideDivider?: boolean;
     isOpen?: boolean;
     isLazy?: boolean;
     onClick?: () => void;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+type DropdownItem = {
+    value: string;
+    color?: ThemeColorsExtended;
+    textColor?: string;
+    children?: DropdownItem[];
+    onClick?: () => void;
+};
+export type DropdownProps = {
+    content: DropdownItem[];
+    trigger: React.ReactNode;
+    color?: ThemeColorsExtended;
+    hoverColor?: ThemeColorsExtended;
+    direction?: "left" | "right";
+    mobileBreakpoint?: number;
+};
+export declare const DropdownDesktop: (props: DropdownProps) => JSX.Element;
+type DropdownItemProps = DropdownItem & {
+    direction?: string;
+    hoverColor?: string;
+};
+declare const DropdownItem: (props: DropdownItemProps) => JSX.Element;
+export declare const Dropdown: (props: DropdownProps) => JSX.Element;
+export {};

package/dist/esm/types/components/Dropdown/DropdownStyled.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+export declare const DropdownContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownTrigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $direction: string;
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $bgColor: string;
+    $textColor: string;
+    $hoverColor: string;
+    $hoverTextColor: string;
+    $direction: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownBodyMobile: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isOpen: boolean;
+    $bgColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownItemMobileContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $bgColor: string;
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccordionBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ClickableItemMobile: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown, DropdownProps } from "./Dropdown";

package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts

@@ -24,8 +24,8 @@ type ThemeProperties = {
     colors: ThemeColorsObject;
     /**
      *
-     * @param color one of the theme keys OR a string representing a color (hex, rgb, hsl, etc)
-     * @returns a valid color object. If color is not valid, will return the primary color
+     * @param color one of the theme keys, a path to a specific color in the theme, OR a string representing a color (hex, rgb, hsl, etc)
+     * @returns a valid color object. If color is not valid, will return the primary color.
      */
     getColor: (color: ThemeColorsExtended) => Color;
 };
@@ -62,5 +62,17 @@ export declare const defaultThemeColors: {
 export declare const ThemeContextProvider: (props: React.PropsWithChildren<{
     theme?: ThemeContextProps;
 }>) => JSX.Element;
+type NestedObject<T> = {
+    [key: string]: T | NestedObject<T>;
+};
+/**
+ * Returns the value of a nested object given a string path
+ * This function is supposed to be used ONLY to retrieve values from the theme object
+ *
+ * @param object the object to search
+ * @param path a string representing the path to the value
+ * @returns the value of the nested object
+ */
+export declare function getObjectValueByPath<T>(obj: NestedObject<T>, path: string): T | undefined;
 export declare const useThemeContext: () => ThemeProperties;
 export {};

package/dist/esm/types/components/index.d.ts

@@ -4,3 +4,4 @@ export { Accordion, AccordionProps } from "./Accordion";
 export { TextField } from "./TextField";
 export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";
 export { Slider, SliderProps } from "./Slider";
+export { Dropdown, DropdownProps } from "./Dropdown";

package/dist/esm/types/utils/index.d.ts

@@ -1,2 +1,4 @@
+import useIsMobile from "./isMobile";
 export { transientOptions } from "./transientOptions";
 export { styled } from "./styled";
+export { useIsMobile };

package/dist/esm/types/utils/isMobile.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to check if the screen is mobile. The default breakpoint is 768px.
+ * @param {number=} mobileBreakpoint breakpoint width to check against
+ * @returns boolean
+ */
+declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
+export default useIsMobile;

package/dist/esm/types/utils/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { PropsOf } from '@emotion/react';
-import { CreateStyledComponent, StyledOptions, FilteringStyledOptions } from '@emotion/styled';
-import { ThemeContextProps } from '../components';
+import { PropsOf } from "@emotion/react";
+import { CreateStyledComponent, StyledOptions, FilteringStyledOptions } from "@emotion/styled";
+import { ThemeContextProps } from "../components";
 export type StyledTags = {
     [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
         theme?: ThemeContextProps;

package/dist/index.d.ts

@@ -30,8 +30,8 @@ type ThemeProperties = {
     colors: ThemeColorsObject;
     /**
      *
-     * @param color one of the theme keys OR a string representing a color (hex, rgb, hsl, etc)
-     * @returns a valid color object. If color is not valid, will return the primary color
+     * @param color one of the theme keys, a path to a specific color in the theme, OR a string representing a color (hex, rgb, hsl, etc)
+     * @returns a valid color object. If color is not valid, will return the primary color.
      */
     getColor: (color: ThemeColorsExtended) => Color;
 };
@@ -56,9 +56,12 @@ declare const Button: (props: ButtonProps) => _emotion_react_types_jsx_namespace
 type AccordionProps = {
     title: string;
     children: React__default.ReactNode;
+    customTrigger?: React__default.ReactNode;
     color?: ThemeColorsExtended;
     iconColor?: ThemeColorsExtended;
     dividerColor?: ThemeColorsExtended;
+    hideIcon?: boolean;
+    hideDivider?: boolean;
     isOpen?: boolean;
     isLazy?: boolean;
     onClick?: () => void;
@@ -136,6 +139,35 @@ type SliderProps = {
 };
 declare const Slider: (props: SliderProps) => JSX.Element;
 
+type DropdownProps = {
+    content: DropdownItem[];
+    trigger: React__default.ReactNode;
+    color?: ThemeColorsExtended;
+    hoverColor?: ThemeColorsExtended;
+    direction?: "left" | "right";
+    mobileBreakpoint?: number;
+};
+type DropdownItemProps = DropdownItem & {
+    direction?: string;
+    hoverColor?: string;
+};
+type DropdownItem = {
+    value: string;
+    color?: ThemeColorsExtended;
+    textColor?: string;
+    children?: DropdownItem[];
+    onClick?: () => void;
+};
+declare const DropdownItem: (props: DropdownItemProps) => JSX.Element;
+declare const Dropdown: (props: DropdownProps) => JSX.Element;
+
+/**
+ * Hook to check if the screen is mobile. The default breakpoint is 768px.
+ * @param {number=} mobileBreakpoint breakpoint width to check against
+ * @returns boolean
+ */
+declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
+
 declare const transientOptions: Parameters<CreateStyled$1>[1];
 
 type StyledTags = {
@@ -174,4 +206,4 @@ interface CreateStyled extends BaseCreateStyled, StyledTags {
 }
 declare const styled: CreateStyled;
 
-export { Accordion, AccordionProps, Button, ButtonProps, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, TextField, ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, styled, transientOptions, useThemeContext };
+export { Accordion, AccordionProps, Button, ButtonProps, Dropdown, DropdownProps, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, TextField, ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, styled, transientOptions, useIsMobile, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "0.14.2",
+  "version": "0.16.0",
   "description": "Kwantis frontend components collection",
   "author": {
     "name": "kwantis"
@@ -19,6 +19,7 @@
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.33",
     "@types/testing-library__jest-dom": "^5.14.5",
@@ -66,7 +67,6 @@
     "tinycolor2": "^1.6.0"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "@kwantis-id3/frontend-library@0.6.1",
   "scripts": {
     "rollup": "rollup -c",
     "test": "jest",