@searchspring/snap-preact-components 0.20.0

package/dist/cjs/components/Molecules/Select/Select.js

@@ -0,0 +1,191 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Dropdown_1 = require("../../Atoms/Dropdown");
+var Button_1 = require("../../Atoms/Button");
+var Icon_1 = require("../../Atoms/Icon");
+var CSS = {
+    select: function (_a) {
+        var _b, _c;
+        var color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, label = _a.label, selection = _a.selection, theme = _a.theme;
+        //@ts-ignore
+        return (0, react_1.css)({
+            display: 'inline-flex',
+            color: color,
+            '&.ss__select--disabled': {
+                opacity: 0.7,
+            },
+            '& .ss__select__dropdown__button__icon': {
+                margin: 'auto 0 auto 5px',
+            },
+            '& .ss__select__label': {
+                marginRight: '5px',
+            },
+            '& .ss__select__select': {
+                position: 'relative',
+                zIndex: '10000',
+                backgroundColor: backgroundColor || '#fff',
+                listStyle: 'none',
+                padding: '0',
+                marginTop: '-1px',
+                border: "1px solid ".concat(borderColor || color || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333'),
+                '& .ss__select__select__option': {
+                    cursor: 'pointer',
+                    padding: '6px 8px',
+                    color: 'initial',
+                    '&.ss__select__select__option--selected': {
+                        fontWeight: 'bold',
+                    },
+                    '&:hover': {
+                        backgroundColor: ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.hover) || '#f8f8f8',
+                    },
+                },
+            },
+        });
+    },
+    native: function () { return (0, react_1.css)({}); },
+};
+exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var _b, _c, _d, _e, _f, _g;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        iconOpen: 'angle-down', iconClose: 'angle-up', separator: ': ', startOpen: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.select), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.select);
+    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, clearSelection = props.clearSelection, disableClickOutside = props.disableClickOutside, disabled = props.disabled, hideLabelOnSelection = props.hideLabelOnSelection, iconColor = props.iconColor, iconClose = props.iconClose, iconOpen = props.iconOpen, label = props.label, native = props.native, onSelect = props.onSelect, selected = props.selected, separator = props.separator, startOpen = props.startOpen, stayOpenOnSelection = props.stayOpenOnSelection, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var options = props.options;
+    var subProps = {
+        dropdown: __assign(__assign(__assign({ className: 'ss__select__dropdown' }, (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.dropdown), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            disabled: disabled,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        button: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__select__dropdown__button' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.button), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            disabled: disabled,
+            color: color,
+            backgroundColor: backgroundColor,
+            borderColor: borderColor,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        icon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__select__dropdown__button__icon' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            color: iconColor || color,
+            size: '14px',
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+    };
+    // only single selection support for now
+    var selection = selected;
+    var setSelection;
+    // open state
+    var _h = (0, hooks_1.useState)(startOpen), open = _h[0], setOpen = _h[1];
+    // selection state
+    var stateful = selection === undefined;
+    if (stateful) {
+        _a = (0, hooks_1.useState)(undefined), selection = _a[0], setSelection = _a[1];
+    }
+    else {
+        selection = Array.isArray(selected) ? selected[0] : selection;
+    }
+    if (selection && clearSelection) {
+        options = __spreadArray([
+            {
+                label: clearSelection,
+                value: '',
+            }
+        ], options, true);
+    }
+    var makeSelection = function (e, option) {
+        option = option.value ? option : undefined;
+        if (option != selection) {
+            onSelect && onSelect(e, option);
+        }
+        if (stateful) {
+            setSelection(option);
+        }
+        !stayOpenOnSelection && setOpen(false);
+    };
+    var styling = {};
+    if (!disableStyles) {
+        if (native) {
+            styling.css = [CSS.native(), style];
+        }
+        else {
+            styling.css = [CSS.select({ color: color, backgroundColor: backgroundColor, borderColor: borderColor, label: label, selection: selection || '', theme: theme }), style];
+        }
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (options &&
+        (typeof options == 'object' || Array.isArray(options)) &&
+        options.length && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--disabled': disabled }, className) }), native ? ((0, react_1.jsx)(preact_1.Fragment, null,
+            label && !hideLabelOnSelection && ((0, react_1.jsx)("span", { className: "ss__select__label" },
+                label,
+                separator && (0, react_1.jsx)("span", { className: "ss__select__label__separator" }, separator))),
+            (0, react_1.jsx)("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: function (e) {
+                    var selectElement = e.target;
+                    var selectedOptionElement = selectElement.options[selectElement.selectedIndex];
+                    var selectedOption = options
+                        .filter(function (option, index) {
+                        return option.label == selectedOptionElement.text && (option.value == selectedOptionElement.value || option.value == index);
+                    })
+                        .pop();
+                    !disabled && makeSelection(e, selectedOption);
+                } },
+                !selection && clearSelection && ((0, react_1.jsx)("option", { className: "ss__select__select__option", selected: true, value: "" }, clearSelection)),
+                options.map(function (option, index) {
+                    var _a;
+                    return ((0, react_1.jsx)("option", { className: "ss__select__select__option", selected: (selection === null || selection === void 0 ? void 0 : selection.value) === option.value, value: (_a = option.value) !== null && _a !== void 0 ? _a : index }, option.label));
+                })))) : ((0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { disableClickOutside: disableClickOutside, open: open, onToggle: function (e, state) { return setOpen(function (prev) { return state !== null && state !== void 0 ? state : !prev; }); }, onClick: function (e) { return setOpen(function (prev) { return !prev; }); }, button: (0, react_1.jsx)(Button_1.Button, __assign({}, subProps.button),
+                label && !hideLabelOnSelection && ((0, react_1.jsx)("span", { className: "ss__select__label" },
+                    label,
+                    separator && selection && (0, react_1.jsx)("span", { className: "ss__select__label__separator" }, separator))),
+                selection && (0, react_1.jsx)("span", { className: "ss__select__selection" }, selection === null || selection === void 0 ? void 0 : selection.label),
+                (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: open ? iconClose : iconOpen }))) }),
+            (0, react_1.jsx)("ul", { className: "ss__select__select" }, options.map(function (option) { return ((0, react_1.jsx)("li", { className: (0, classnames_1.default)('ss__select__select__option', {
+                    'ss__select__select__option--selected': (selection === null || selection === void 0 ? void 0 : selection.value) === option.value,
+                }), onClick: function (e) { return !disabled && makeSelection(e, option); } },
+                (0, react_1.jsx)("span", null, option.label))); }))))))));
+});

package/dist/cjs/components/Molecules/Select/Select.stories.d.ts

@@ -0,0 +1,315 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { SelectProps } from './Select';
+declare const _default: {
+    title: string;
+    component: ((properties: SelectProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        options: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        selected: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        label: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        clearSelection: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideLabelOnSelection: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        separator: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        borderColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        backgroundColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconOpen: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        iconClose: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        stayOpenOnSelection: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        startOpen: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        native: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableClickOutside: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onSelect: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Native: any;
+//# sourceMappingURL=Select.stories.d.ts.map

package/dist/cjs/components/Molecules/Select/Select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/C,wBA4ME;AAqBF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,MAAM,KAAoB,CAAC"}