@bookjane2/bookjane-design-library 7.3.3 → 7.3.5

package/lib/components/BKJPillSelect/BKJPillSelect.context.js

@@ -1,75 +1,75 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-const BKJPillSelectContext = createContext(null);
-export const BKJPillSelectProvider = ({ children, value = [], onChange, name, max, }) => {
-    const wrapperRef = useRef(null);
-    const inputRef = useRef(null);
-    const mouseDownTargetRef = useRef(null);
-    const [uuid] = useState(uuidv4());
-    const [inputValue, setInputValue] = useState('');
-    const [isFocused, setFocus] = useState(false);
-    const onInputFocused = useCallback((event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        inputRef.current?.focus();
-        setFocus(true);
-        inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        return void 0;
-    }, []);
-    const setNextValue = useCallback((nextValue) => {
-        if (nextValue) {
-            onChange({ target: { name, value: nextValue } });
-            setInputValue('');
-        }
-        return void 0;
-    }, [name, onChange]);
-    const onInputChange = useCallback((e) => {
-        setNextValue(e.target.value);
-        setFocus(false);
-    }, [setNextValue]);
-    const onChipRemove = useCallback((__VALUE__) => {
-        return (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            const index = value.indexOf(__VALUE__);
-            const nextValue = Array.from(value);
-            nextValue.splice(index, 1);
-            onChange({ target: { name, value: nextValue } });
-        };
-    }, [name, onChange, value]);
-    const onInputBlur = useCallback((event) => {
-        const containsTarget = event.currentTarget.contains(mouseDownTargetRef.current);
-        if (containsTarget)
-            event.stopPropagation();
-        if (isFocused) {
-            event.preventDefault();
-            event.stopPropagation();
-            setFocus(false);
-        }
-    }, [isFocused]);
-    const isMaxLimitReached = useMemo(() => {
-        return value.length > max;
-    }, [max, value.length]);
-    const onIsOpenChange = useCallback(({ isOpen }) => {
-        if (!isOpen)
-            setFocus(false);
-    }, []);
-    return (_jsx(BKJPillSelectContext.Provider, Object.assign({ value: {
-            wrapperRef,
-            inputRef,
-            value,
-            inputValue,
-            onInputFocused,
-            onInputChange,
-            onInputBlur,
-            onChipRemove,
-            isFocused,
-            setInputValue,
-            uuid,
-            isMaxLimitReached,
-            onIsOpenChange,
-        } }, { children: children }), void 0));
-};
-export const useBKJPillSelectContext = () => useContext(BKJPillSelectContext);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+const BKJPillSelectContext = createContext(null);
+export const BKJPillSelectProvider = ({ children, value = [], onChange, name, max, }) => {
+    const wrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const mouseDownTargetRef = useRef(null);
+    const [uuid] = useState(uuidv4());
+    const [inputValue, setInputValue] = useState('');
+    const [isFocused, setFocus] = useState(false);
+    const onInputFocused = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        inputRef.current?.focus();
+        setFocus(true);
+        inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        return void 0;
+    }, []);
+    const setNextValue = useCallback((nextValue) => {
+        if (nextValue) {
+            onChange({ target: { name, value: nextValue } });
+            setInputValue('');
+        }
+        return void 0;
+    }, [name, onChange]);
+    const onInputChange = useCallback((e) => {
+        setNextValue(e.target.value);
+        setFocus(false);
+    }, [setNextValue]);
+    const onChipRemove = useCallback((__VALUE__) => {
+        return (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const index = value.indexOf(__VALUE__);
+            const nextValue = Array.from(value);
+            nextValue.splice(index, 1);
+            onChange({ target: { name, value: nextValue } });
+        };
+    }, [name, onChange, value]);
+    const onInputBlur = useCallback((event) => {
+        const containsTarget = event.currentTarget.contains(mouseDownTargetRef.current);
+        if (containsTarget)
+            event.stopPropagation();
+        if (isFocused) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocus(false);
+        }
+    }, [isFocused]);
+    const isMaxLimitReached = useMemo(() => {
+        return value.length > max;
+    }, [max, value.length]);
+    const onIsOpenChange = useCallback(({ isOpen }) => {
+        if (!isOpen)
+            setFocus(false);
+    }, []);
+    return (_jsx(BKJPillSelectContext.Provider, Object.assign({ value: {
+            wrapperRef,
+            inputRef,
+            value,
+            inputValue,
+            onInputFocused,
+            onInputChange,
+            onInputBlur,
+            onChipRemove,
+            isFocused,
+            setInputValue,
+            uuid,
+            isMaxLimitReached,
+            onIsOpenChange,
+        } }, { children: children }), void 0));
+};
+export const useBKJPillSelectContext = () => useContext(BKJPillSelectContext);
 //# sourceMappingURL=BKJPillSelect.context.js.map

package/lib/components/BKJPillSelect/BKJPillSelect.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { IBKJPillSelect } from './BKJPillSelect.types.js';
-export declare const BKJPillSelect: FC<IBKJPillSelect>;
+import { FC } from 'react';
+import { IBKJPillSelect } from './BKJPillSelect.types.js';
+export declare const BKJPillSelect: FC<IBKJPillSelect>;
 //# sourceMappingURL=BKJPillSelect.d.ts.map

package/lib/components/BKJPillSelect/BKJPillSelect.js

@@ -1,36 +1,36 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef } from 'react';
-import { BKJChip } from '../index.js';
-import { BKJTextInputErrorMessage } from '../BKJTextInput/BKJTextInput.styled.js';
-import { Flex } from '../Flex/index.js';
-import { BKJPillSelectProvider, useBKJPillSelectContext } from './BKJPillSelect.context.js';
-import { BKJPillSelectComboBox, BKJPillSelectWrapper, InputLabel, InputMessage, RequiredAsterisk, TextAreaWrapper, } from './BKJPillSelect.styled.js';
-const InputComponent = forwardRef(({ onInputChange, value, isFocused, onIsOpenChange, options = [], ...rest }, ref) => {
-    return (_jsx(BKJPillSelectComboBox, Object.assign({}, rest, { overrides: ['HIDE_VALUE_LABEL'], ref: ref, action: "OpenToggle", name: "BKJPillSelect_InputValue", options: options, 
-        // onBlur={onBlur}
-        type: "Multiple", onIsOpenChange: onIsOpenChange, onChange: onInputChange, value: value, hasValue: value.length > 0, isFocused: isFocused }), void 0));
-});
-const BKJPillSelectComponent = (props) => {
-    const { value, label, required, disabled, description, name, placeholder, error, max, options, ...rest } = props;
-    const { wrapperRef, inputRef, uuid, onChipRemove, onInputFocused, onInputChange, onInputBlur, isMaxLimitReached, onIsOpenChange, isFocused, } = useBKJPillSelectContext();
-    return (_jsxs(BKJPillSelectWrapper, { children: [label && (_jsxs(InputLabel, Object.assign({ disabled: disabled }, { children: [label, required && _jsx(RequiredAsterisk, { children: "\u00A0*" }, void 0)] }), void 0)),
-            value.length !== 0 && (_createElement(TextAreaWrapper, Object.assign({}, rest, { key: `BKJPillSelect_${uuid}`, id: `BKJPillSelect_${uuid}_TextAreaWrapper`, ref: wrapperRef, error: !!error || isMaxLimitReached, disabled: disabled, onMouseDown: onInputFocused, hasValue: value.length > 0, isFocused: isFocused }),
-                _jsx(Flex, Object.assign({ flexWrap: "wrap", gap: "4px", padding: value.length > 0 ? '8px 8px 0' : '8px 8px' }, { children: value.map((strValue) => {
-                        const MATCHED = options.find(({ value }) => value === strValue);
-                        if (!MATCHED)
-                            return _jsx(Fragment, {}, void 0);
-                        return (_jsx(BKJChip, Object.assign({ onClose: onChipRemove(MATCHED.value), variant: "Purple" }, { children: MATCHED.label }), MATCHED.value));
-                    }) }), void 0))),
-            value.length === 0 ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange }, void 0)) : isFocused ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange }, void 0)) : (_jsx(Fragment, {}, void 0)),
-            description && _jsx(InputMessage, { children: description }, void 0),
-            _jsx(InputMessage, Object.assign({ isMaxLimitReached: isMaxLimitReached }, { children: isMaxLimitReached
-                    ? `You've reached the max of ${max} options (${value.length}/${max})`
-                    : `${value.length}/${max}` }), void 0),
-            error && (_jsx(Fragment, { children: error && Array.isArray(error) ? (error.length &&
-                    error.map((err) => _jsx(BKJTextInputErrorMessage, { children: err }, err))) : (_jsx(BKJTextInputErrorMessage, { children: error }, void 0)) }, void 0))] }, void 0));
-};
-export const BKJPillSelect = ({ value = [], onChange, name, validations, max = 10, ...rest }) => {
-    return (_jsx(BKJPillSelectProvider, Object.assign({ value: value, onChange: onChange, name: name, validations: validations, max: max }, { children: _jsx(BKJPillSelectComponent, Object.assign({ name: name, value: value, max: max }, rest), void 0) }), void 0));
-};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef } from 'react';
+import { BKJChip } from '../index.js';
+import { BKJTextInputErrorMessage } from '../BKJTextInput/BKJTextInput.styled.js';
+import { Flex } from '../Flex/index.js';
+import { BKJPillSelectProvider, useBKJPillSelectContext } from './BKJPillSelect.context.js';
+import { BKJPillSelectComboBox, BKJPillSelectWrapper, InputLabel, InputMessage, RequiredAsterisk, TextAreaWrapper, } from './BKJPillSelect.styled.js';
+const InputComponent = forwardRef(({ onInputChange, value, isFocused, onIsOpenChange, options = [], ...rest }, ref) => {
+    return (_jsx(BKJPillSelectComboBox, Object.assign({}, rest, { overrides: ['HIDE_VALUE_LABEL'], ref: ref, action: "OpenToggle", name: "BKJPillSelect_InputValue", options: options, 
+        // onBlur={onBlur}
+        type: "Multiple", onIsOpenChange: onIsOpenChange, onChange: onInputChange, value: value, hasValue: value.length > 0, isFocused: isFocused }), void 0));
+});
+const BKJPillSelectComponent = (props) => {
+    const { value, label, required, disabled, description, name, placeholder, error, max, options, ...rest } = props;
+    const { wrapperRef, inputRef, uuid, onChipRemove, onInputFocused, onInputChange, onInputBlur, isMaxLimitReached, onIsOpenChange, isFocused, } = useBKJPillSelectContext();
+    return (_jsxs(BKJPillSelectWrapper, { children: [label && (_jsxs(InputLabel, Object.assign({ disabled: disabled }, { children: [label, required && _jsx(RequiredAsterisk, { children: "\u00A0*" }, void 0)] }), void 0)),
+            value.length !== 0 && (_createElement(TextAreaWrapper, Object.assign({}, rest, { key: `BKJPillSelect_${uuid}`, id: `BKJPillSelect_${uuid}_TextAreaWrapper`, ref: wrapperRef, error: !!error || isMaxLimitReached, disabled: disabled, onMouseDown: onInputFocused, hasValue: value.length > 0, isFocused: isFocused }),
+                _jsx(Flex, Object.assign({ flexWrap: "wrap", gap: "4px", padding: value.length > 0 ? '8px 8px 0' : '8px 8px' }, { children: value.map((strValue) => {
+                        const MATCHED = options.find(({ value }) => value === strValue);
+                        if (!MATCHED)
+                            return _jsx(Fragment, {}, void 0);
+                        return (_jsx(BKJChip, Object.assign({ onClose: onChipRemove(MATCHED.value), variant: "Purple" }, { children: MATCHED.label }), MATCHED.value));
+                    }) }), void 0))),
+            value.length === 0 ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange }, void 0)) : isFocused ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange }, void 0)) : (_jsx(Fragment, {}, void 0)),
+            description && _jsx(InputMessage, { children: description }, void 0),
+            _jsx(InputMessage, Object.assign({ isMaxLimitReached: isMaxLimitReached }, { children: isMaxLimitReached
+                    ? `You've reached the max of ${max} options (${value.length}/${max})`
+                    : `${value.length}/${max}` }), void 0),
+            error && (_jsx(Fragment, { children: error && Array.isArray(error) ? (error.length &&
+                    error.map((err) => _jsx(BKJTextInputErrorMessage, { children: err }, err))) : (_jsx(BKJTextInputErrorMessage, { children: error }, void 0)) }, void 0))] }, void 0));
+};
+export const BKJPillSelect = ({ value = [], onChange, name, validations, max = 10, ...rest }) => {
+    return (_jsx(BKJPillSelectProvider, Object.assign({ value: value, onChange: onChange, name: name, validations: validations, max: max }, { children: _jsx(BKJPillSelectComponent, Object.assign({ name: name, value: value, max: max }, rest), void 0) }), void 0));
+};
 //# sourceMappingURL=BKJPillSelect.js.map

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

@@ -1,36 +1,36 @@
-/// <reference types="react" />
-import { IBKJPillSelect } from './BKJPillSelect.types.js';
-import { Story } from '@storybook/react';
-declare const setup: {
-    title: string;
-    component: import("react").FC<IBKJPillSelect>;
-    argTypes: {
-        label: {
-            name: string;
-        };
-        error: {
-            name: string;
-            control: {
-                type: string;
-            };
-        };
-        height: {
-            name: string;
-        };
-        required: {
-            name: string;
-        };
-        placeholder: {
-            name: string;
-        };
-        disabled: {
-            name: string;
-        };
-        value: {
-            name: string;
-        };
-    };
-};
-export declare const Default: Story<IBKJPillSelect>;
-export default setup;
+/// <reference types="react" />
+import { IBKJPillSelect } from './BKJPillSelect.types.js';
+import { Story } from '@storybook/react';
+declare const setup: {
+    title: string;
+    component: import("react").FC<IBKJPillSelect>;
+    argTypes: {
+        label: {
+            name: string;
+        };
+        error: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        height: {
+            name: string;
+        };
+        required: {
+            name: string;
+        };
+        placeholder: {
+            name: string;
+        };
+        disabled: {
+            name: string;
+        };
+        value: {
+            name: string;
+        };
+    };
+};
+export declare const Default: Story<IBKJPillSelect>;
+export default setup;
 //# sourceMappingURL=BKJPillSelect.stories.d.ts.map

package/lib/components/BKJPillSelect/BKJPillSelect.stories.js

@@ -1,77 +1,77 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BKJPillSelect } from './BKJPillSelect.js';
-import { useFormBehaviors } from '../../hooks/index.js';
-import uniq from 'lodash/uniq';
-import filter from 'lodash/filter';
-import includes from 'lodash/includes';
-const setup = {
-    title: 'Input Elements/BKJPillSelect',
-    component: BKJPillSelect,
-    argTypes: {
-        label: {
-            name: 'Label Text',
-        },
-        error: {
-            name: 'Error Message',
-            control: {
-                type: 'text',
-            },
-        },
-        height: {
-            name: 'Height',
-        },
-        required: {
-            name: 'Required Field',
-        },
-        placeholder: {
-            name: 'Placeholder',
-        },
-        disabled: {
-            name: 'Disabled',
-        },
-        value: {
-            name: 'Array Items',
-        },
-    },
-};
-const initialState = {
-    data: ['1'],
-};
-// const initialState = {
-//   data: [...Array(201)].map((_, i) => {
-//     return `Field ${i + 1}`;
-//   }) as string[],
-// };
-function VALIDATION_unique(data) {
-    let errs = [];
-    const hasDuplicates = uniq(data).length !== data.length;
-    const duplicates = uniq(filter(data, (val, i, iteratee) => includes(iteratee, val, i + 1)));
-    if (data.length === 0)
-        errs.push('At least 1 option is required');
-    if (hasDuplicates)
-        [`Remove duplicate values`, ...duplicates.map((str) => `\t• ${str}`)].forEach((item) => errs.push(item));
-    if (errs.length)
-        return errs;
-    return '';
-}
-const opts = [...Array(300)].map((_, i) => {
-    return { id: String(i + 1), label: `Item Number #${i + 1}`, value: String(i + 1) };
-});
-const Template = (props) => {
-    const { values: { data }, onChange, fieldErrors, } = useFormBehaviors({
-        initialState,
-        onSubmit: console.log,
-        validations: {
-            data: VALIDATION_unique,
-        },
-    });
-    return (_jsx(BKJPillSelect, Object.assign({}, props, { options: opts, max: 200, onChange: onChange, name: "data", value: data, error: fieldErrors['data'] }), void 0));
-};
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Industries',
-    required: true,
-    placeholder: "Type or paste a list of dropdown values, so that there's one value per line.",
-};
-export default setup;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BKJPillSelect } from './BKJPillSelect.js';
+import { useFormBehaviors } from '../../hooks/index.js';
+import uniq from 'lodash/uniq';
+import filter from 'lodash/filter';
+import includes from 'lodash/includes';
+const setup = {
+    title: 'Input Elements/BKJPillSelect',
+    component: BKJPillSelect,
+    argTypes: {
+        label: {
+            name: 'Label Text',
+        },
+        error: {
+            name: 'Error Message',
+            control: {
+                type: 'text',
+            },
+        },
+        height: {
+            name: 'Height',
+        },
+        required: {
+            name: 'Required Field',
+        },
+        placeholder: {
+            name: 'Placeholder',
+        },
+        disabled: {
+            name: 'Disabled',
+        },
+        value: {
+            name: 'Array Items',
+        },
+    },
+};
+const initialState = {
+    data: ['1'],
+};
+// const initialState = {
+//   data: [...Array(201)].map((_, i) => {
+//     return `Field ${i + 1}`;
+//   }) as string[],
+// };
+function VALIDATION_unique(data) {
+    let errs = [];
+    const hasDuplicates = uniq(data).length !== data.length;
+    const duplicates = uniq(filter(data, (val, i, iteratee) => includes(iteratee, val, i + 1)));
+    if (data.length === 0)
+        errs.push('At least 1 option is required');
+    if (hasDuplicates)
+        [`Remove duplicate values`, ...duplicates.map((str) => `\t• ${str}`)].forEach((item) => errs.push(item));
+    if (errs.length)
+        return errs;
+    return '';
+}
+const opts = [...Array(300)].map((_, i) => {
+    return { id: String(i + 1), label: `Item Number #${i + 1}`, value: String(i + 1) };
+});
+const Template = (props) => {
+    const { values: { data }, onChange, fieldErrors, } = useFormBehaviors({
+        initialState,
+        onSubmit: console.log,
+        validations: {
+            data: VALIDATION_unique,
+        },
+    });
+    return (_jsx(BKJPillSelect, Object.assign({}, props, { options: opts, max: 200, onChange: onChange, name: "data", value: data, error: fieldErrors['data'] }), void 0));
+};
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Industries',
+    required: true,
+    placeholder: "Type or paste a list of dropdown values, so that there's one value per line.",
+};
+export default setup;
 //# sourceMappingURL=BKJPillSelect.stories.js.map

package/lib/components/BKJPillSelect/BKJPillSelect.styled.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { IBKJPillSelectContext, TextAreaWrapperProps } from './BKJPillSelect.types.js';
-export declare const InputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, Partial<Pick<IBKJPillSelectContext, "isMaxLimitReached">>, never>;
-export declare const RequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const BKJPillSelectWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const TextAreaWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TextAreaWrapperProps, never>;
-export declare const BKJPillSelectComboBox: import("styled-components").StyledComponent<import("react").FC<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxProps<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxOption<string | number, string, string | number>>>, import("styled-components").DefaultTheme, {
-    hasValue: boolean;
-    isFocused: boolean;
-}, never>;
+/// <reference types="react" />
+import { IBKJPillSelectContext, TextAreaWrapperProps } from './BKJPillSelect.types.js';
+export declare const InputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, Partial<Pick<IBKJPillSelectContext, "isMaxLimitReached">>, never>;
+export declare const RequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const BKJPillSelectWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextAreaWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TextAreaWrapperProps, never>;
+export declare const BKJPillSelectComboBox: import("styled-components").StyledComponent<import("react").FC<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxProps<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxOption<string | number, string, string | number>>>, import("styled-components").DefaultTheme, {
+    hasValue: boolean;
+    isFocused: boolean;
+}, never>;
 //# sourceMappingURL=BKJPillSelect.styled.d.ts.map