@bodynarf/react.components 1.0.2 → 1.1.4

package/components/primitives/multiline/components/multilineWithLabel/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import utils from '@bodynarf/utils';
+/** Multiline textual input component with describing label */
+const MultilineWithLabel = (props) => {
+    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onValueChange]);
+    const id = props.name || utils.generateGuid();
+    const size = `is-${(props.size || 'normal')}`;
+    const className = utils.getClassName([
+        props.className,
+        size,
+        props.rounded === true ? 'is-rounded' : '',
+        "textarea",
+        props.fixed === true ? 'has-fixed-size' : '',
+    ]);
+    const inputContainerClassName = utils.getClassName([
+        "control",
+        props.loading === true ? 'is-loading' : '',
+        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+    ]);
+    const label = props.label;
+    if (label.horizontal === true) {
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: `field-label ${size}`, children: _jsx("label", { className: "label", htmlFor: id, children: label.caption }) }), _jsx("div", { className: "field-body", children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id, rows: props.rows }) }) }) })] }));
+    }
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: `label ${size}`, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id, rows: props.rows }) })] }));
+};
+export default MultilineWithLabel;

package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { MultilineProps } from '../..';
+/** Multiline textual input component without describing label*/
+declare const MultilineWithoutLabel: (props: MultilineProps) => JSX.Element;
+export default MultilineWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,UAAW,cAAc,KAAG,WAwCtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/primitives/multiline/components/multilineWithoutLabel/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import utils from '@bodynarf/utils';
+/** Multiline textual input component without describing label*/
+const MultilineWithoutLabel = (props) => {
+    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onValueChange]);
+    const id = props.name || utils.generateGuid();
+    const size = `is-${(props.size || 'normal')}`;
+    const className = utils.getClassName([
+        props.className,
+        size,
+        props.rounded === true ? 'is-rounded' : '',
+        "textarea",
+        props.fixed === true ? 'has-fixed-size' : '',
+    ]);
+    const inputContainerClassName = utils.getClassName([
+        "control",
+        props.loading === true ? 'is-loading' : '',
+        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+    ]);
+    return (_jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, defaultValue: props.defaultValue, onChange: onValueChange, id: id, name: id, rows: props.rows }) }) }));
+};
+export default MultilineWithoutLabel;

package/components/primitives/multiline/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BaseInputElementProps } from '../types';
+/** Multiline textual input conponent props type */
+export declare type MultilineProps = BaseInputElementProps<string> & {
+    /** Is input should be resizable */
+    fixed?: boolean;
+    /** Number of initial rows count */
+    rows?: number;
+};
+/** Multiline textual input component */
+declare const Multiline: (props: MultilineProps) => JSX.Element;
+export default Multiline;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,mDAAmD;AACnD,oBAAY,cAAc,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACzD,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/primitives/multiline/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import utils from '@bodynarf/utils';
+import MultilineWithoutLabel from './components/multilineWithoutLabel';
+import MultilineWithLabel from './components/multilineWithLabel';
+/** Multiline textual input component */
+const Multiline = (props) => {
+    if (utils.isNullOrUndefined(props.label)) {
+        return (_jsx(MultilineWithoutLabel, { ...props }));
+    }
+    else {
+        return (_jsx(MultilineWithLabel, { ...props }));
+    }
+};
+export default Multiline;

package/components/primitives/text/components/textWithLabel/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TextProps } from '../..';
+/** Textual input with describing label */
+declare const TextWithLabel: (props: TextProps) => JSX.Element;
+export default TextWithLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/text/components/textWithLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,UAAW,SAAS,KAAG,WAiFzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/primitives/text/components/textWithLabel/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import utils from '@bodynarf/utils';
+/** Textual input with describing label */
+const TextWithLabel = (props) => {
+    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onValueChange]);
+    const id = props.name || utils.generateGuid();
+    const size = `is-${(props.size || 'normal')}`;
+    const className = utils.getClassName([
+        props.className,
+        size,
+        props.rounded === true ? 'is-rounded' : '',
+        "input",
+    ]);
+    const inputContainerClassName = utils.getClassName([
+        "control",
+        props.loading === true ? 'is-loading' : '',
+        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+    ]);
+    const label = props.label;
+    if (label.horizontal === true) {
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: `field-label ${size}`, children: _jsx("label", { className: "label", htmlFor: id, children: label.caption }) }), _jsx("div", { className: "field-body", children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) }) }) })] }));
+    }
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: `label ${size}`, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) })] }));
+};
+export default TextWithLabel;

package/components/primitives/text/components/textWithoutLabel/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TextProps } from '../..';
+/** Textual input without describing label */
+declare const TextWithoutLabel: (props: TextProps) => JSX.Element;
+export default TextWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/text/components/textWithoutLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,UAAW,SAAS,KAAG,WAsC5C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/primitives/text/components/textWithoutLabel/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import utils from '@bodynarf/utils';
+/** Textual input without describing label */
+const TextWithoutLabel = (props) => {
+    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onValueChange]);
+    const className = utils.getClassName([
+        props.className,
+        `is-${(props.size || 'normal')}`,
+        props.rounded === true ? 'is-rounded' : '',
+        "input",
+    ]);
+    const containerClassName = utils.getClassName([
+        "app-input",
+        "control",
+        props.loading === true ? 'is-loading' : '',
+        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+    ]);
+    const id = props.name || utils.generateGuid();
+    return (_jsx("div", { className: containerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) }));
+};
+export default TextWithoutLabel;

package/components/primitives/text/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BaseInputElementProps } from '../types';
+/** Text input conponent props type */
+export declare type TextProps = BaseInputElementProps<string>;
+/** Textual input component */
+declare const Text: (props: TextProps) => JSX.Element;
+export default Text;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,sCAAsC;AACtC,oBAAY,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAEtD,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/primitives/text/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import utils from '@bodynarf/utils';
+import TextWithLabel from './components/textWithLabel';
+import TextWithoutLabel from './components/textWithoutLabel';
+/** Textual input component */
+const Text = (props) => {
+    if (utils.isNullOrUndefined(props.label)) {
+        return (_jsx(TextWithoutLabel, { ...props }));
+    }
+    else {
+        return (_jsx(TextWithLabel, { ...props }));
+    }
+};
+export default Text;

package/{src/components/primitives/types.ts → components/primitives/types.d.ts}

@@ -1,65 +1,38 @@
 import { BaseElementProps } from "../types";
-
 /** Base properties for input components */
-export type BaseInputElementProps<TValue> = BaseElementProps & {
+export declare type BaseInputElementProps<TValue> = BaseElementProps & {
     /** Value change handler. Changed value must be stored outside of component */
     onValueChange: (value: TValue) => void;
-
     /** Default value of input component*/
     defaultValue?: TValue;
-
     /** Input element placeholder */
     placeholder?: string;
-
     /** Is component borders are rounded */
     rounded?: boolean;
-
     /** Should be component disabled. Selecting is not allowed */
     disabled?: boolean;
-
     /** Should be component int read only mode. Selecting is allowed */
     readonly?: boolean;
-
     /** Component size */
     size?: InputSize;
-
     /** Label configuration */
     label?: InputLabel;
-
     /** Displaying loading state of component as spinner in right end of component */
     loading?: boolean;
-
     /** Style. Colors the border */
     style?: InputColor;
-
     /** Name of element. Required for form elements */
     name?: string;
 };
-
 /** Input label configuration */
-export type InputLabel = {
+export declare type InputLabel = {
     /** Label textual content to describe input requirements */
     caption: string;
-
     /** Should component be on same line with label */
     horizontal?: boolean;
 };
-
 /** Input component size variety */
-export type InputSize =
-    | 'small'
-    | 'normal'
-    | 'medium'
-    | 'large'
-    ;
-
+export declare type InputSize = 'small' | 'normal' | 'medium' | 'large';
 /** Input component border-color type */
-export type InputColor =
-    | 'default' /** color: transparent */
-    | 'primary' /** color: seawave green */
-    | 'link' /** color: blue-violet */
-    | 'info' /** color: sky-blue */
-    | 'success' /** color: green */
-    | 'warning' /** color: yellow */
-    | 'danger' /** color: red */
-    ;
+export declare type InputColor = 'default' /** color: transparent */ | 'primary' /** color: seawave green */ | 'link' /** color: blue-violet */ | 'info' /** color: sky-blue */ | 'success' /** color: green */ | 'warning' /** color: yellow */ | 'danger' /** color: red */;
+//# sourceMappingURL=types.d.ts.map

package/components/primitives/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,2CAA2C;AAC3C,oBAAY,qBAAqB,CAAC,MAAM,IAAI,gBAAgB,GAAG;IAC3D,8EAA8E;IAC9E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,oBAAY,UAAU,GAAG;IACrB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,mCAAmC;AACnC,oBAAY,SAAS,GACf,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,OAAO,CACR;AAEL,wCAAwC;AACxC,oBAAY,UAAU,GAChB,SAAS,CAAC,yBAAyB,GACnC,SAAS,CAAC,2BAA2B,GACrC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,CAC3B"}

package/components/primitives/types.js

@@ -0,0 +1 @@
+export {};

package/components/search/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './search.scss';
+export declare type SearchProps = {
+    /** Search caption */
+    caption: string;
+    /** Search handler */
+    onSearch: (searchPattern: string) => void;
+    /** Initial search value */
+    defaultValue?: string;
+    /**
+     * Search type: by typing, starts from minimum characters to search
+     * or by clicking on button next to search bar.
+     * Default is byTyping
+    */
+    searchType?: 'byTyping' | 'byButton';
+    /** Control name. If empty - will be replaced by random guid */
+    name?: string;
+    /** Minimum amount of characters to search */
+    minCharsToSearch?: number;
+    /** Size of search bar */
+    size?: 'small' | 'normal' | 'medium' | 'large';
+    /** Should search bar be rounded */
+    rounded?: boolean;
+    /** Is search bar disabled */
+    disabled?: boolean;
+    /** Should loading icon be displayed in search bar*/
+    isLoading?: boolean;
+};
+/** Search component */
+export default function Search(props: SearchProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAgF9D"}

package/components/search/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import utils from '@bodynarf/utils';
+import './search.scss';
+import Button from '../button';
+/** Search component */
+export default function Search(props) {
+    const [name] = useState(props.name || utils.generateGuid());
+    const [searchValue, setSearchValue] = useState(props.defaultValue || '');
+    const searchType = props.searchType || 'byTyping';
+    const onChange = useCallback((event) => {
+        const elementValue = event.target.value;
+        if (searchType === 'byTyping') {
+            const minCharsToSearch = utils.isNullOrUndefined(props.minCharsToSearch)
+                ? 3
+                : props.minCharsToSearch;
+            if (elementValue.length >= minCharsToSearch) {
+                props.onSearch(elementValue);
+            }
+        }
+        setSearchValue(elementValue);
+    }, [props, searchType]);
+    const onSearchButtonClick = useCallback(() => {
+        props.onSearch(searchValue);
+    }, [props, searchValue]);
+    const className = 'app-search control'
+        + ` is-${(props.size || 'normal')}`
+        + (props.isLoading === true ? ' is-loading' : '')
+        + (searchType === 'byButton' ? ' is-expanded' : '');
+    const inputClassName = 'input is-unselectable'
+        + ` is-${(props.size || 'normal')}`
+        + (props.rounded === true ? ' is-rounded' : '');
+    if (searchType === 'byButton') {
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: name, defaultValue: searchValue, className: inputClassName, disabled: props.disabled, onChange: onChange, placeholder: props.caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: props.isLoading }) })] }));
+    }
+    else {
+        return (_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: name, defaultValue: searchValue, className: inputClassName, disabled: props.disabled, onChange: onChange, placeholder: props.caption }) }));
+    }
+}

package/{src/components/types.ts → components/types.d.ts}

@@ -1,41 +1,30 @@
 /** Base interface for component props */
-export type BaseElementProps = {
+export declare type BaseElementProps = {
     /** Additional class names */
     className?: string;
-
     /** Title */
     title?: string;
-
     /** Extra data-* attributes */
     data?: {
         /**Will add data-{key} attribute to element */
         [key: string]: any;
     };
 };
-
-export type IconSize =
-    | 'small'
-    | 'medium' /** default size */
-    | 'large';
-
-export type IconPosition =
-    | 'left'
-    | 'right';
-
+export declare type IconSize = 'small' | 'medium' /** default size */ | 'large';
+export declare type IconPosition = 'left' | 'right';
 /** Icon for component configuration */
-export type ElementIcon = {
+export declare type ElementIcon = {
     /**
      * Class name for icon.
      * Used to display icon from bootstrap-icons
     */
     className: string;
-
     /** Icon size */
     size?: IconSize;
-
     /**
      * Position
      * Works only with other content
     */
     position?: IconPosition;
 };
+//# sourceMappingURL=types.d.ts.map

package/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,oBAAY,QAAQ,GACd,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,uCAAuC;AACvC,oBAAY,WAAW,GAAG;IACtB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B,CAAC"}

package/components/types.js

@@ -0,0 +1 @@
+export {};

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useComponentOutsideClick';
+//# sourceMappingURL=index.d.ts.map

package/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/hooks/index.js

@@ -0,0 +1 @@
+export * from './useComponentOutsideClick';

package/hooks/useComponentOutsideClick.d.ts

@@ -0,0 +1,11 @@
+import { DependencyList } from "react";
+/**
+ * Subscribe to component outside click
+ * @param selector Component root selector
+ * @param clickHandleCondition Condition to handle document click
+ * @param clickHandleChange Handler of outside component click
+ * @param clickListenCondition Condition to start listening document clicks
+ * @param dependencies Additional dependencies to update hook
+ */
+export declare const useComponentOutsideClick: (selector: string, clickHandleCondition: boolean, clickHandleChange: () => void, clickListenCondition?: boolean, dependencies?: DependencyList) => void;
+//# sourceMappingURL=useComponentOutsideClick.d.ts.map

package/hooks/useComponentOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentOutsideClick.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA0B,MAAM,OAAO,CAAC;AAI/D;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,aACvB,MAAM,wBACM,OAAO,qBACV,MAAM,IAAI,yBACN,OAAO,iBACf,cAAc,KAC9B,IA6BF,CAAC"}

package/hooks/useComponentOutsideClick.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect } from "react";
+import utils from "@bodynarf/utils";
+/**
+ * Subscribe to component outside click
+ * @param selector Component root selector
+ * @param clickHandleCondition Condition to handle document click
+ * @param clickHandleChange Handler of outside component click
+ * @param clickListenCondition Condition to start listening document clicks
+ * @param dependencies Additional dependencies to update hook
+ */
+export const useComponentOutsideClick = (selector, clickHandleCondition, clickHandleChange, clickListenCondition, dependencies) => {
+    const onDocumentClick = useCallback((event) => {
+        if (clickHandleCondition) {
+            const target = event.target;
+            if (utils.isNullOrUndefined(target)) {
+                return;
+            }
+            const relatedComponent = target.closest(selector);
+            if (utils.isNull(relatedComponent)) {
+                clickHandleChange();
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [clickHandleCondition, selector, clickHandleChange, dependencies]);
+    useEffect(() => {
+        if (utils.isNullOrUndefined(clickListenCondition) || clickListenCondition === true) {
+            document.addEventListener('click', onDocumentClick);
+            return () => document.removeEventListener('click', onDocumentClick);
+        }
+        return () => { };
+    }, [clickListenCondition, onDocumentClick]);
+};

package/index.d.ts

@@ -0,0 +1,10 @@
+export * from './components/types';
+export * from './components/anchor';
+export * from './components/button';
+export * from './components/dropdown';
+export * from './components/icon';
+export * from './components/primitives';
+export * from './components/search';
+export * from './components/types';
+export * from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}

package/index.js

@@ -0,0 +1,9 @@
+export * from './components/types';
+export * from './components/anchor';
+export * from './components/button';
+export * from './components/dropdown';
+export * from './components/icon';
+export * from './components/primitives';
+export * from './components/search';
+export * from './components/types';
+export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.0.2",
+    "version": "1.1.4",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -20,25 +20,15 @@
         "react component",
         "bulma"
     ],
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview"
+    "devDependencies": {
+        "@types/react": "^18.0.11",
+        "@types/react-dom": "^18.0.5",
+        "typescript": "^4.7.3"
     },
     "dependencies": {
-        "bootstrap-icons": "^1.8.1",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-    },
-    "devDependencies": {
-        "@bodynarf/utils": "^1.0.0",
-        "@types/node": "^17.0.25",
-        "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
-        "@vitejs/plugin-react": "^1.3.0",
-        "bulma": "^0.9.3",
-        "sass": "^1.50.1",
-        "typescript": "^4.6.3",
-        "vite": "^2.9.2"
+        "@bodynarf/utils": "^1.0.10",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "bulma": "^0.9.4"
     }
 }

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,25 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[Bug]"
-labels: bug
-assignees: bodynar
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Additional context**
-Add any other context about the problem here.

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/"/>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>bodynarf/react-components</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>