@kwantis-id3/frontend-library 0.15.0 → 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/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/index.d.ts

@@ -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.15.0",
+  "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",