@bookjane2/bookjane-design-library 7.2.8 → 7.3.0

package/lib/components/BKJComboBox/BKJComboBox.stories.js

@@ -1,50 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { useFormBehaviors } from '../../hooks/index.js';
-import { BKJComboBox } from './BKJComboBox.js';
-import options from './fortune-500-company-list.json';
-const __options__ = options.map((item, i) => ({
-    ...item,
-    value: item.id,
-    label: item.company_name,
-    subLabel: `(${item.profit})`,
-    index: i,
-    id: item.id,
-}));
-const setup = {
-    title: 'Input Elements/BKJComboBox',
-    component: BKJComboBox,
-    argTypes: {},
-};
-const Template = () => {
-    const { values, onChange } = useFormBehaviors({
-        initialState: { location: [] },
-        isDirtyCheckEnabled: true,
-        type: 'EDIT',
-        validations: {},
-        onSubmit: () => { },
-    });
-    return (_jsxs(Fragment, { children: [_jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsx("br", {}, void 0),
-            _jsxs("form", Object.assign({ onSubmit: () => { } }, { children: [_jsx(BKJComboBox, { variant: "ComboBoxSeamlessRounded", allowedAutoPlacements: ['bottom', 'top'], type: "Single", label: "Something", value: values.location, options: __options__, name: "location", action: "OpenToggle", filter: "TimeStartsWith", onChange: onChange }, void 0),
-                    _jsx("button", Object.assign({ type: "submit" }, { children: "send" }), void 0)] }), 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 } from 'react';
+import { useFormBehaviors } from '../../hooks/index.js';
+import { BKJComboBox } from './BKJComboBox.js';
+import options from './fortune-500-company-list.json';
+const __options__ = options.map((item, i) => ({
+    ...item,
+    value: item.id,
+    label: item.company_name,
+    subLabel: `(${item.profit})`,
+    index: i,
+    id: item.id,
+}));
+const setup = {
+    title: 'Input Elements/BKJComboBox',
+    component: BKJComboBox,
+    argTypes: {},
+};
+const Template = () => {
+    const { values, onChange } = useFormBehaviors({
+        initialState: { location: [] },
+        isDirtyCheckEnabled: true,
+        type: 'EDIT',
+        validations: {},
+        onSubmit: () => { },
+    });
+    return (_jsxs(Fragment, { children: [_jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsx("br", {}, void 0),
+            _jsxs("form", Object.assign({ onSubmit: () => { } }, { children: [_jsx(BKJComboBox, { variant: "ComboBoxSeamlessRounded", allowedAutoPlacements: ['bottom', 'top'], type: "Single", label: "Something", value: values.location, options: __options__, name: "location", action: "OpenToggle", filter: "TimeStartsWith", onChange: onChange }, void 0),
+                    _jsx("button", Object.assign({ type: "submit" }, { children: "send" }), void 0)] }), void 0)] }, void 0));
+};
+export const Default = Template.bind({});
+Default.args = {};
+export default setup;
 //# sourceMappingURL=BKJComboBox.stories.js.map

package/lib/components/BKJComboBox/BKJComboBox.types.d.ts

@@ -1,122 +1,122 @@
-import { UseComboboxReturnValue } from 'downshift';
-import { Dispatch, Key, KeyboardEventHandler, MutableRefObject, SetStateAction } from 'react';
-import { VirtualItem } from 'react-virtual';
-import { CSSProperties } from 'styled-components';
-import { ChangeEventType, ChangeFunctionType, FormValidationErrorMessageType } from '../../common.types.js';
-import { IBKJTextInputProps } from '../BKJTextInput/BKJTextInput.types.js';
-import { BKJComboBoxFilterFnType } from './BKJComboBox.utils.js';
-import { Placement } from '@popperjs/core';
-export declare type IBKJComboBoxPropsOverrides = 'HIDE_VALUE_LABEL' | 'CHECKBOX_VARIANT';
-export interface IBKJComboBoxProps<TComboBoxOption = IBKJComboBoxOption> extends Omit<IBKJTextInputProps, 'value' | 'overrides'> {
-    name: string;
-    label?: string;
-    $dropdownHeight?: string;
-    allowedAutoPlacements?: Placement[];
-    /**
-     * @description Array of dropdown options
-     */
-    options: Omit<TComboBoxOption, 'index'>[];
-    variant?: 'ComboBoxSeamlessRounded';
-    placeholder?: IBKJTextInputProps['placeholder'];
-    /**
-     * @description To specify if you can only select 1 option at a time, or multiple
-     * @param Single Can only select 1 value
-     * @param Multiple [NOT IMPLEMENTED] Can select multiple values
-     */
-    type: 'Single' | 'Multiple';
-    /**
-     * @description Enum values that map to a filtering function
-     * @param Default Uses matchSorter function from npm package 'match-sorter'
-     * @param ExactMatch Will narrow results by exactly matching input string
-     */
-    filter?: BKJComboBoxFilterFnType;
-    value: string[];
-    onChange: ChangeFunctionType;
-    leftIconProps?: IBKJTextInputProps['leftIconProps'];
-    /**
-     * @description Specifies what the right side button is & does
-     * @param OpenToggle Arrow button to toggle dropdown (SELECTING THIS DISABLES THE ABILITY TO UNSELECT VALUE)
-     * @param ClearValue Clear button that only appears when the inner input has a value
-     */
-    action: 'ClearInputValue' | 'OpenToggle' | 'ClearSelectedValue';
-    error?: FormValidationErrorMessageType;
-    required?: boolean;
-    overrides?: IBKJComboBoxPropsOverrides[];
-    onIsOpenChange?: IBKJComboBoxProviderProps['onIsOpenChange'];
-}
-export declare type IBKJComboBoxOption<TOptionValue = string | number, TOptionLabel = string, TOptionIdentifier = string | number> = {
-    value: TOptionValue;
-    label: TOptionLabel;
-    subLabel?: TOptionLabel;
-    id: TOptionIdentifier;
-    name?: string;
-    key?: Key;
-    disabled?: boolean;
-    style?: CSSProperties;
-    index?: number;
-    overrides?: IBKJComboBoxPropsOverrides[];
-};
-/**
- * @description Props taken by BKJComboBoxProvider
- */
-export interface IBKJComboBoxProviderProps {
-    action: IBKJComboBoxProps['action'];
-    error?: FormValidationErrorMessageType;
-    filter: BKJComboBoxFilterFnType;
-    label: IBKJTextInputProps['label'];
-    name: IBKJComboBoxProps['name'];
-    onChange: IBKJComboBoxProps['onChange'];
-    options: IBKJComboBoxProps['options'];
-    placeholder: IBKJTextInputProps['placeholder'];
-    portalTargetElement: HTMLElement;
-    type: IBKJComboBoxProps['type'];
-    value: IBKJComboBoxProps['value'];
-    variant: IBKJComboBoxProps['variant'];
-    leftIconProps?: IBKJComboBoxProps['leftIconProps'];
-    disabled?: IBKJComboBoxProps['disabled'];
-    required?: IBKJComboBoxProps['required'];
-    overrides: IBKJComboBoxPropsOverrides[];
-    onIsOpenChange?: (args: {
-        isOpen?: boolean;
-        highlightedIndex?: number;
-    }) => void;
-}
-interface ScrollToOptions {
-    align: 'start' | 'center' | 'end' | 'auto';
-}
-export interface IBKJComboBoxContextValue extends Omit<UseComboboxReturnValue<IBKJComboBoxOption<string | number>>, 'selectItem' | 'setInputValue'> {
-    anchorElement?: HTMLInputElement;
-    setAnchorElement: Dispatch<SetStateAction<IBKJComboBoxContextValue['anchorElement']>>;
-    dropdownElement?: HTMLUListElement;
-    setDropdownElement: Dispatch<SetStateAction<IBKJComboBoxContextValue['dropdownElement']>>;
-    onInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
-    onSelectedClear: () => void;
-    onInputFocus: (...args: any) => void;
-    options: IBKJComboBoxProps['options'];
-    parentRef: MutableRefObject<HTMLUListElement>;
-    rowVirtualizer: {
-        virtualItems: VirtualItem[];
-        totalSize: number;
-        scrollToOffset: (index: number, options?: ScrollToOptions) => void;
-        scrollToIndex: (index: number, options?: ScrollToOptions) => void;
-        measure: () => void;
-    };
-    portalTargetElement: IBKJComboBoxProviderProps['portalTargetElement'];
-    isDropdownReverse: boolean;
-    handleMultiSelectClick: (e: ChangeEventType) => any;
-    name: IBKJComboBoxProps['name'];
-    error?: FormValidationErrorMessageType;
-    filter: BKJComboBoxFilterFnType;
-    label: IBKJTextInputProps['label'];
-    type: IBKJComboBoxProps['type'];
-    value: IBKJComboBoxProps['value'];
-    variant: IBKJComboBoxProps['variant'];
-    onChange: IBKJComboBoxProps['onChange'];
-    placeholder: IBKJTextInputProps['placeholder'];
-    action: IBKJComboBoxProps['action'];
-    leftIconProps?: IBKJComboBoxProps['leftIconProps'];
-    disabled?: IBKJComboBoxProps['disabled'];
-    required?: IBKJComboBoxProps['required'];
-}
-export {};
+import { UseComboboxReturnValue } from 'downshift';
+import { Dispatch, Key, KeyboardEventHandler, MutableRefObject, SetStateAction } from 'react';
+import { VirtualItem } from 'react-virtual';
+import { CSSProperties } from 'styled-components';
+import { ChangeEventType, ChangeFunctionType, FormValidationErrorMessageType } from '../../common.types.js';
+import { IBKJTextInputProps } from '../BKJTextInput/BKJTextInput.types.js';
+import { BKJComboBoxFilterFnType } from './BKJComboBox.utils.js';
+import { Placement } from '@popperjs/core';
+export declare type IBKJComboBoxPropsOverrides = 'HIDE_VALUE_LABEL' | 'CHECKBOX_VARIANT';
+export interface IBKJComboBoxProps<TComboBoxOption = IBKJComboBoxOption> extends Omit<IBKJTextInputProps, 'value' | 'overrides'> {
+    name: string;
+    label?: string;
+    $dropdownHeight?: string;
+    allowedAutoPlacements?: Placement[];
+    /**
+     * @description Array of dropdown options
+     */
+    options: Omit<TComboBoxOption, 'index'>[];
+    variant?: 'ComboBoxSeamlessRounded';
+    placeholder?: IBKJTextInputProps['placeholder'];
+    /**
+     * @description To specify if you can only select 1 option at a time, or multiple
+     * @param Single Can only select 1 value
+     * @param Multiple [NOT IMPLEMENTED] Can select multiple values
+     */
+    type: 'Single' | 'Multiple';
+    /**
+     * @description Enum values that map to a filtering function
+     * @param Default Uses matchSorter function from npm package 'match-sorter'
+     * @param ExactMatch Will narrow results by exactly matching input string
+     */
+    filter?: BKJComboBoxFilterFnType;
+    value: string[];
+    onChange: ChangeFunctionType;
+    leftIconProps?: IBKJTextInputProps['leftIconProps'];
+    /**
+     * @description Specifies what the right side button is & does
+     * @param OpenToggle Arrow button to toggle dropdown (SELECTING THIS DISABLES THE ABILITY TO UNSELECT VALUE)
+     * @param ClearValue Clear button that only appears when the inner input has a value
+     */
+    action: 'ClearInputValue' | 'OpenToggle' | 'ClearSelectedValue';
+    error?: FormValidationErrorMessageType;
+    required?: boolean;
+    overrides?: IBKJComboBoxPropsOverrides[];
+    onIsOpenChange?: IBKJComboBoxProviderProps['onIsOpenChange'];
+}
+export declare type IBKJComboBoxOption<TOptionValue = string | number, TOptionLabel = string, TOptionIdentifier = string | number> = {
+    value: TOptionValue;
+    label: TOptionLabel;
+    subLabel?: TOptionLabel;
+    id: TOptionIdentifier;
+    name?: string;
+    key?: Key;
+    disabled?: boolean;
+    style?: CSSProperties;
+    index?: number;
+    overrides?: IBKJComboBoxPropsOverrides[];
+};
+/**
+ * @description Props taken by BKJComboBoxProvider
+ */
+export interface IBKJComboBoxProviderProps {
+    action: IBKJComboBoxProps['action'];
+    error?: FormValidationErrorMessageType;
+    filter: BKJComboBoxFilterFnType;
+    label: IBKJTextInputProps['label'];
+    name: IBKJComboBoxProps['name'];
+    onChange: IBKJComboBoxProps['onChange'];
+    options: IBKJComboBoxProps['options'];
+    placeholder: IBKJTextInputProps['placeholder'];
+    portalTargetElement: HTMLElement;
+    type: IBKJComboBoxProps['type'];
+    value: IBKJComboBoxProps['value'];
+    variant: IBKJComboBoxProps['variant'];
+    leftIconProps?: IBKJComboBoxProps['leftIconProps'];
+    disabled?: IBKJComboBoxProps['disabled'];
+    required?: IBKJComboBoxProps['required'];
+    overrides: IBKJComboBoxPropsOverrides[];
+    onIsOpenChange?: (args: {
+        isOpen?: boolean;
+        highlightedIndex?: number;
+    }) => void;
+}
+interface ScrollToOptions {
+    align: 'start' | 'center' | 'end' | 'auto';
+}
+export interface IBKJComboBoxContextValue extends Omit<UseComboboxReturnValue<IBKJComboBoxOption<string | number>>, 'selectItem' | 'setInputValue'> {
+    anchorElement?: HTMLInputElement;
+    setAnchorElement: Dispatch<SetStateAction<IBKJComboBoxContextValue['anchorElement']>>;
+    dropdownElement?: HTMLUListElement;
+    setDropdownElement: Dispatch<SetStateAction<IBKJComboBoxContextValue['dropdownElement']>>;
+    onInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onSelectedClear: () => void;
+    onInputFocus: (...args: any) => void;
+    options: IBKJComboBoxProps['options'];
+    parentRef: MutableRefObject<HTMLUListElement>;
+    rowVirtualizer: {
+        virtualItems: VirtualItem[];
+        totalSize: number;
+        scrollToOffset: (index: number, options?: ScrollToOptions) => void;
+        scrollToIndex: (index: number, options?: ScrollToOptions) => void;
+        measure: () => void;
+    };
+    portalTargetElement: IBKJComboBoxProviderProps['portalTargetElement'];
+    isDropdownReverse: boolean;
+    handleMultiSelectClick: (e: ChangeEventType) => any;
+    name: IBKJComboBoxProps['name'];
+    error?: FormValidationErrorMessageType;
+    filter: BKJComboBoxFilterFnType;
+    label: IBKJTextInputProps['label'];
+    type: IBKJComboBoxProps['type'];
+    value: IBKJComboBoxProps['value'];
+    variant: IBKJComboBoxProps['variant'];
+    onChange: IBKJComboBoxProps['onChange'];
+    placeholder: IBKJTextInputProps['placeholder'];
+    action: IBKJComboBoxProps['action'];
+    leftIconProps?: IBKJComboBoxProps['leftIconProps'];
+    disabled?: IBKJComboBoxProps['disabled'];
+    required?: IBKJComboBoxProps['required'];
+}
+export {};
 //# sourceMappingURL=BKJComboBox.types.d.ts.map

package/lib/components/BKJComboBox/BKJComboBox.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=BKJComboBox.types.js.map

package/lib/components/BKJComboBox/BKJComboBox.utils.d.ts

@@ -1,24 +1,24 @@
-import { Modifier } from '@popperjs/core';
-import { ComputeStylesModifier } from '@popperjs/core/lib/modifiers/computeStyles';
-import { FlipModifier } from '@popperjs/core/lib/modifiers/flip';
-import { Options } from '@popperjs/core';
-import { PopperOffsetsModifier } from '@popperjs/core/lib/modifiers/popperOffsets';
-import { IBKJTextInputProps } from '../BKJTextInput/BKJTextInput.types.js';
-import { IBKJComboBoxOption, IBKJComboBoxProps } from './BKJComboBox.types.js';
-declare type BKJComboBoxFilterFn = (inputValue: string, options: IBKJComboBoxOption[]) => IBKJComboBoxOption[];
-export declare const itemToString: (option: IBKJComboBoxOption | null) => string;
-export declare type BKJComboBoxFilterFnType = keyof typeof filterPredicateMap;
-export declare const filterPredicateMap: {
-    TimeStartsWith: BKJComboBoxFilterFn;
-    CaseSensitiveMatch: BKJComboBoxFilterFn;
-    CaseInsensitiveMatch: BKJComboBoxFilterFn;
-    StartsWith: BKJComboBoxFilterFn;
-    AnyMatch: BKJComboBoxFilterFn;
-};
-export declare const optionsVariant: 'ComboBoxSeamlessRounded';
-export declare function getPopperOptions(): {
-    modifiers: Array<Modifier<'sameWidth', ComputeStylesModifier['options']> | Partial<Modifier<'flip', FlipModifier['options']>> | Partial<Modifier<'offset', PopperOffsetsModifier['options']>>>;
-} & Omit<Partial<Options>, 'modifiers'>;
-export declare const useRightIconProps: (action: IBKJComboBoxProps['action'], disabled?: boolean | undefined) => IBKJTextInputProps['rightIconProps'];
-export {};
+import { Modifier } from '@popperjs/core';
+import { ComputeStylesModifier } from '@popperjs/core/lib/modifiers/computeStyles';
+import { FlipModifier } from '@popperjs/core/lib/modifiers/flip';
+import { Options } from '@popperjs/core';
+import { PopperOffsetsModifier } from '@popperjs/core/lib/modifiers/popperOffsets';
+import { IBKJTextInputProps } from '../BKJTextInput/BKJTextInput.types.js';
+import { IBKJComboBoxOption, IBKJComboBoxProps } from './BKJComboBox.types.js';
+declare type BKJComboBoxFilterFn = (inputValue: string, options: IBKJComboBoxOption[]) => IBKJComboBoxOption[];
+export declare const itemToString: (option: IBKJComboBoxOption | null) => string;
+export declare type BKJComboBoxFilterFnType = keyof typeof filterPredicateMap;
+export declare const filterPredicateMap: {
+    TimeStartsWith: BKJComboBoxFilterFn;
+    CaseSensitiveMatch: BKJComboBoxFilterFn;
+    CaseInsensitiveMatch: BKJComboBoxFilterFn;
+    StartsWith: BKJComboBoxFilterFn;
+    AnyMatch: BKJComboBoxFilterFn;
+};
+export declare const optionsVariant: 'ComboBoxSeamlessRounded';
+export declare function getPopperOptions(): {
+    modifiers: Array<Modifier<'sameWidth', ComputeStylesModifier['options']> | Partial<Modifier<'flip', FlipModifier['options']>> | Partial<Modifier<'offset', PopperOffsetsModifier['options']>>>;
+} & Omit<Partial<Options>, 'modifiers'>;
+export declare const useRightIconProps: (action: IBKJComboBoxProps['action'], disabled?: boolean | undefined) => IBKJTextInputProps['rightIconProps'];
+export {};
 //# sourceMappingURL=BKJComboBox.utils.d.ts.map