@bookjane2/bookjane-design-library 7.3.0 → 7.3.1

package/lib/components/BKJSelect/BKJSelect.js

@@ -1,172 +1,172 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ButtonWrapper, DropdownIcon, HiddenSelectElement, Placeholder, BKJSelectIcon, BKJSelectErrorMessage, } from './BKJSelect.styled.js';
-import { v4 as uuidv4 } from 'uuid';
-import { usePopper } from 'react-popper';
-import { getDesignLibraryElementNode } from './utils/getDesignLibraryElementNode.js';
-import { useClickOutside } from '../../hooks/useClickOutside.js';
-import { mergeRefs } from './utils/mergeRefs.js';
-import { BKJDropdown } from '../BKJDropdown/index.js';
-import { isArray } from '../../common.types.js';
-import { ErrorBoundary } from '../ErrorBoundary/index.js';
-import { BKJTheme } from '../../providers/index.js';
-import { Portal } from '../Portal/Portal.js';
-import { BKJIcon } from '../BKJIcon/index.js';
-import { VariantsWithClear } from './BKJSelect.constants.js';
-function BKJSelectEndIcon({ iconProps, isOpen, value, name, variant, onChange, }) {
-    if (variant === 'PurpleTextNoArrow')
-        return null;
-    const handleClear = (e) => {
-        e.stopPropagation();
-        onChange({ target: { value: [], name } });
-    };
-    if (value.length >= 1 && VariantsWithClear.includes(variant)) {
-        return _jsx(BKJIcon, { iconName: "CloseBold", color: "White", onClick: handleClear }, void 0);
-    }
-    return (_jsx(DropdownIcon, Object.assign({}, iconProps, { iconName: "ArrowDown", color: BKJTheme.select[variant].colorScheme.fontColor(isOpen), isOpen: isOpen }), void 0));
-}
-function BKJSelectComponent(props, ref) {
-    const { type = 'Single', label, name, onChange, onClose, value: _value = [], placeholder, required = false, variant = 'GreyOutlined', width = 'auto', disabled, dropdownVariant = 'Square', dropdownPlacement = 'bottom', moreValuesLabel = 'More', dropdownWidth, dropdownHeight, dropdownMinHeight, options, renderOptions: RenderOptions, iconComponent: IconComponent, iconProps = {}, modifiers: _modifiers, error, dropdownProps, placeholderColor, ...rest } = props;
-    const isError = !!error || (Array.isArray(error) && !!error[0]);
-    let errorMessages = [];
-    if (error && typeof error !== 'boolean') {
-        errorMessages = Array.isArray(error) ? [...error] : [error];
-    }
-    if (!Array.isArray(_value))
-        throw new Error("BKJSelect must receive an array for it's value. Even if type is set to Single.");
-    const value = useMemo(() => (Boolean(_value.length) ? _value : []), [_value]);
-    const [displayValues, setDisplayValues] = useState(options.filter((opt) => value.includes(opt.value)).map((opt) => opt.label));
-    const modifiers = useMemo(() => _modifiers || [
-        {
-            name: 'offset',
-            options: {
-                offset: () => {
-                    switch (dropdownVariant) {
-                        case 'SeamlessRounded':
-                            return [0, -2];
-                        case 'Square':
-                            return [0, 4];
-                        default:
-                            return [0, 0];
-                    }
-                },
-            },
-        },
-        {
-            name: 'sameWidth',
-            enabled: !dropdownWidth,
-            phase: 'beforeWrite',
-            requires: ['computeStyles'],
-            fn({ state }) {
-                if (dropdownWidth)
-                    return void 0;
-                state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-                state.styles.popper.maxWidth = `${state.rects.reference.width}px`;
-            },
-            effect({ state }) {
-                if (dropdownWidth)
-                    return void 0;
-                state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
-                state.elements.popper.style.maxWidth = `${state.elements.reference.offsetWidth}px`;
-            },
-        },
-    ], [dropdownVariant, _modifiers]);
-    const uuid = useMemo(() => `${name}_${uuidv4()}`, [name]);
-    const buttonRef = useRef();
-    const dropdownRef = useRef();
-    const [inputElement, setInputElement] = useState();
-    const [dropdownElement, setDropdownElement] = useState();
-    const [targetElement, setTargetElement] = useState(getDesignLibraryElementNode('dropdown-root'));
-    const [isOpen, setOpen] = useState(false);
-    useEffect(() => {
-        if (!targetElement) {
-            const element = document.createElement('div');
-            element.setAttribute('id', 'dropdown-root');
-            document.body.prepend(element);
-            setTargetElement(element);
-        }
-    }, []); // eslint-disable-line
-    const handleChange = useCallback((event) => {
-        switch (type) {
-            case 'Multiple': {
-                let nextValue = [...value];
-                if (Array.isArray(event.target.value)) {
-                    setDisplayValues(event.target.label);
-                    onChange({
-                        ...event,
-                        target: { ...event.target, value: [...new Set(event.target.value)] },
-                    });
-                    return;
-                }
-                if (nextValue.includes(event.target.value)) {
-                    nextValue = nextValue.filter((str) => str !== event.target.value);
-                    setDisplayValues(displayValues.filter((str) => str !== event.target.label));
-                }
-                else {
-                    nextValue = nextValue.concat(event.target.value);
-                    const nextDisplayValues = displayValues.concat(event.target.label);
-                    setDisplayValues([...new Set(nextDisplayValues)]);
-                }
-                onChange({ ...event, target: { ...event.target, value: [...new Set(nextValue)] } });
-                break;
-            }
-            case 'Single': {
-                onChange({ ...event, target: { ...event.target, value: [event.target.value] } });
-                setDisplayValues([event.target.label]);
-                setOpen(false);
-                break;
-            }
-        }
-    }, [displayValues, onChange, type, value]);
-    const handleToggle = useCallback(() => {
-        setOpen(!isOpen);
-    }, [isOpen]);
-    const handleClose = useCallback((event) => {
-        if (buttonRef?.current && !buttonRef?.current.contains(event.target)) {
-            if (dropdownRef?.current && !dropdownRef?.current.contains(event.target)) {
-                setOpen(false);
-                onClose && onClose(event);
-            }
-        }
-    }, [onClose]);
-    const { styles, attributes } = usePopper(inputElement, dropdownElement, {
-        modifiers,
-        placement: dropdownPlacement,
-    });
-    const popperStyles = useMemo(() => ({
-        ...styles['popper'],
-        maxHeight: 'auto',
-        height: 'auto',
-        minHeight: 'auto',
-    }), [styles]);
-    useClickOutside([buttonRef && buttonRef.current, dropdownRef && dropdownRef.current, dropdownElement], handleClose);
-    const popperProps = useMemo(() => ({
-        style: popperStyles,
-        ...attributes['popper'],
-    }), [attributes, popperStyles]);
-    let isPlaceholderShown = Boolean(value.length === 0) && !!placeholder;
-    if (isArray(value)) {
-        isPlaceholderShown = Boolean(value.length === 0) && !!placeholder;
-    }
-    if (isArray(value) && value.length === 1 && value[0] === '') {
-        isPlaceholderShown = !!placeholder;
-    }
-    if (typeof value === 'string') {
-        isPlaceholderShown = value === '' && !!placeholder;
-    }
-    const scrollRef = useRef();
-    const RenderOptionsComponent = RenderOptions;
-    return (_jsxs(ErrorBoundary, Object.assign({ componentName: "BKJSelect", height: "38px", direction: "row", size: "Small", width: width, isStyled: true }, { children: [_jsxs(ButtonWrapper, Object.assign({}, rest, { disabled: disabled, "$isPlaceholderShown": isPlaceholderShown, ref: mergeRefs([ref, buttonRef, setInputElement]), name: name, onClick: handleToggle, value: value, htmlFor: uuid, variant: variant, dropdownVariant: dropdownVariant, width: width, isOpen: isOpen, isError: isError, type: "button" }, { children: [IconComponent && iconProps.iconName && _jsx(BKJSelectIcon, Object.assign({}, iconProps), void 0),
-                    _jsx(HiddenSelectElement, { readOnly: true, multiple: true, id: uuid, name: name, value: value, role: "listbox", required: required, "aria-labelledby": uuid }, void 0),
-                    isPlaceholderShown ? (_jsx(Placeholder, Object.assign({ placeholderColor: placeholderColor }, { children: placeholder }), void 0)) : typeof label === 'undefined' ? (_jsx("span", { children: displayValues.length > 0
-                            ? `${displayValues[0]}${displayValues.length > 1
-                                ? `... +${displayValues.length - 1} ${moreValuesLabel}`
-                                : ''}`
-                            : placeholder }, void 0)) : (_jsx("span", { children: label }, void 0)),
-                    _jsx(BKJSelectEndIcon, { iconProps: iconProps, isOpen: isOpen, value: value, name: name, variant: variant, onChange: onChange }, void 0)] }), void 0),
-            errorMessages[0] &&
-                errorMessages.map((err) => _jsx(BKJSelectErrorMessage, { children: err }, err)),
-            targetElement && isOpen && (_jsx(Portal, Object.assign({ targetElement: targetElement }, { children: _jsx(BKJDropdown, Object.assign({ "$dropdownVariant": dropdownVariant, "$dropdownWidth": dropdownWidth, "$dropdownHeight": dropdownHeight, "$dropdownMinHeight": dropdownMinHeight }, popperProps, { ref: mergeRefs([dropdownRef, setDropdownElement]) }, { children: _jsx(RenderOptionsComponent, { scrollRef: scrollRef, onChange: handleChange, selected: value, options: options, onClose: handleClose, name: name, type: type, dropdownProps: dropdownProps }, void 0) }), void 0) }), void 0))] }), void 0));
-}
-export const BKJSelect = forwardRef(BKJSelectComponent);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ButtonWrapper, DropdownIcon, HiddenSelectElement, Placeholder, BKJSelectIcon, BKJSelectErrorMessage, } from './BKJSelect.styled.js';
+import { v4 as uuidv4 } from 'uuid';
+import { usePopper } from 'react-popper';
+import { getDesignLibraryElementNode } from './utils/getDesignLibraryElementNode.js';
+import { useClickOutside } from '../../hooks/useClickOutside.js';
+import { mergeRefs } from './utils/mergeRefs.js';
+import { BKJDropdown } from '../BKJDropdown/index.js';
+import { isArray } from '../../common.types.js';
+import { ErrorBoundary } from '../ErrorBoundary/index.js';
+import { BKJTheme } from '../../providers/index.js';
+import { Portal } from '../Portal/Portal.js';
+import { BKJIcon } from '../BKJIcon/index.js';
+import { VariantsWithClear } from './BKJSelect.constants.js';
+function BKJSelectEndIcon({ iconProps, isOpen, value, name, variant, onChange, }) {
+    if (variant === 'PurpleTextNoArrow')
+        return null;
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onChange({ target: { value: [], name } });
+    };
+    if (value.length >= 1 && VariantsWithClear.includes(variant)) {
+        return _jsx(BKJIcon, { iconName: "CloseBold", color: "White", onClick: handleClear }, void 0);
+    }
+    return (_jsx(DropdownIcon, Object.assign({}, iconProps, { iconName: "ArrowDown", color: BKJTheme.select[variant].colorScheme.fontColor(isOpen), isOpen: isOpen }), void 0));
+}
+function BKJSelectComponent(props, ref) {
+    const { type = 'Single', label, name, onChange, onClose, value: _value = [], placeholder, required = false, variant = 'GreyOutlined', width = 'auto', disabled, dropdownVariant = 'Square', dropdownPlacement = 'bottom', moreValuesLabel = 'More', dropdownWidth, dropdownHeight, dropdownMinHeight, options, renderOptions: RenderOptions, iconComponent: IconComponent, iconProps = {}, modifiers: _modifiers, error, dropdownProps, placeholderColor, ...rest } = props;
+    const isError = !!error || (Array.isArray(error) && !!error[0]);
+    let errorMessages = [];
+    if (error && typeof error !== 'boolean') {
+        errorMessages = Array.isArray(error) ? [...error] : [error];
+    }
+    if (!Array.isArray(_value))
+        throw new Error("BKJSelect must receive an array for it's value. Even if type is set to Single.");
+    const value = useMemo(() => (Boolean(_value.length) ? _value : []), [_value]);
+    const [displayValues, setDisplayValues] = useState(options.filter((opt) => value.includes(opt.value)).map((opt) => opt.label));
+    const modifiers = useMemo(() => _modifiers || [
+        {
+            name: 'offset',
+            options: {
+                offset: () => {
+                    switch (dropdownVariant) {
+                        case 'SeamlessRounded':
+                            return [0, -2];
+                        case 'Square':
+                            return [0, 4];
+                        default:
+                            return [0, 0];
+                    }
+                },
+            },
+        },
+        {
+            name: 'sameWidth',
+            enabled: !dropdownWidth,
+            phase: 'beforeWrite',
+            requires: ['computeStyles'],
+            fn({ state }) {
+                if (dropdownWidth)
+                    return void 0;
+                state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+                state.styles.popper.maxWidth = `${state.rects.reference.width}px`;
+            },
+            effect({ state }) {
+                if (dropdownWidth)
+                    return void 0;
+                state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
+                state.elements.popper.style.maxWidth = `${state.elements.reference.offsetWidth}px`;
+            },
+        },
+    ], [dropdownVariant, _modifiers]);
+    const uuid = useMemo(() => `${name}_${uuidv4()}`, [name]);
+    const buttonRef = useRef();
+    const dropdownRef = useRef();
+    const [inputElement, setInputElement] = useState();
+    const [dropdownElement, setDropdownElement] = useState();
+    const [targetElement, setTargetElement] = useState(getDesignLibraryElementNode('dropdown-root'));
+    const [isOpen, setOpen] = useState(false);
+    useEffect(() => {
+        if (!targetElement) {
+            const element = document.createElement('div');
+            element.setAttribute('id', 'dropdown-root');
+            document.body.prepend(element);
+            setTargetElement(element);
+        }
+    }, []); // eslint-disable-line
+    const handleChange = useCallback((event) => {
+        switch (type) {
+            case 'Multiple': {
+                let nextValue = [...value];
+                if (Array.isArray(event.target.value)) {
+                    setDisplayValues(event.target.label);
+                    onChange({
+                        ...event,
+                        target: { ...event.target, value: [...new Set(event.target.value)] },
+                    });
+                    return;
+                }
+                if (nextValue.includes(event.target.value)) {
+                    nextValue = nextValue.filter((str) => str !== event.target.value);
+                    setDisplayValues(displayValues.filter((str) => str !== event.target.label));
+                }
+                else {
+                    nextValue = nextValue.concat(event.target.value);
+                    const nextDisplayValues = displayValues.concat(event.target.label);
+                    setDisplayValues([...new Set(nextDisplayValues)]);
+                }
+                onChange({ ...event, target: { ...event.target, value: [...new Set(nextValue)] } });
+                break;
+            }
+            case 'Single': {
+                onChange({ ...event, target: { ...event.target, value: [event.target.value] } });
+                setDisplayValues([event.target.label]);
+                setOpen(false);
+                break;
+            }
+        }
+    }, [displayValues, onChange, type, value]);
+    const handleToggle = useCallback(() => {
+        setOpen(!isOpen);
+    }, [isOpen]);
+    const handleClose = useCallback((event) => {
+        if (buttonRef?.current && !buttonRef?.current.contains(event.target)) {
+            if (dropdownRef?.current && !dropdownRef?.current.contains(event.target)) {
+                setOpen(false);
+                onClose && onClose(event);
+            }
+        }
+    }, [onClose]);
+    const { styles, attributes } = usePopper(inputElement, dropdownElement, {
+        modifiers,
+        placement: dropdownPlacement,
+    });
+    const popperStyles = useMemo(() => ({
+        ...styles['popper'],
+        maxHeight: 'auto',
+        height: 'auto',
+        minHeight: 'auto',
+    }), [styles]);
+    useClickOutside([buttonRef && buttonRef.current, dropdownRef && dropdownRef.current, dropdownElement], handleClose);
+    const popperProps = useMemo(() => ({
+        style: popperStyles,
+        ...attributes['popper'],
+    }), [attributes, popperStyles]);
+    let isPlaceholderShown = Boolean(value.length === 0) && !!placeholder;
+    if (isArray(value)) {
+        isPlaceholderShown = Boolean(value.length === 0) && !!placeholder;
+    }
+    if (isArray(value) && value.length === 1 && value[0] === '') {
+        isPlaceholderShown = !!placeholder;
+    }
+    if (typeof value === 'string') {
+        isPlaceholderShown = value === '' && !!placeholder;
+    }
+    const scrollRef = useRef();
+    const RenderOptionsComponent = RenderOptions;
+    return (_jsxs(ErrorBoundary, Object.assign({ componentName: "BKJSelect", height: "38px", direction: "row", size: "Small", width: width, isStyled: true }, { children: [_jsxs(ButtonWrapper, Object.assign({}, rest, { disabled: disabled, "$isPlaceholderShown": isPlaceholderShown, ref: mergeRefs([ref, buttonRef, setInputElement]), name: name, onClick: handleToggle, value: value, htmlFor: uuid, variant: variant, dropdownVariant: dropdownVariant, width: width, isOpen: isOpen, isError: isError, type: "button" }, { children: [IconComponent && iconProps.iconName && _jsx(BKJSelectIcon, Object.assign({}, iconProps), void 0),
+                    _jsx(HiddenSelectElement, { readOnly: true, multiple: true, id: uuid, name: name, value: value, role: "listbox", required: required, "aria-labelledby": uuid }, void 0),
+                    isPlaceholderShown ? (_jsx(Placeholder, Object.assign({ placeholderColor: placeholderColor }, { children: placeholder }), void 0)) : typeof label === 'undefined' ? (_jsx("span", { children: displayValues.length > 0
+                            ? `${displayValues[0]}${displayValues.length > 1
+                                ? `... +${displayValues.length - 1} ${moreValuesLabel}`
+                                : ''}`
+                            : placeholder }, void 0)) : (_jsx("span", { children: label }, void 0)),
+                    _jsx(BKJSelectEndIcon, { iconProps: iconProps, isOpen: isOpen, value: value, name: name, variant: variant, onChange: onChange }, void 0)] }), void 0),
+            errorMessages[0] &&
+                errorMessages.map((err) => _jsx(BKJSelectErrorMessage, { children: err }, err)),
+            targetElement && isOpen && (_jsx(Portal, Object.assign({ targetElement: targetElement }, { children: _jsx(BKJDropdown, Object.assign({ "$dropdownVariant": dropdownVariant, "$dropdownWidth": dropdownWidth, "$dropdownHeight": dropdownHeight, "$dropdownMinHeight": dropdownMinHeight }, popperProps, { ref: mergeRefs([dropdownRef, setDropdownElement]) }, { children: _jsx(RenderOptionsComponent, { scrollRef: scrollRef, onChange: handleChange, selected: value, options: options, onClose: handleClose, name: name, type: type, dropdownProps: dropdownProps }, void 0) }), void 0) }), void 0))] }), void 0));
+}
+export const BKJSelect = forwardRef(BKJSelectComponent);
 //# sourceMappingURL=BKJSelect.js.map

package/lib/components/BKJSelect/BKJSelect.stories.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { Story } from '@storybook/react';
-declare const setup: {
-    title: string;
-    component: <Type>(props: import("./BKJSelect.types.js").IBKJSelectProps<Type> & {
-        ref?: import("react").ForwardedRef<HTMLElement> | undefined;
-    }) => JSX.Element;
-};
-export declare const Default: Story<{}>;
-export default setup;
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+declare const setup: {
+    title: string;
+    component: <Type>(props: import("./BKJSelect.types.js").IBKJSelectProps<Type> & {
+        ref?: import("react").ForwardedRef<HTMLElement> | undefined;
+    }) => JSX.Element;
+};
+export declare const Default: Story<{}>;
+export default setup;
 //# sourceMappingURL=BKJSelect.stories.d.ts.map

package/lib/components/BKJSelect/BKJSelect.stories.js

@@ -1,126 +1,126 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useState } from 'react';
-import { BKJIcon } from '../BKJIcon/index.js';
-import { BKJListItem } from '../BKJListItem/index.js';
-import { BKJSelectSearch, BKJSelectSearchControls } from '../BKJSelectSearch/index.js';
-import { BKJSelect } from './BKJSelect.js';
-const setup = {
-    title: 'Input Elements/BKJSelect',
-    component: BKJSelect,
-};
-const options = [
-    { key: 'casual', value: 'casual', label: 'Casual' },
-    { key: 'full_time', value: 'full_time', label: 'Full Time' },
-    { key: 'not_sure', value: 'not_sure', label: 'Not Sure' },
-    { key: 'part_time', value: 'part_time', label: 'Part Time' },
-    { key: 'reg_part_time', value: 'reg_part_time', label: 'Reg Part Time' },
-    { key: 'terminated', value: 'terminated', label: 'Terminated' },
-    { key: 'terminatee', value: 'terminatee', label: 'Terminated' },
-    { key: 'terminatef', value: 'terminatef', label: 'Terminated' },
-    { key: 'terminateg', value: 'terminateg', label: 'Terminated' },
-    { key: 'terminateh', value: 'terminateh', label: 'Terminated' },
-    { key: 'terminatei', value: 'terminatei', label: 'Terminated' },
-    { key: 'terminatej', value: 'terminatej', label: 'Terminated' },
-    { key: 'terminatek', value: 'terminatek', label: 'Terminated' },
-    { key: 'terminatel', value: 'terminatel', label: 'Terminated' },
-    { key: 'terminatem', value: 'terminatem', label: 'Terminated' },
-    { key: 'terminaten', value: 'terminaten', label: 'Terminated' },
-    { key: 'terminateo', value: 'terminateo', label: 'Terminated' },
-    { key: 'terminatep', value: 'terminatep', label: 'Terminated' },
-    { key: 'terminateq', value: 'terminateq', label: 'Terminated' },
-    { key: 'terminater', value: 'terminater', label: 'Terminated' },
-    { key: 'terminates', value: 'terminates', label: 'Terminated' },
-    { key: 'terminatet', value: 'terminatet', label: 'Terminated' },
-    { key: 'terminateu', value: 'terminateu', label: 'Terminated' },
-    { key: 'terminatev', value: 'terminatev', label: 'Terminated' },
-    { key: 'terminatew', value: 'terminatew', label: 'Terminated' },
-    { key: 'terminatex', value: 'terminatex', label: 'Terminated' },
-    { key: 'terminatey', value: 'terminatey', label: 'Terminated' },
-    { key: 'terminatez', value: 'terminatez', label: 'Terminated' },
-    { key: 'terminatfa', value: 'terminatfa', label: 'Terminated' },
-    { key: 'terminatfb', value: 'terminatfb', label: 'Terminated' },
-    { key: 'terminatfc', value: 'terminatfc', label: 'Terminated' },
-    { key: 'terminatfd', value: 'terminatfd', label: 'Terminated' },
-    { key: 'terminatfe', value: 'terminatfe', label: 'Terminated' },
-    { key: 'terminatff', value: 'terminatff', label: 'Terminated' },
-    { key: 'terminatfg', value: 'terminatfg', label: 'Terminated' },
-    { key: 'terminatfh', value: 'terminatfh', label: 'Terminated' },
-    { key: 'terminatfi', value: 'terminatfi', label: 'Terminated' },
-    { key: 'terminatfj', value: 'terminatfj', label: 'Terminated' },
-    { key: 'terminatfk', value: 'terminatfk', label: 'Terminated' },
-    { key: 'terminatfl', value: 'terminatfl', label: 'Terminated' },
-    { key: 'terminatfm', value: 'terminatfm', label: 'Terminated' },
-    { key: 'terminatfn', value: 'terminatfn', label: 'Terminated' },
-    { key: 'terminatfo', value: 'terminatfo', label: 'Terminated' },
-    { key: 'terminatfp', value: 'terminatfp', label: 'Terminated' },
-    { key: 'terminatfq', value: 'terminatfq', label: 'Terminated' },
-    { key: 'terminatfr', value: 'terminatfr', label: 'Terminated' },
-    { key: 'terminatfs', value: 'terminatfs', label: 'Terminated' },
-    { key: 'terminatft', value: 'terminatft', label: 'Terminated' },
-    { key: 'terminatfu', value: 'terminatfu', label: 'Terminated' },
-    { key: 'terminatfv', value: 'terminatfv', label: 'Terminated' },
-    { key: 'terminatfw', value: 'terminatfw', label: 'Terminated' },
-    { key: 'terminatfx', value: 'terminatfx', label: 'Terminated' },
-    { key: 'terminatfy', value: 'terminatfy', label: 'Terminated' },
-    { key: 'terminatfz', value: 'terminatfz', label: 'Terminated' },
-    { key: 'terminatga', value: 'terminatga', label: 'Terminated' },
-    { key: 'terminatgb', value: 'terminatgb', label: 'Terminated' },
-    { key: 'terminatgc', value: 'terminatgc', label: 'Terminated' },
-    { key: 'terminatgd', value: 'terminatgd', label: 'Terminated' },
-    { key: 'terminatge', value: 'terminatge', label: 'Terminated' },
-    { key: 'terminatgf', value: 'terminatgf', label: 'Terminated' },
-];
-const someRandomDropdownProps = {
-    omg: true,
-    nest: {
-        anuddaOne: 'lmfao',
-        whoa: {
-            lol: {
-                noway: {
-                    fn: () => { },
-                },
-            },
-        },
-    },
-};
-function Test(props) {
-    const [value, setValue] = useState({ byName: '' });
-    const isAllSelected = props.selected.length === props.options.length;
-    return (_jsxs(Fragment, { children: [_jsx(BKJSelectSearch, { value: value.byName, name: "byName", onChange: (e) => setValue({ ...value, [e.target.name]: e.target.value }), placeholder: "Search" }, void 0),
-            _jsx(BKJSelectSearchControls, { numSelected: props.selected.length, isAllSelected: isAllSelected, onSelectAll: () => {
-                    isAllSelected
-                        ? props.onChange({
-                            target: {
-                                name: 'employmentStatus',
-                                label: [],
-                                value: [],
-                            },
-                        })
-                        : props.onChange({
-                            target: {
-                                name: 'employmentStatus',
-                                label: options.map(({ label }) => label),
-                                value: options.map(({ value }) => value),
-                            },
-                        });
-                } }, void 0),
-            props.options.map((val) => (_jsx(BKJListItem, Object.assign({}, props, val, { type: "Standard" }), void 0)))] }, void 0));
-}
-const Template = () => {
-    const [values, setValues] = useState({ employmentStatus: [] });
-    const handleChange = useCallback((event) => {
-        setValues({ ...values, [event.target.name]: event.target.value });
-    }, [values]);
-    return (_jsx(Fragment, { children: _jsx(BKJSelect, { type: "Multiple", variant: "GreyOutlinedPill", placeholder: "Location", 
-            // disabled
-            // label="Location"
-            width: "300px", dropdownProps: someRandomDropdownProps, name: "employmentStatus", dropdownWidth: "400px", dropdownPlacement: "bottom-start", onChange: handleChange, value: values.employmentStatus, options: options, renderOptions: Test, iconComponent: BKJIcon, 
-            // placeholderColor="Grey6"
-            css: "padding-left: 12px;", iconProps: {
-                iconName: 'ShiftsTime',
-            } }, void 0) }, void 0));
-};
-export const Default = Template.bind({});
-Default.args = {};
-export default setup;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useState } from 'react';
+import { BKJIcon } from '../BKJIcon/index.js';
+import { BKJListItem } from '../BKJListItem/index.js';
+import { BKJSelectSearch, BKJSelectSearchControls } from '../BKJSelectSearch/index.js';
+import { BKJSelect } from './BKJSelect.js';
+const setup = {
+    title: 'Input Elements/BKJSelect',
+    component: BKJSelect,
+};
+const options = [
+    { key: 'casual', value: 'casual', label: 'Casual' },
+    { key: 'full_time', value: 'full_time', label: 'Full Time' },
+    { key: 'not_sure', value: 'not_sure', label: 'Not Sure' },
+    { key: 'part_time', value: 'part_time', label: 'Part Time' },
+    { key: 'reg_part_time', value: 'reg_part_time', label: 'Reg Part Time' },
+    { key: 'terminated', value: 'terminated', label: 'Terminated' },
+    { key: 'terminatee', value: 'terminatee', label: 'Terminated' },
+    { key: 'terminatef', value: 'terminatef', label: 'Terminated' },
+    { key: 'terminateg', value: 'terminateg', label: 'Terminated' },
+    { key: 'terminateh', value: 'terminateh', label: 'Terminated' },
+    { key: 'terminatei', value: 'terminatei', label: 'Terminated' },
+    { key: 'terminatej', value: 'terminatej', label: 'Terminated' },
+    { key: 'terminatek', value: 'terminatek', label: 'Terminated' },
+    { key: 'terminatel', value: 'terminatel', label: 'Terminated' },
+    { key: 'terminatem', value: 'terminatem', label: 'Terminated' },
+    { key: 'terminaten', value: 'terminaten', label: 'Terminated' },
+    { key: 'terminateo', value: 'terminateo', label: 'Terminated' },
+    { key: 'terminatep', value: 'terminatep', label: 'Terminated' },
+    { key: 'terminateq', value: 'terminateq', label: 'Terminated' },
+    { key: 'terminater', value: 'terminater', label: 'Terminated' },
+    { key: 'terminates', value: 'terminates', label: 'Terminated' },
+    { key: 'terminatet', value: 'terminatet', label: 'Terminated' },
+    { key: 'terminateu', value: 'terminateu', label: 'Terminated' },
+    { key: 'terminatev', value: 'terminatev', label: 'Terminated' },
+    { key: 'terminatew', value: 'terminatew', label: 'Terminated' },
+    { key: 'terminatex', value: 'terminatex', label: 'Terminated' },
+    { key: 'terminatey', value: 'terminatey', label: 'Terminated' },
+    { key: 'terminatez', value: 'terminatez', label: 'Terminated' },
+    { key: 'terminatfa', value: 'terminatfa', label: 'Terminated' },
+    { key: 'terminatfb', value: 'terminatfb', label: 'Terminated' },
+    { key: 'terminatfc', value: 'terminatfc', label: 'Terminated' },
+    { key: 'terminatfd', value: 'terminatfd', label: 'Terminated' },
+    { key: 'terminatfe', value: 'terminatfe', label: 'Terminated' },
+    { key: 'terminatff', value: 'terminatff', label: 'Terminated' },
+    { key: 'terminatfg', value: 'terminatfg', label: 'Terminated' },
+    { key: 'terminatfh', value: 'terminatfh', label: 'Terminated' },
+    { key: 'terminatfi', value: 'terminatfi', label: 'Terminated' },
+    { key: 'terminatfj', value: 'terminatfj', label: 'Terminated' },
+    { key: 'terminatfk', value: 'terminatfk', label: 'Terminated' },
+    { key: 'terminatfl', value: 'terminatfl', label: 'Terminated' },
+    { key: 'terminatfm', value: 'terminatfm', label: 'Terminated' },
+    { key: 'terminatfn', value: 'terminatfn', label: 'Terminated' },
+    { key: 'terminatfo', value: 'terminatfo', label: 'Terminated' },
+    { key: 'terminatfp', value: 'terminatfp', label: 'Terminated' },
+    { key: 'terminatfq', value: 'terminatfq', label: 'Terminated' },
+    { key: 'terminatfr', value: 'terminatfr', label: 'Terminated' },
+    { key: 'terminatfs', value: 'terminatfs', label: 'Terminated' },
+    { key: 'terminatft', value: 'terminatft', label: 'Terminated' },
+    { key: 'terminatfu', value: 'terminatfu', label: 'Terminated' },
+    { key: 'terminatfv', value: 'terminatfv', label: 'Terminated' },
+    { key: 'terminatfw', value: 'terminatfw', label: 'Terminated' },
+    { key: 'terminatfx', value: 'terminatfx', label: 'Terminated' },
+    { key: 'terminatfy', value: 'terminatfy', label: 'Terminated' },
+    { key: 'terminatfz', value: 'terminatfz', label: 'Terminated' },
+    { key: 'terminatga', value: 'terminatga', label: 'Terminated' },
+    { key: 'terminatgb', value: 'terminatgb', label: 'Terminated' },
+    { key: 'terminatgc', value: 'terminatgc', label: 'Terminated' },
+    { key: 'terminatgd', value: 'terminatgd', label: 'Terminated' },
+    { key: 'terminatge', value: 'terminatge', label: 'Terminated' },
+    { key: 'terminatgf', value: 'terminatgf', label: 'Terminated' },
+];
+const someRandomDropdownProps = {
+    omg: true,
+    nest: {
+        anuddaOne: 'lmfao',
+        whoa: {
+            lol: {
+                noway: {
+                    fn: () => { },
+                },
+            },
+        },
+    },
+};
+function Test(props) {
+    const [value, setValue] = useState({ byName: '' });
+    const isAllSelected = props.selected.length === props.options.length;
+    return (_jsxs(Fragment, { children: [_jsx(BKJSelectSearch, { value: value.byName, name: "byName", onChange: (e) => setValue({ ...value, [e.target.name]: e.target.value }), placeholder: "Search" }, void 0),
+            _jsx(BKJSelectSearchControls, { numSelected: props.selected.length, isAllSelected: isAllSelected, onSelectAll: () => {
+                    isAllSelected
+                        ? props.onChange({
+                            target: {
+                                name: 'employmentStatus',
+                                label: [],
+                                value: [],
+                            },
+                        })
+                        : props.onChange({
+                            target: {
+                                name: 'employmentStatus',
+                                label: options.map(({ label }) => label),
+                                value: options.map(({ value }) => value),
+                            },
+                        });
+                } }, void 0),
+            props.options.map((val) => (_jsx(BKJListItem, Object.assign({}, props, val, { type: "Standard" }), void 0)))] }, void 0));
+}
+const Template = () => {
+    const [values, setValues] = useState({ employmentStatus: [] });
+    const handleChange = useCallback((event) => {
+        setValues({ ...values, [event.target.name]: event.target.value });
+    }, [values]);
+    return (_jsx(Fragment, { children: _jsx(BKJSelect, { type: "Multiple", variant: "GreyOutlinedPill", placeholder: "Location", 
+            // disabled
+            // label="Location"
+            width: "300px", dropdownProps: someRandomDropdownProps, name: "employmentStatus", dropdownWidth: "400px", dropdownPlacement: "bottom-start", onChange: handleChange, value: values.employmentStatus, options: options, renderOptions: Test, iconComponent: BKJIcon, 
+            // placeholderColor="Grey6"
+            css: "padding-left: 12px;", iconProps: {
+                iconName: 'ShiftsTime',
+            } }, void 0) }, void 0));
+};
+export const Default = Template.bind({});
+Default.args = {};
+export default setup;
 //# sourceMappingURL=BKJSelect.stories.js.map