@bookjane2/bookjane-design-library 7.2.8 → 7.3.0

package/lib/components/BKJComboBox/BKJComboBox.utils.js

@@ -1,168 +1,168 @@
-import { matchSorter } from 'match-sorter';
-import { useBKJComboBoxContext } from './src/BKJComboBox.context.js';
-const createFilteringPredicate = (fn) => {
-    return ((inputValue = '', options = []) => fn(inputValue, options));
-};
-export const itemToString = function (option) {
-    return typeof option?.label === 'string' ? option?.label : '';
-};
-export const filterPredicateMap = {
-    TimeStartsWith: createFilteringPredicate((inputValue, options) => {
-        return inputValue
-            ? matchSorter(options, inputValue, {
-                threshold: matchSorter.rankings.STARTS_WITH,
-                keys: [
-                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
-                    'label',
-                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
-                ],
-            })
-            : options;
-    }),
-    CaseSensitiveMatch: createFilteringPredicate((inputValue, options) => {
-        return inputValue
-            ? matchSorter(options, inputValue, {
-                threshold: matchSorter.rankings.CASE_SENSITIVE_EQUAL,
-                keys: [
-                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
-                    'label',
-                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
-                ],
-            })
-            : options;
-    }),
-    CaseInsensitiveMatch: createFilteringPredicate((inputValue, options) => {
-        return inputValue
-            ? matchSorter(options, inputValue, {
-                threshold: matchSorter.rankings.EQUAL,
-                keys: [
-                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
-                    'label',
-                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
-                ],
-            })
-            : options;
-    }),
-    StartsWith: createFilteringPredicate((inputValue, options) => {
-        return inputValue
-            ? matchSorter(options, inputValue, {
-                threshold: matchSorter.rankings.STARTS_WITH,
-                keys: [
-                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
-                    'label',
-                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
-                ],
-            })
-            : options;
-    }),
-    AnyMatch: createFilteringPredicate((inputValue, options) => {
-        return inputValue
-            ? matchSorter(options, inputValue, {
-                threshold: matchSorter.rankings.MATCHES,
-                keys: [
-                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
-                    'label',
-                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
-                ],
-            })
-            : options;
-    }),
-};
-export const optionsVariant = 'ComboBoxSeamlessRounded';
-export function getPopperOptions() {
-    return {
-        placement: 'auto',
-        modifiers: [
-            {
-                name: 'flip',
-                options: {
-                    allowedAutoPlacements: ['bottom'],
-                },
-            },
-            {
-                name: 'offset',
-                enabled: true,
-                phase: 'main',
-                effect: ({ state: { elements: { reference }, }, instance, }) => {
-                    const RO_PROP = '__popperjsRO__';
-                    reference[RO_PROP] = new ResizeObserver(() => {
-                        instance.update();
-                    });
-                    reference[RO_PROP].observe(reference);
-                    const observer = new ResizeObserver(() => instance.update());
-                    observer.observe(reference);
-                    return () => {
-                        reference[RO_PROP].disconnect();
-                        delete reference[RO_PROP];
-                    };
-                },
-            },
-            {
-                name: 'sameWidth',
-                enabled: true,
-                phase: 'beforeWrite',
-                requires: ['computeStyles'],
-                fn({ state }) {
-                    if (!state.styles['popper'])
-                        return void 0;
-                    state.styles['popper'].minWidth = `${state.rects.reference.width}px`;
-                    state.styles['popper'].maxWidth = `${state.rects.reference.width}px`;
-                    return void 0;
-                },
-                options: {
-                    adaptive: true,
-                    gpuAcceleration: true,
-                },
-                effect({ state }) {
-                    if (!state.elements.reference['offsetWidth'])
-                        return void 0;
-                    state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
-                    state.elements.popper.style.maxWidth = `${state.elements.reference.offsetWidth}px`;
-                    return void 0;
-                },
-            },
-        ],
-    };
-}
-const rightIconClassName = 'bkj-combobox-dropdown-icon';
-export const useRightIconProps = (action, disabled) => {
-    const { inputValue, value, reset, onSelectedClear, isOpen, anchorElement, openMenu, closeMenu } = useBKJComboBoxContext();
-    switch (action) {
-        case 'ClearInputValue':
-            if (inputValue)
-                return {
-                    iconName: 'CloseBold',
-                    onClick: reset,
-                    className: rightIconClassName,
-                };
-            return undefined;
-        case 'ClearSelectedValue':
-            if (value.length > 0)
-                return {
-                    iconName: 'CloseBold',
-                    onClick: onSelectedClear,
-                    className: rightIconClassName,
-                };
-            return undefined;
-        case 'OpenToggle':
-            return {
-                className: rightIconClassName,
-                isOpen,
-                iconName: 'ArrowDown',
-                onClick: disabled
-                    ? undefined
-                    : () => {
-                        if (!isOpen) {
-                            anchorElement?.focus();
-                            openMenu();
-                        }
-                        else {
-                            closeMenu();
-                        }
-                    },
-            };
-        default:
-            return undefined;
-    }
-};
+import { matchSorter } from 'match-sorter';
+import { useBKJComboBoxContext } from './src/BKJComboBox.context.js';
+const createFilteringPredicate = (fn) => {
+    return ((inputValue = '', options = []) => fn(inputValue, options));
+};
+export const itemToString = function (option) {
+    return typeof option?.label === 'string' ? option?.label : '';
+};
+export const filterPredicateMap = {
+    TimeStartsWith: createFilteringPredicate((inputValue, options) => {
+        return inputValue
+            ? matchSorter(options, inputValue, {
+                threshold: matchSorter.rankings.STARTS_WITH,
+                keys: [
+                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
+                    'label',
+                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
+                ],
+            })
+            : options;
+    }),
+    CaseSensitiveMatch: createFilteringPredicate((inputValue, options) => {
+        return inputValue
+            ? matchSorter(options, inputValue, {
+                threshold: matchSorter.rankings.CASE_SENSITIVE_EQUAL,
+                keys: [
+                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
+                    'label',
+                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
+                ],
+            })
+            : options;
+    }),
+    CaseInsensitiveMatch: createFilteringPredicate((inputValue, options) => {
+        return inputValue
+            ? matchSorter(options, inputValue, {
+                threshold: matchSorter.rankings.EQUAL,
+                keys: [
+                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
+                    'label',
+                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
+                ],
+            })
+            : options;
+    }),
+    StartsWith: createFilteringPredicate((inputValue, options) => {
+        return inputValue
+            ? matchSorter(options, inputValue, {
+                threshold: matchSorter.rankings.STARTS_WITH,
+                keys: [
+                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
+                    'label',
+                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
+                ],
+            })
+            : options;
+    }),
+    AnyMatch: createFilteringPredicate((inputValue, options) => {
+        return inputValue
+            ? matchSorter(options, inputValue, {
+                threshold: matchSorter.rankings.MATCHES,
+                keys: [
+                    (itr) => String(itr.value).replaceAll(' ', '').replaceAll(':', ''),
+                    'label',
+                    (itr) => itr.label.replaceAll(' ', '').replaceAll(':', ''),
+                ],
+            })
+            : options;
+    }),
+};
+export const optionsVariant = 'ComboBoxSeamlessRounded';
+export function getPopperOptions() {
+    return {
+        placement: 'auto',
+        modifiers: [
+            {
+                name: 'flip',
+                options: {
+                    allowedAutoPlacements: ['bottom'],
+                },
+            },
+            {
+                name: 'offset',
+                enabled: true,
+                phase: 'main',
+                effect: ({ state: { elements: { reference }, }, instance, }) => {
+                    const RO_PROP = '__popperjsRO__';
+                    reference[RO_PROP] = new ResizeObserver(() => {
+                        instance.update();
+                    });
+                    reference[RO_PROP].observe(reference);
+                    const observer = new ResizeObserver(() => instance.update());
+                    observer.observe(reference);
+                    return () => {
+                        reference[RO_PROP].disconnect();
+                        delete reference[RO_PROP];
+                    };
+                },
+            },
+            {
+                name: 'sameWidth',
+                enabled: true,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn({ state }) {
+                    if (!state.styles['popper'])
+                        return void 0;
+                    state.styles['popper'].minWidth = `${state.rects.reference.width}px`;
+                    state.styles['popper'].maxWidth = `${state.rects.reference.width}px`;
+                    return void 0;
+                },
+                options: {
+                    adaptive: true,
+                    gpuAcceleration: true,
+                },
+                effect({ state }) {
+                    if (!state.elements.reference['offsetWidth'])
+                        return void 0;
+                    state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
+                    state.elements.popper.style.maxWidth = `${state.elements.reference.offsetWidth}px`;
+                    return void 0;
+                },
+            },
+        ],
+    };
+}
+const rightIconClassName = 'bkj-combobox-dropdown-icon';
+export const useRightIconProps = (action, disabled) => {
+    const { inputValue, value, reset, onSelectedClear, isOpen, anchorElement, openMenu, closeMenu } = useBKJComboBoxContext();
+    switch (action) {
+        case 'ClearInputValue':
+            if (inputValue)
+                return {
+                    iconName: 'CloseBold',
+                    onClick: reset,
+                    className: rightIconClassName,
+                };
+            return undefined;
+        case 'ClearSelectedValue':
+            if (value.length > 0)
+                return {
+                    iconName: 'CloseBold',
+                    onClick: onSelectedClear,
+                    className: rightIconClassName,
+                };
+            return undefined;
+        case 'OpenToggle':
+            return {
+                className: rightIconClassName,
+                isOpen,
+                iconName: 'ArrowDown',
+                onClick: disabled
+                    ? undefined
+                    : () => {
+                        if (!isOpen) {
+                            anchorElement?.focus();
+                            openMenu();
+                        }
+                        else {
+                            closeMenu();
+                        }
+                    },
+            };
+        default:
+            return undefined;
+    }
+};
 //# sourceMappingURL=BKJComboBox.utils.js.map