nebula-galaxy - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/components/button/button.d.ts

 import type { ButtonHTMLAttributes } from 'react';
-import { icons } from 'lucide-react';
-import { iconset } from '../icon';
+import { IconName } from '../../utils';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'Primary' | 'Secondary' | 'Tertiary' | 'Neutral' | 'Destructive' | 'PrimaryIcon' | 'SecondaryIcon' | 'TertiaryIcon' | 'NeutralIcon' | 'PrimaryLink' | 'SecondaryLink' | 'PrimaryLinkButton' | 'SecondaryLinkButton' | 'GroupButton';
     size?: 'SM' | 'MD' | 'LG';
-    leftIcon?: keyof typeof icons | keyof typeof iconset;
-    rightIcon?: keyof typeof icons | keyof typeof iconset;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
     loading?: boolean;
@@ -10,0 +9,0 @@ }

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

@@ -39,8 +39,6 @@ var __assign = (this && this.__assign) || function () {
     }, [isSearchable]);
-    return (_jsxs("div", __assign({ className: cn(className, styles.dropdown), role: "combobox" }, { children: [isMultiSelect && (_jsx(Checkbox, { "aria-label": "select-all", className: styles.selectAll, label: "Select all", onChange: selectAll })), isSearchable && (_jsxs("div", __assign({ className: styles.search, role: "searchbox" }, { children: [_jsx(Icon, { name: "Search" }), _jsx("input", { ref: searchRef, type: "text", placeholder: "Search" })] }))), _jsx("ul", __assign({ className: styles.dropdownOptions, role: "listbox" }, { children: (groupedOptions === null || groupedOptions === void 0 ? void 0 : groupedOptions.length)
-                    ? groupedOptions.map(function (_a, index) {
-                        var title = _a.title, options = _a.options;
-                        return (_jsxs(Fragment, { children: [_jsx("li", __assign({ className: cn('cap1', styles.dropdownItem, styles.dropdownGroupTitle) }, { children: title })), _jsx(DropdownMenuOptions, __assign({}, props, { stateValue: stateValue, options: options }))] }, "option-group-".concat(index)));
-                    })
-                    : (options === null || options === void 0 ? void 0 : options.length) && (_jsx(DropdownMenuOptions, __assign({}, props, { stateValue: stateValue }))) })), !!actions && (_jsx("div", __assign({ "aria-label": "actions-container", className: cn(styles.dropdownActions) }, { children: actions })))] })));
+    return (_jsxs("div", __assign({ className: cn(className, styles.dropdown), role: "combobox" }, { children: [isMultiSelect && (_jsx(Checkbox, { "aria-label": "select-all", className: styles.selectAll, label: "Select all", onChange: selectAll })), isSearchable && (_jsxs("div", __assign({ className: styles.search, role: "searchbox" }, { children: [_jsx(Icon, { name: "Search" }), _jsx("input", { ref: searchRef, type: "text", placeholder: "Search" })] }))), _jsx("ul", __assign({ className: styles.dropdownOptions, role: "listbox" }, { children: (groupedOptions === null || groupedOptions === void 0 ? void 0 : groupedOptions.length) ? (groupedOptions.map(function (_a, index) {
+                    var title = _a.title, options = _a.options;
+                    return (_jsxs(Fragment, { children: [_jsx("li", __assign({ className: cn('cap1', styles.dropdownItem, styles.dropdownGroupTitle) }, { children: title })), _jsx(DropdownMenuOptions, __assign({}, props, { stateValue: stateValue, options: options }))] }, "option-group-".concat(index)));
+                })) : (options === null || options === void 0 ? void 0 : options.length) ? (_jsx(DropdownMenuOptions, __assign({}, props, { stateValue: stateValue }))) : (_jsx("li", __assign({ className: cn('p5 medium', styles.dropdownItemEmpty) }, { children: _jsx("span", { children: "No result found" }) }))) })), !!actions && (_jsx("div", __assign({ "aria-label": "actions-container", className: cn(styles.dropdownActions) }, { children: actions })))] })));
 };
@@ -47,0 +45,0 @@ var DropdownMenuOptions = function (_a) {

dist/components/icon/icon.d.ts

@@ -1,3 +0,3 @@
-import { icons, LucideProps } from 'lucide-react';
-import { iconset } from './';
+import { LucideProps } from 'lucide-react';
+import type { IconName } from '../../utils';
 export declare const sizeMap: {
@@ -10,3 +10,3 @@ SM: string;
 export interface IconProps extends Omit<LucideProps, 'ref'> {
-    name: keyof typeof icons | keyof typeof iconset;
+    name: IconName;
     size?: 'SM' | 'MD' | 'LG' | 'XL';
@@ -13,0 +13,0 @@ color?: string;

dist/components/icon/icon.js

@@ -39,6 +39,5 @@ var __assign = (this && this.__assign) || function () {
     var _b = _a.size, size = _b === void 0 ? 'SM' : _b, name = _a.name, _c = _a.color, color = _c === void 0 ? colors['DARK_600'] : _c, onClick = _a.onClick, rest = __rest(_a, ["size", "name", "color", "onClick"]);
-    var IconElement = iconset[name] ||
-        icons[name];
+    var IconElement = iconset[name] || icons[name];
     return (_jsx(IconElement, __assign({ onClick: onClick, width: sizeMap[size], height: sizeMap[size], color: color }, rest)));
 };
 export default Icon;

dist/components/select/select.d.ts

 import type { ReactNode } from 'react';
-import { icons } from 'lucide-react';
-import { iconset } from '../icon';
-import type { SelectEvent, SelectOption, SelectOptionGroup, SelectValue } from '../../utils';
+import type { IconName, SelectEvent, SelectOption, SelectOptionGroup, SelectValue } from '../../utils';
 export interface SelectProps {
@@ -15,3 +13,3 @@ className?: string;
     onChange?: (e: SelectEvent, valid: boolean) => void;
-    icon?: keyof typeof icons | keyof typeof iconset;
+    icon?: IconName;
     footnote?: ReactNode;
@@ -23,2 +21,3 @@ actions?: ReactNode | ReactNode[];
     disabled?: boolean;
+    required?: boolean;
 }
@@ -25,0 +24,0 @@ /** Select component

dist/components/select/select.js

@@ -33,3 +33,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import cn from 'classnames';
@@ -44,6 +44,9 @@ import Icon from '../icon';
 var Select = function (props) {
-    var _a, _b, _c;
-    var className = props.className, value = props.value, _d = props.variant, variant = _d === void 0 ? 'Filled' : _d, label = props.label, placeholder = props.placeholder, icon = props.icon, footnote = props.footnote, onChange = props.onChange, isMultiSelect = props.isMultiSelect, hasError = props.hasError, disabled = props.disabled, otherProps = __rest(props, ["className", "value", "variant", "label", "placeholder", "icon", "footnote", "onChange", "isMultiSelect", "hasError", "disabled"]);
-    var _e = useState(value), stateValue = _e[0], setStateValue = _e[1];
-    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _a;
+    var className = props.className, value = props.value, _b = props.variant, variant = _b === void 0 ? 'Filled' : _b, label = props.label, placeholder = props.placeholder, options = props.options, icon = props.icon, footnote = props.footnote, onChange = props.onChange, isMultiSelect = props.isMultiSelect, isSearchable = props.isSearchable, hasError = props.hasError, disabled = props.disabled, required = props.required, otherProps = __rest(props, ["className", "value", "variant", "label", "placeholder", "options", "icon", "footnote", "onChange", "isMultiSelect", "isSearchable", "hasError", "disabled", "required"]);
+    var _c = useState(value), stateValue = _c[0], setStateValue = _c[1];
+    var _d = useState(''), searchValue = _d[0], setSearchValue = _d[1];
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState(!hasError), isValid = _f[0], setIsValid = _f[1];
+    var _g = useState(footnote), stateFootnote = _g[0], setStateFootnote = _g[1];
     var selectRef = useRef(null);
@@ -74,12 +77,48 @@ var getDisplay = function () {
         }
+        setSearchValue('');
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: newValue } }, !!checked);
     };
+    var handleSearch = function (_a) {
+        var target = _a.target;
+        var value = target.value;
+        if (!isMultiSelect) {
+            setStateValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } }, !!required);
+        }
+        setSearchValue(value);
+    };
     var hasValue = checkValidOrZero(stateValue);
     useClickOutside(selectRef, function () { return setIsOpen(false); });
-    return (_jsxs("div", __assign({ className: cn(className, styles.select, styles["select".concat(variant)], (_a = {}, _a[styles.selectError] = hasError, _a), (_b = {}, _b[styles.selectDisabled] = disabled, _b)), ref: selectRef, "aria-label": "select" }, { children: [!!label && variant === 'Outline' && (_jsx("label", __assign({ className: cn('p5 medium', styles.selectLabel) }, { children: label }))), _jsxs("button", __assign({ className: cn(styles.selectDisplay, (_c = {},
-                    _c[styles.selectDisplayFocused] = isOpen,
-                    _c)), onClick: function () { return setIsOpen(!isOpen); }, disabled: disabled }, { children: [!!label && variant === 'Filled' && (_jsx("label", __assign({ className: cn('cap2', styles.selectLabel) }, { children: label }))), _jsxs("div", __assign({ className: styles.selectDisplayContent }, { children: [_jsxs("div", { children: [icon && _jsx(Icon, { name: icon }), _jsx("span", __assign({ className: cn('p5', styles["".concat(hasValue
-                                            ? 'selectDisplayText'
-                                            : 'selectDisplayPlaceholder')]) }, { children: hasValue ? getDisplay() : placeholder }))] }), _jsx(Icon, { name: "ChevronDown" })] }))] })), isOpen && (_jsx(DropdownMenu, __assign({ className: styles.selectDropdown, onChange: handleOnChange, value: stateValue }, otherProps))), !!footnote && (_jsx("span", __assign({ className: cn('cap1', styles.selectFootnote) }, { children: footnote })))] })));
+    useEffect(function () {
+        setIsValid(!hasError);
+    }, [hasError]);
+    useEffect(function () {
+        setStateFootnote(footnote);
+    }, [footnote]);
+    useEffect(function () {
+        setStateValue(value);
+    }, [value]);
+    return (_jsxs("div", __assign({ className: cn(className, styles.select, styles["select".concat(variant)], (_a = {},
+            _a[styles.selectFocused] = isOpen,
+            _a[styles.selectHasValue] = !!stateValue,
+            _a[styles.selectError] = !isValid,
+            _a[styles.selectDisabled] = disabled,
+            _a)), ref: selectRef, "aria-label": "select" }, { children: [!!label && _jsx("label", __assign({ className: styles.selectLabel }, { children: label })), _jsxs("button", __assign({ className: styles.selectDisplay, onClick: function () { return setIsOpen(!isOpen); }, disabled: disabled }, { 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();
+                                } })) : (_jsx("span", __assign({ className: cn('p5', styles["".concat(hasValue
+                                    ? 'selectDisplayText'
+                                    : 'selectDisplayPlaceholder')]) }, { children: hasValue ? getDisplay() : placeholder })))] })), _jsx("div", __assign({ className: styles.selectAddon }, { children: _jsx(Icon, { name: "ChevronDown" }) }))] })), isOpen && (_jsx(DropdownMenu, __assign({ className: styles.selectDropdown, onChange: handleOnChange, value: stateValue, options: isSearchable
+                    ? options === null || options === void 0 ? void 0 : options.filter(function (_a) {
+                        var label = _a.label, value = _a.value;
+                        return searchValue
+                            ? label
+                                .toLowerCase()
+                                .includes(searchValue.toLowerCase()) ||
+                                value
+                                    .toLowerCase()
+                                    .includes(searchValue.toLowerCase())
+                            : true;
+                    })
+                    : options }, otherProps))), !!stateFootnote && (_jsx("span", __assign({ className: cn('cap1', styles.selectFootnote) }, { children: stateFootnote })))] })));
 };
 export default Select;

dist/components/stepper/stepper.js

@@ -12,3 +12,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import cn from 'classnames';
@@ -28,8 +29,8 @@ import styles from './stepper.module.scss';
             var isCompleted = currentStep > index;
-            return (_jsxs(_Fragment, { children: [_jsxs("li", __assign({ className: cn(styles.step, (_a = {},
+            return (_jsxs(Fragment, { children: [_jsxs("li", __assign({ className: cn(styles.step, (_a = {},
                             _a[styles.stepCurrent] = currentStep === index,
                             _a[styles.stepCompleted] = isCompleted,
-                            _a)) }, { children: [_jsx("span", __assign({ className: cn('cap1 semibold', styles.stepIcon) }, { children: isCompleted ? (_jsx(Icon, { name: "Check" })) : (index + 1) })), _jsx("span", __assign({ className: cn('p5 medium', styles.stepLabel) }, { children: step }))] }), "step-".concat(index)), index < steps.length - 1 && (_jsx(Icon, { className: styles.separator, name: "ChevronRight" }))] }));
+                            _a)) }, { children: [_jsx("span", __assign({ className: cn('cap1 semibold', styles.stepIcon) }, { children: isCompleted ? (_jsx(Icon, { name: "Check" })) : (index + 1) })), _jsx("span", __assign({ className: cn('p5 medium', styles.stepLabel) }, { children: step }))] })), index < steps.length - 1 && (_jsx(Icon, { className: styles.separator, name: "ChevronRight" }))] }, "step-".concat(index)));
         }) })));
 };
 export default Stepper;

dist/components/textfield/textfield.d.ts

@@ -16,3 +16,3 @@ import type { ReactNode, ChangeEvent } from 'react';
     maxLength?: number;
-    onChange: (e: ChangeEvent<HTMLInputElement>, valid?: boolean) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>, valid: boolean) => void;
     copy?: boolean;
@@ -19,0 +19,0 @@ }

dist/utils/types.d.ts

 import type { ReactNode } from 'react';
+import { icons } from 'lucide-react';
+import { iconset } from '../components';
+export type LucideIconSet = keyof typeof icons;
+export type NebulaIconSet = keyof typeof iconset;
+export type IconName = LucideIconSet | NebulaIconSet;
 export type IconElement = {
@@ -3,0 +8,0 @@ color?: string;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

369625

increased by1.02%

Lines of code

1617

increased by2.6%

No dependency changes