nebula-galaxy - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

dist/components/divider/divider.d.ts

 import type { ReactNode } from 'react';
 export interface DividerProps {
+    className?: string;
     text?: ReactNode;
 }
-declare const Divider: ({ text }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Divider: ({ className, text }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export default Divider;

dist/components/divider/divider.js

@@ -16,5 +16,5 @@ var __assign = (this && this.__assign) || function () {
 var Divider = function (_a) {
-    var text = _a.text;
-    return (_jsx("div", __assign({ className: styles.divider, role: "separator" }, { children: !!text && (_jsx("span", __assign({ className: cn('cap1 medium', styles.dividerText) }, { children: text }))) })));
+    var className = _a.className, text = _a.text;
+    return (_jsx("div", __assign({ className: cn(className, styles.divider), role: "separator" }, { children: !!text && (_jsx("span", __assign({ className: cn('cap1 medium', styles.dividerText) }, { children: text }))) })));
 };
 export default Divider;

dist/components/dropdown-menu/dropdown-menu.js

@@ -51,9 +51,9 @@ var __assign = (this && this.__assign) || function () {
             var _b;
-            var label = _a.label, value = _a.value;
+            var display = _a.display, label = _a.label, value = _a.value;
             var Input = isMultiSelect ? Checkbox : Radio;
             return (_jsx("li", __assign({ role: "option", className: styles.dropdownItem }, { children: _jsx(Input, { displayClassName: cn((_b = {},
                         _b[styles.inputDisplay] = !isMultiSelect,
-                        _b)), name: name, value: value, checked: isChecked(value), onChange: onChange, label: label }) }), "dropdown-option-".concat(index)));
+                        _b)), name: name, value: value, checked: isChecked(value), onChange: onChange, label: display || label }) }), "dropdown-option-".concat(index)));
         }) }));
 };
 export default DropdownMenu;

dist/components/index.d.ts

@@ -12,2 +12,3 @@ export { default as Alert } from './alert';
 export { default as NebulaLogo } from './nebula-logo';
+export { default as Popper } from './popper';
 export { default as Radio } from './radio';
@@ -14,0 +15,0 @@ export { default as Select } from './select';

dist/components/index.js

@@ -12,2 +12,3 @@ export { default as Alert } from './alert';
 export { default as NebulaLogo } from './nebula-logo';
+export { default as Popper } from './popper';
 export { default as Radio } from './radio';
@@ -14,0 +15,0 @@ export { default as Select } from './select';

dist/components/popper/popper.js

@@ -15,2 +15,3 @@ var __assign = (this && this.__assign) || function () {
 import cn from 'classnames';
+import { useClickOutside } from '../../utils';
 import styles from './popper.module.scss';
@@ -23,2 +24,3 @@ var Popper = function (_a) {
     var triggerRef = useRef(null);
+    var popperContainerRef = useRef(null);
     var popperRef = useRef(null);
@@ -71,3 +73,4 @@ useEffect(function () {
     }, [isActive]);
-    return (_jsxs("div", __assign({ className: cn(className, styles.container) }, { children: [_jsx("div", __assign({ ref: triggerRef, onClick: function () { return setIsActive(!isActive); }, className: cn(styles.trigger, (_b = {},
+    useClickOutside(popperContainerRef, function () { return setIsActive(false); });
+    return (_jsxs("div", __assign({ ref: popperContainerRef, className: cn(className, styles.container) }, { children: [_jsx("div", __assign({ ref: triggerRef, onClick: function () { return setIsActive(!isActive); }, className: cn(styles.trigger, (_b = {},
                     _b[styles.triggerDisabled] = disabled,
@@ -74,0 +77,0 @@ _b)), role: "button" }, { children: trigger })), isActive && (_jsx("div", __assign({ ref: popperRef, className: cn(childrenClassName, styles.popper, styles["popper".concat(popperPosition || position)]) }, { children: children })))] })));

dist/components/select/select.js

@@ -33,7 +33,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import cn from 'classnames';
 import Icon from '../icon';
 import DropdownMenu from '../dropdown-menu';
-import { checkValidOrZero, useClickOutside } from '../../utils';
+import { checkValidOrZero } from '../../utils';
 import styles from './select.module.scss';
@@ -52,3 +52,2 @@ import Popper from '../popper/popper';
     var _g = useState(footnote), stateFootnote = _g[0], setStateFootnote = _g[1];
-    var selectRef = useRef(null);
     var getDisplay = function () {
@@ -91,3 +90,2 @@ var _a;
     var hasValue = checkValidOrZero(stateValue);
-    useClickOutside(selectRef, function () { return setIsOpen(false); });
     useEffect(function () {
@@ -107,3 +105,3 @@ setIsValid(!hasError);
             _a[styles.selectDisabled] = disabled,
-            _a)), ref: selectRef, "aria-label": "select" }, { children: [!!label && _jsx("label", __assign({ className: styles.selectLabel }, { children: label })), _jsx(Popper, __assign({ trigger: _jsxs("button", __assign({ className: styles.selectDisplay, disabled: disabled, type: "button" }, { children: [_jsxs("div", __assign({ className: styles.selectInputContainer }, { children: [icon && (_jsx("div", __assign({ className: styles.selectAddon }, { children: _jsx(Icon, { name: icon }) }))), isSearchable ? (_jsx("input", { className: styles.selectInput, value: isOpen ? searchValue : getDisplay(), disabled: disabled, placeholder: placeholder || '', onChange: handleSearch, onClick: function (e) {
+            _a)), "aria-label": "select" }, { children: [!!label && _jsx("label", __assign({ className: styles.selectLabel }, { children: label })), _jsx(Popper, __assign({ trigger: _jsxs("button", __assign({ className: styles.selectDisplay, disabled: disabled, type: "button" }, { children: [_jsxs("div", __assign({ className: styles.selectInputContainer }, { children: [icon && (_jsx("div", __assign({ className: styles.selectAddon }, { children: _jsx(Icon, { name: icon }) }))), isSearchable ? (_jsx("input", { className: styles.selectInput, value: isOpen ? searchValue : getDisplay(), disabled: disabled, placeholder: placeholder || '', onChange: handleSearch, onClick: function (e) {
                                         isOpen && e.stopPropagation();
@@ -110,0 +108,0 @@ } })) : (_jsx("span", __assign({ className: cn('p5', styles["".concat(hasValue

package.json

 {
     "name": "nebula-galaxy",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

376622

increased by0.08%

Lines of code

1715

increased by0.23%

No dependency changes