@pega/cosmos-react-condition-builder 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-condition-builder",
-  "version": "3.0.0-dev.2.1",
+  "version": "3.0.0-dev.20.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -16,29 +16,35 @@
     "lib"
   ],
   "sideEffects": [
+    "./src/components/ConditionBuilder/core/extendDayJs.ts",
     "./lib/components/ConditionBuilder/core/extendDayJs.js"
   ],
   "scripts": {
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.2.1",
-    "dayjs": "1.8.35",
+    "@pega/cosmos-react-core": "3.0.0-dev.20.0",
+    "@types/react": "^16.14.24 || ^17.0.38",
+    "@types/react-dom": "^16.9.14 || ^17.0.11",
+    "@types/styled-components": "^5.1.7",
+    "dayjs": "^1.10.7",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.12",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storysource": "^6.4.12",
-    "@storybook/addon-toolbars": "^6.4.12",
-    "@storybook/addons": "^6.4.12",
-    "@storybook/react": "^6.4.12",
-    "@storybook/theming": "^6.4.12",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "enzyme": "^3.11.0",
-    "typescript": "~4.5.2"
+    "typescript": "~4.7.2"
   }
 }

package/lib/components/ConditionBuilder/RhsControls/MultiValueSelector.d.ts

@@ -1,16 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
-interface MultiSelectorProps extends BaseProps, NoChildrenProp {
-    /** Previous selection */
-    values: string[];
-    /** Options for the selector */
-    options: string[];
-    /** Callback for changes */
-    onChange: (selection: string[]) => void;
-    /** Used to indicate any errors on the control */
-    status?: 'error';
-}
-/** A control for selecting multiple values using checkboxes in an overlay */
-declare const MultiValueSelector: FunctionComponent<MultiSelectorProps & ForwardProps>;
-export default MultiValueSelector;
-//# sourceMappingURL=MultiValueSelector.d.ts.map

package/lib/components/ConditionBuilder/RhsControls/MultiValueSelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiValueSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/MultiValueSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAEL,SAAS,EACT,YAAY,EAIZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,yBAAyB;IACzB,MAAM,EAAE,MAAM,EAAE,CAAC;IAEjB,+BAA+B;IAC/B,OAAO,EAAE,MAAM,EAAE,CAAC;IAElB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAExC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,6EAA6E;AAC7E,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgE5E,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/MultiValueSelector.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
-import { useI18n, ComboBox, createStringMatcher, useAfterInitialEffect } from '@pega/cosmos-react-core';
-/** A control for selecting multiple values using checkboxes in an overlay */
-const MultiValueSelector = ({ values, options, onChange, status }) => {
-    const t = useI18n();
-    const [selections, setSelections] = useState(values);
-    const [filterValue, setFilterValue] = useState('');
-    const itemsToRender = useMemo(() => {
-        let opts = options;
-        if (filterValue) {
-            const matcher = createStringMatcher(filterValue, 'boundary');
-            opts = opts.filter(opt => matcher.test(opt));
-        }
-        return opts.map(option => {
-            return {
-                id: option,
-                primary: option,
-                selected: selections.includes(option)
-            };
-        });
-    }, [options, filterValue, selections]);
-    useAfterInitialEffect(() => {
-        onChange(selections);
-    }, [selections]);
-    return (_jsx(ComboBox, { mode: 'multi-select', label: t('condition_builder_possible_values_label'), labelHidden: true, placeholder: t('condition_builder_selection_text_default'), value: filterValue, onChange: e => {
-            setFilterValue(e.target.value);
-        }, menu: {
-            items: itemsToRender,
-            onItemClick: option => {
-                setSelections(cur => cur.includes(option) ? cur.filter(selection => selection !== option) : [...cur, option]);
-            }
-        }, selected: selections.length > 0
-            ? {
-                items: selections.map(s => ({ id: s, text: s })),
-                onRemove: value => {
-                    setSelections(cur => cur.filter(selection => selection !== value));
-                }
-            }
-            : undefined, status: status, info: status === 'error' ? t('condition_builder_empty_selection_error_text') : undefined }, void 0));
-};
-export default MultiValueSelector;
-//# sourceMappingURL=MultiValueSelector.js.map

package/lib/components/ConditionBuilder/RhsControls/MultiValueSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiValueSelector.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/MultiValueSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useMemo } from 'react';\n\nimport {\n  useI18n,\n  BaseProps,\n  ForwardProps,\n  ComboBox,\n  createStringMatcher,\n  useAfterInitialEffect,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface MultiSelectorProps extends BaseProps, NoChildrenProp {\n  /** Previous selection */\n  values: string[];\n\n  /** Options for the selector */\n  options: string[];\n\n  /** Callback for changes */\n  onChange: (selection: string[]) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A control for selecting multiple values using checkboxes in an overlay */\nconst MultiValueSelector: FunctionComponent<MultiSelectorProps & ForwardProps> = ({\n  values,\n  options,\n  onChange,\n  status\n}: MultiSelectorProps) => {\n  const t = useI18n();\n\n  const [selections, setSelections] = useState(values);\n  const [filterValue, setFilterValue] = useState('');\n\n  const itemsToRender = useMemo(() => {\n    let opts = options;\n\n    if (filterValue) {\n      const matcher = createStringMatcher(filterValue, 'boundary');\n      opts = opts.filter(opt => matcher.test(opt));\n    }\n\n    return opts.map(option => {\n      return {\n        id: option,\n        primary: option,\n        selected: selections.includes(option)\n      };\n    });\n  }, [options, filterValue, selections]);\n\n  useAfterInitialEffect(() => {\n    onChange(selections);\n  }, [selections]);\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={t('condition_builder_possible_values_label')}\n      labelHidden\n      placeholder={t('condition_builder_selection_text_default')}\n      value={filterValue}\n      onChange={e => {\n        setFilterValue(e.target.value);\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: option => {\n          setSelections(cur =>\n            cur.includes(option) ? cur.filter(selection => selection !== option) : [...cur, option]\n          );\n        }\n      }}\n      selected={\n        selections.length > 0\n          ? {\n              items: selections.map(s => ({ id: s, text: s })),\n              onRemove: value => {\n                setSelections(cur => cur.filter(selection => selection !== value));\n              }\n            }\n          : undefined\n      }\n      status={status}\n      info={status === 'error' ? t('condition_builder_empty_selection_error_text') : undefined}\n    />\n  );\n};\n\nexport default MultiValueSelector;\n"]}