@elliemae/ds-form-combobox 3.50.0-next.2 → 3.50.0-rc.1

package/dist/esm/parts/header-list/useHeaderListHandlers.js

@@ -1,110 +0,0 @@
-import * as React from "react";
-import { useState, useMemo, useEffect, useContext, useCallback } from "react";
-import { getSelectableOptions } from "../../utils/listHelper.js";
-import ComboBoxContext from "../../ComboBoxCTX.js";
-const useHeaderListHandlers = () => {
-  const {
-    props: { selectedValues, onSelectAll },
-    showSelectedOptions,
-    internalRef,
-    setShowSelectedOptions,
-    setMenuState,
-    correctOptions: filteredOptions
-  } = useContext(ComboBoxContext);
-  const multiSelectedValues = selectedValues;
-  const selectableOptions = getSelectableOptions(filteredOptions);
-  const getCheckboxStatus = useMemo(() => {
-    if (multiSelectedValues.length === selectableOptions.length) {
-      return true;
-    }
-    if (multiSelectedValues?.length === 0) {
-      return false;
-    }
-    return "mixed";
-  }, [multiSelectedValues.length, selectableOptions.length]);
-  const [checkboxStatus, setCheckboxStatus] = useState(false);
-  useEffect(() => {
-    setCheckboxStatus(getCheckboxStatus);
-  }, [getCheckboxStatus, multiSelectedValues]);
-  const handleOnMouseDown = useCallback((e) => {
-    e.preventDefault();
-  }, []);
-  const handleSelectAllCheckboxChange = useCallback(
-    (e) => {
-      if ((!checkboxStatus || checkboxStatus === "mixed") && onSelectAll) {
-        onSelectAll(
-          filteredOptions.filter((option) => option.type === "option" && !option.disabled),
-          e
-        );
-        setCheckboxStatus(true);
-      } else if (onSelectAll) {
-        onSelectAll([], e);
-        setCheckboxStatus(false);
-      }
-    },
-    [checkboxStatus, onSelectAll, filteredOptions]
-  );
-  const handleToggleSelectedValuesFilter = useCallback(
-    (e) => {
-      e.preventDefault();
-      setShowSelectedOptions(!showSelectedOptions);
-    },
-    [setShowSelectedOptions, showSelectedOptions]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        setMenuState(false, "close", e);
-        internalRef.current?.focus();
-      }
-    },
-    [setMenuState, internalRef]
-  );
-  const handleFilterSelectionBtnOnTab = useCallback(
-    (e) => {
-      if (e.key === "Tab" && !e.shiftKey) {
-        e.preventDefault();
-        internalRef.current?.focus();
-      }
-    },
-    [internalRef]
-  );
-  const handleCheckAllOnTab = useCallback(
-    (e) => {
-      if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
-        e.preventDefault();
-        internalRef.current?.focus();
-      }
-    },
-    [internalRef, multiSelectedValues]
-  );
-  useEffect(() => {
-    if (multiSelectedValues.length === 0) {
-      setShowSelectedOptions(false);
-    }
-  }, [multiSelectedValues, setShowSelectedOptions]);
-  return useMemo(
-    () => ({
-      handleKeyDown,
-      handleToggleSelectedValuesFilter,
-      handleFilterSelectionBtnOnTab,
-      handleOnMouseDown,
-      handleCheckAllOnTab,
-      handleSelectAllCheckboxChange,
-      checkboxStatus
-    }),
-    [
-      handleKeyDown,
-      handleFilterSelectionBtnOnTab,
-      handleToggleSelectedValuesFilter,
-      handleOnMouseDown,
-      handleCheckAllOnTab,
-      handleSelectAllCheckboxChange,
-      checkboxStatus
-    ]
-  );
-};
-export {
-  useHeaderListHandlers
-};
-//# sourceMappingURL=useHeaderListHandlers.js.map

package/dist/esm/parts/header-list/useHeaderListHandlers.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/useHeaderListHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSelectableOptions } from '../../utils/listHelper.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, onSelectAll },\n    showSelectedOptions,\n    internalRef,\n    setShowSelectedOptions,\n    setMenuState,\n    correctOptions: filteredOptions,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: (\n    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n  ) => void = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  // and set focus on input\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setMenuState(false, 'close', e);\n        internalRef.current?.focus();\n      }\n    },\n    [setMenuState, internalRef],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,SAAS,WAAW,YAAY,mBAAmB;AAEtE,SAAS,4BAA4B;AACrC,OAAO,qBAAqB;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB,eAAe;AAE9D,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA4B,KAAK;AAE7E,YAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,mCAEM;AAAA,IACV,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,YAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/types/parts/header-list/HeaderList.d.ts

@@ -1 +0,0 @@
-export declare const HeaderList: () => JSX.Element;

package/dist/types/parts/header-list/index.d.ts

@@ -1 +0,0 @@
-export { HeaderList } from './HeaderList.js';

package/dist/types/parts/header-list/styled.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const StyledHeaderListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledButtonSelection: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
-export declare const StyledSelectedItems: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledNoOptionsSelected: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledSelectAllCheckbox: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/parts/header-list/useHeaderListHandlers.d.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-declare const useHeaderListHandlers: () => {
-    handleKeyDown: (e: React.KeyboardEvent) => void;
-    handleToggleSelectedValuesFilter: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
-    handleFilterSelectionBtnOnTab: (e: React.KeyboardEvent) => void;
-    handleOnMouseDown: (e: React.MouseEvent) => void;
-    handleCheckAllOnTab: (e: React.KeyboardEvent) => void;
-    handleSelectAllCheckboxChange: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    checkboxStatus: boolean | "mixed";
-};
-export { useHeaderListHandlers };