@bodynarf/react.components 1.1.4 → 1.1.5

package/components/anchor/components/anchorWithIcon/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrEmpty } from '@bodynarf/utils';
 import Icon from '../../../icon';
 /** Anchor with icon component */
 export const AnchorWithIcon = ({ href, className, onClick, caption, title, target, icon }) => {
     const iconPosition = icon.position || 'left';
-    const iconClassName = utils.isNullOrEmpty(caption)
+    const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
             ? `${icon.className} app-icon--left`

package/components/anchor/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined, isNullOrEmpty } from '@bodynarf/utils';
 import './anchor.scss';
 import { SimpleAnchor } from './components/simpleAnchor';
 import { AnchorWithIcon } from './components/anchorWithIcon';
 /** Anchor component */
 export default function Anchor(props) {
-    if (utils.isNullOrUndefined(props.caption) && utils.isNullOrUndefined(props.icon)) {
+    if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
         throw new Error("No anchor content provided");
     }
     const className = 'app-anchor'
-        + (!utils.isNullOrEmpty(props.className) ? ` ${props.className}` : '')
+        + (!isNullOrEmpty(props.className) ? ` ${props.className}` : '')
         + (props.disableHovering === true ? ' app-anchor--unhoverable' : '');
-    if (utils.isNullOrUndefined(props.icon)) {
+    if (isNullOrUndefined(props.icon)) {
         return (_jsx(SimpleAnchor, { ...props, className: className, onClick: props.onClick }));
     }
     return (_jsx(AnchorWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));

package/components/button/components/buttonWithIcon/index.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrEmpty } from '@bodynarf/utils';
 import Icon from '../../../icon';
 /** Button with icon component */
 export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, icon }) => {
     const iconPosition = icon.position || 'left';
-    const iconClassName = utils.isNullOrEmpty(caption)
+    const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
             ? `${icon.className} app-icon--left`
             : `${icon.className} app-icon--right`;
-    className = utils.isNullOrEmpty(caption)
+    className = isNullOrEmpty(caption)
         ? `${className} button--icon-only`
         : className;
     if (iconPosition === 'left') {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAiC9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkC9D"}

package/components/button/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrEmpty, isStringEmpty, isNullOrUndefined, getClassName } from '@bodynarf/utils';
 import './button.scss';
 import { ButtonWithIcon } from './components/buttonWithIcon';
 import { SimpleButton } from './components/simpleButton';
@@ -8,17 +8,19 @@ import { SimpleButton } from './components/simpleButton';
  * @throws Caption is not defined and icon configuration is not defined at the same time
  */
 export default function Button(props) {
-    if ((utils.isNullOrEmpty(props.caption))
-        && (utils.isNullOrUndefined(props.icon) || utils.isStringEmpty(props.icon?.className))) {
+    if ((isNullOrEmpty(props.caption))
+        && (isNullOrUndefined(props.icon) || isStringEmpty(props.icon?.className))) {
         throw new Error("No button content provided.");
     }
-    const className = `button is-${props.type}`
-        + (props.light === true ? ' is-light' : '')
-        + (!utils.isNullOrUndefined(props.size) ? ` is-${props.size}` : '')
-        + (props.outlined === true ? ' is-outlined' : '')
-        + (props.rounded === true ? ' is-rounded' : '')
-        + (props.isLoading === true ? ' is-loading' : '');
-    if (!utils.isNullOrUndefined(props.icon)) {
+    const className = getClassName([
+        `button is-${props.type}`,
+        props.light === true ? 'is-light' : '',
+        !isNullOrUndefined(props.size) ? `is-${props.size}` : '',
+        props.outlined === true ? 'is-outlined' : '',
+        props.rounded === true ? 'is-rounded' : '',
+        props.isLoading === true ? 'is-loading' : '',
+    ]);
+    if (!isNullOrUndefined(props.icon)) {
         return (_jsx(ButtonWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));
     }
     else {

package/components/dropdown/components/dropdownLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,kBAAkB;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,qDAAsD,kBAAkB,KAAG,WAkC7F,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,kBAAkB;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,qDAAsD,kBAAkB,KAAG,WAiC7F,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/dropdownLabel/index.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import utils from "@bodynarf/utils";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import Icon from '../../../icon';
 /** Label component */
 const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
-    const itemSelected = !utils.isNullOrUndefined(selectedItem);
+    const itemSelected = !isNullOrUndefined(selectedItem);
     const text = itemSelected
         ? selectedItem?.displayValue
         : caption;
     const deselectVisible = deselectable && itemSelected;
-    const className = [
+    const className = getClassName([
         "dropdown-trigger",
         "app-dropdown__label",
         itemSelected ? "" : "app-dropdown__label--default",
         "button"
-    ].filter(x => !utils.isNullOrEmpty(x))
-        .join(" ");
+    ]);
     return (_jsxs("label", { className: className, onClick: onClick, children: [deselectVisible &&
                 _jsx(Icon, { className: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { className: "arrow-up" })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA6FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from 'react';
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from '@bodynarf/utils';
 import './dropdown.scss';
 import { useComponentOutsideClick } from '../../hooks/useComponentOutsideClick';
 import DropdownItem from './components/dropdownItem';
@@ -11,15 +11,15 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
     const [isListVisible, setListVisible] = useState(false);
     const onItemClick = useCallback((event) => {
         const target = event.target;
-        if (utils.isNullOrUndefined(target)) {
+        if (isNullOrUndefined(target)) {
             return;
         }
         const dataValue = target.dataset['dropdownItemValue'];
-        if (utils.isNullOrEmpty(dataValue)) {
+        if (isNullOrEmpty(dataValue)) {
             return;
         }
         const item = items.find(x => x.value === dataValue);
-        if (utils.isNullOrUndefined(item)) {
+        if (isNullOrUndefined(item)) {
             return;
         }
         if (value === item) {
@@ -31,7 +31,7 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
     }, [setListVisible, value, items, onSelect]);
     const onLabelClick = useCallback((event) => {
         const target = event.target;
-        if (utils.isNullOrUndefined(target)) {
+        if (isNullOrUndefined(target)) {
             return;
         }
         if (target.classList.contains("bi-plus-lg")) {
@@ -42,14 +42,12 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
         }
     }, [onSelect, setListVisible]);
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
-    const classNames = [
+    const classNames = getClassName([
         "app-dropdown",
         isListVisible ? "is-active" : "",
         className,
         "dropdown"
-    ]
-        .filter(x => !utils.isNullOrEmpty(x))
-        .join(" ");
+    ]);
     return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: caption, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
                     ? _jsx("ul", { className: "dropdown-content", children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
                     : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));

package/components/primitives/date/index.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName, isStringEmpty } from '@bodynarf/utils';
 /** Date input component */
 const DatePicker = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(utils.isStringEmpty(event.target.value)
+    const onValueChange = useCallback((event) => props.onValueChange(isStringEmpty(event.target.value)
         ? undefined
         : new Date(event.target.value)), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.onValueChange]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "input",
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

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

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName } 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 id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "textarea",
         props.fixed === true ? 'has-fixed-size' : '',
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

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

@@ -1,21 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName } 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 id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "textarea",
         props.fixed === true ? 'has-fixed-size' : '',
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

package/components/primitives/multiline/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import utils from '@bodynarf/utils';
+import { isNullOrUndefined } 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)) {
+    if (isNullOrUndefined(props.label)) {
         return (_jsx(MultilineWithoutLabel, { ...props }));
     }
     else {

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

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName, } 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 id = props.name || generateGuid();
     const size = `is-${(props.size || 'normal')}`;
-    const className = utils.getClassName([
+    const className = getClassName([
         props.className,
         size,
         props.rounded === true ? 'is-rounded' : '',
         "input",
     ]);
-    const inputContainerClassName = utils.getClassName([
+    const inputContainerClassName = getClassName([
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`

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

@@ -1,24 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName } 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([
+    const className = getClassName([
         props.className,
         `is-${(props.size || 'normal')}`,
         props.rounded === true ? 'is-rounded' : '',
         "input",
     ]);
-    const containerClassName = utils.getClassName([
+    const containerClassName = getClassName([
         "app-input",
         "control",
         props.loading === true ? 'is-loading' : '',
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`
     ]);
-    const id = props.name || utils.generateGuid();
+    const id = props.name || 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.js

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

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

@@ -1 +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"}
+{"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,CA+E9D"}

package/components/search/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import utils from '@bodynarf/utils';
+import { generateGuid, getClassName, isNullOrUndefined } 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 [name] = useState(props.name || 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)
+            const minCharsToSearch = isNullOrUndefined(props.minCharsToSearch)
                 ? 3
                 : props.minCharsToSearch;
             if (elementValue.length >= minCharsToSearch) {
@@ -20,16 +20,18 @@ export default function Search(props) {
         }
         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' : '');
+    const onSearchButtonClick = useCallback(() => props.onSearch(searchValue), [props, searchValue]);
+    const className = getClassName([
+        'app-search control',
+        `is-${(props.size || 'normal')}`,
+        props.isLoading === true ? 'is-loading' : '',
+        searchType === 'byButton' ? 'is-expanded' : '',
+    ]);
+    const inputClassName = getClassName([
+        '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 }) })] }));
     }

package/hooks/useComponentOutsideClick.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import utils from "@bodynarf/utils";
+import { isNullOrUndefined, isNull } from "@bodynarf/utils";
 /**
  * Subscribe to component outside click
  * @param selector Component root selector
@@ -12,18 +12,18 @@ export const useComponentOutsideClick = (selector, clickHandleCondition, clickHa
     const onDocumentClick = useCallback((event) => {
         if (clickHandleCondition) {
             const target = event.target;
-            if (utils.isNullOrUndefined(target)) {
+            if (isNullOrUndefined(target)) {
                 return;
             }
             const relatedComponent = target.closest(selector);
-            if (utils.isNull(relatedComponent)) {
+            if (isNull(relatedComponent)) {
                 clickHandleChange();
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [clickHandleCondition, selector, clickHandleChange, dependencies]);
     useEffect(() => {
-        if (utils.isNullOrUndefined(clickListenCondition) || clickListenCondition === true) {
+        if (isNullOrUndefined(clickListenCondition) || clickListenCondition === true) {
             document.addEventListener('click', onDocumentClick);
             return () => document.removeEventListener('click', onDocumentClick);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"

package/components/anchor/anchor.scss

@@ -1,15 +0,0 @@
-.app-anchor {
-    text-decoration: none;
-    color: inherit;
-
-    transition: 0.15s ease-in-out color;
-
-    &:not(&--unhoverable):hover {
-        text-decoration: underline;
-        color: #3273dc;
-    }
-
-    .app-icon {
-        transition: none;
-    }
-}

package/components/button/button.scss

@@ -1,12 +0,0 @@
-.button {
-    transition: 0.15s ease-in-out;
-    transition-property: background-color, border-color;
-
-    &--icon-only {
-        padding: 0.55rem;
-    }
-
-    &.is-warning.is-outlined:not([disabled]):hover {
-        color: #000;
-    }
-}

package/components/dropdown/dropdown.scss

@@ -1,89 +0,0 @@
-.app-dropdown {
-    min-width: 7.5rem;
-    width: fit-content;
-
-    &__list {
-        position: absolute;
-
-        opacity: 0;
-        visibility: collapse;
-
-        transition: 0.15s ease-in-out opacity;
-    }
-
-    & .dropdown-menu {
-        min-width: 11.75rem;
-    }
-
-    span.dropdown-item {
-        color: gray;
-        text-align: center;
-    }
-
-    &__label {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        justify-content: space-between;
-
-        span {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow-x: hidden;
-            max-width: 15rem;
-        }
-
-        &--default span {
-            color: gray;
-            font-style: italic;
-        }
-
-        .app-icon {
-            &:hover {
-                color: #0d6efd;
-            }
-
-            &.bi-arrow-up::before {
-                transition: 0.25s ease-in-out transform;
-            }
-
-            &.bi-plus-lg::before {
-                transform: rotate(45deg);
-            }
-        }
-    }
-
-    &-item {
-        cursor: pointer;
-        user-select: none;
-        white-space: normal;
-
-        transition: 0.25s ease-in-out;
-        transition-property: color, background-color;
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-            color: #0a0a0a;
-        }
-        &:active {
-            background-color: rgba(0, 0, 0, 0.15);
-            color: #0a0a0a;
-        }
-
-        &.is-active {
-            background-color: #485fc7;
-            color: #fff;
-        }
-    }
-
-    &.is-active {
-        .app-dropdown__label .app-icon.bi-arrow-up::before {
-            transform: rotate(180deg);
-        }
-
-        .app-dropdown__list {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
-}

package/components/icon/icon.scss

@@ -1,18 +0,0 @@
-.app-icon {
-    transition: 0.15s ease-in-out color;
-    font-size: 1.3rem;
-
-    &--small {
-        font-size: 1rem;
-    }
-    &--large {
-        font-size: 2rem;
-    }
-
-    &--right {
-        margin-left: 0.5rem;
-    }
-    &--left {
-        margin-right: 0.5rem;
-    }
-}

package/components/search/search.scss

@@ -1,24 +0,0 @@
-.app-search {
-    input[type="search"] {
-        transition: 0.15s ease-out;
-        transition-property: border-color, color, background-color;
-
-        &::placeholder {
-            user-select: none;
-        }
-
-        &::-webkit-input-placeholder {
-            transition: 0.15s ease-out color;
-        }
-
-        &::-webkit-search-cancel-button {
-            cursor: pointer;
-            font-size: 1.25rem;
-        }
-    }
-
-    &.is-loading::after {
-        right: 1rem;
-        top: 0.725rem;
-    }
-}