@pega/cosmos-react-condition-builder 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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"]}