@pie-lib/text-select 1.12.8 → 1.13.1-beta.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.12.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.12.8) (2023-11-06)
+## [1.13.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.1-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.6...@pie-lib/text-select@1.12.7) (2023-10-03)
+# [1.13.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
@@ -19,142 +19,90 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.12.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.5...@pie-lib/text-select@1.12.6) (2023-10-01)
+# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.14.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
+# [1.13.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/text-select
 
-
-
-## [1.12.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.4...@pie-lib/text-select@1.12.5) (2023-09-27)
+## [1.12.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.6...@pie-lib/text-select@1.12.7) (2023-10-03)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
+## [1.12.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.5...@pie-lib/text-select@1.12.6) (2023-10-01)
 
+**Note:** Version bump only for package @pie-lib/text-select
 
+## [1.12.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.4...@pie-lib/text-select@1.12.5) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/text-select
 
 ## [1.12.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.3...@pie-lib/text-select@1.12.4) (2023-09-27)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.12.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.2...@pie-lib/text-select@1.12.3) (2023-09-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.12.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.1...@pie-lib/text-select@1.12.2) (2023-09-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.12.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.0...@pie-lib/text-select@1.12.1) (2023-09-20)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 # [1.12.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.3...@pie-lib/text-select@1.12.0) (2023-09-18)
 
-
 ### Features
 
-* **translator, text-select:** add translations for new text-select legend PD-3162 ([20ee2c1](https://github.com/pie-framework/pie-lib/commit/20ee2c17873985fa06b4b58cf781742a5923b532))
-
-
-
-
+- **translator, text-select:** add translations for new text-select legend PD-3162 ([20ee2c1](https://github.com/pie-framework/pie-lib/commit/20ee2c17873985fa06b4b58cf781742a5923b532))
 
 ## [1.11.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.2...@pie-lib/text-select@1.11.3) (2023-09-14)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.11.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.1...@pie-lib/text-select@1.11.2) (2023-08-29)
 
-
 ### Bug Fixes
 
-* **text-select:** PD-3117 - avoids tokens overlapping in eval mode ([728c242](https://github.com/pie-framework/pie-lib/commit/728c24274c726907de568600b074305a145320ca))
-* **text-select:** PD-3134 replace typography with span to prevent materialui from overwriting styling ([a9c4860](https://github.com/pie-framework/pie-lib/commit/a9c4860701355e3e6b33145414658da06ba5a5a3))
-
-
-
-
+- **text-select:** PD-3117 - avoids tokens overlapping in eval mode ([728c242](https://github.com/pie-framework/pie-lib/commit/728c24274c726907de568600b074305a145320ca))
+- **text-select:** PD-3134 replace typography with span to prevent materialui from overwriting styling ([a9c4860](https://github.com/pie-framework/pie-lib/commit/a9c4860701355e3e6b33145414658da06ba5a5a3))
 
 ## [1.11.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.11.0...@pie-lib/text-select@1.11.1) (2023-08-21)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 # [1.11.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.10.0...@pie-lib/text-select@1.11.0) (2023-08-16)
 
-
 ### Features
 
-* **text-select:** PD-1163 - add legend for icons used in eval mode ([7b2bac2](https://github.com/pie-framework/pie-lib/commit/7b2bac262d29986db2ce57ff6cee6c04af08472a))
-
-
-
-
+- **text-select:** PD-1163 - add legend for icons used in eval mode ([7b2bac2](https://github.com/pie-framework/pie-lib/commit/7b2bac262d29986db2ce57ff6cee6c04af08472a))
 
 # [1.10.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.29...@pie-lib/text-select@1.10.0) (2023-08-15)
 
-
 ### Features
 
-* **text-select:** adjust colors and alignment of the color ([a51ba55](https://github.com/pie-framework/pie-lib/commit/a51ba5547f6e1559915d6ea967d406923831b561))
-* **text-select:** PD-1163 create wrapper component ([b41db39](https://github.com/pie-framework/pie-lib/commit/b41db39ade332d19dca70a06d54acf51b5888c69))
-* **text-select:** PD-1163 update snapshots ([6b8edf8](https://github.com/pie-framework/pie-lib/commit/6b8edf83b763abdd93eee2655be3600cef90586b))
-* **text-select:** PD-1163 updates to tokens in text select ([2535c91](https://github.com/pie-framework/pie-lib/commit/2535c911f378f4cf41c8471bfa1898b996ffacee))
-
-
-
-
+- **text-select:** adjust colors and alignment of the color ([a51ba55](https://github.com/pie-framework/pie-lib/commit/a51ba5547f6e1559915d6ea967d406923831b561))
+- **text-select:** PD-1163 create wrapper component ([b41db39](https://github.com/pie-framework/pie-lib/commit/b41db39ade332d19dca70a06d54acf51b5888c69))
+- **text-select:** PD-1163 update snapshots ([6b8edf8](https://github.com/pie-framework/pie-lib/commit/6b8edf83b763abdd93eee2655be3600cef90586b))
+- **text-select:** PD-1163 updates to tokens in text select ([2535c91](https://github.com/pie-framework/pie-lib/commit/2535c911f378f4cf41c8471bfa1898b996ffacee))
 
 ## [1.9.29](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.28...@pie-lib/text-select@1.9.29) (2023-07-24)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.9.28](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.27...@pie-lib/text-select@1.9.28) (2023-06-24)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.9.27](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.26...@pie-lib/text-select@1.9.27) (2023-06-13)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.9.26](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.25...@pie-lib/text-select@1.9.26) (2023-06-12)
 
 **Note:** Version bump only for package @pie-lib/text-select

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.12.8",
+  "version": "1.13.1-beta.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -17,10 +17,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/icons": "^3.0.2",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.15.9",
-    "@pie-lib/style-utils": "^0.1.43",
-    "@pie-lib/translator": "^2.3.1",
+    "@pie-lib/render-ui": "^4.16.1-beta.0",
+    "@pie-lib/style-utils": "^0.2.1-beta.0",
+    "@pie-lib/translator": "^2.4.1-beta.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
@@ -30,7 +31,8 @@
   },
   "devDependencies": {
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/test-utils": "^0.2.33",
+    "@pie-framework/parse-english": "^1.0.0",
+    "@pie-lib/test-utils": "^0.3.1-beta.0",
     "natural": "^0.6.3",
     "react": "^16.8.1",
     "react-dom": "^16.9.0"
@@ -39,6 +41,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "a84fb39e2f9e192f996390267dd8edf711b5214e",
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453",
   "scripts": {}
 }

package/src/__tests__/__snapshots__/text-select.test.jsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`text-select snapshot renders 1`] = `
+<WithStyles(TokenSelect)
+  maxNoOfSelections={4}
+  onChange={[Function]}
+  tokens={
+    Array [
+      Object {
+        "correct": undefined,
+        "end": 3,
+        "isMissing": undefined,
+        "selectable": undefined,
+        "selected": false,
+        "start": 0,
+        "text": "foo",
+      },
+    ]
+  }
+/>
+`;

package/src/__tests__/text-select.test.jsx

@@ -0,0 +1,34 @@
+import TextSelect from '../text-select';
+import { shallow } from 'enzyme';
+import React from 'react';
+import toJson from 'enzyme-to-json';
+describe('text-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={jest.fn()} maxNoOfSelections={4} />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(<TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={onChange} />);
+    });
+
+    describe('change', () => {
+      it('calls onChange', () => {
+        const changeArgs = [
+          { start: 0, end: 1, selected: true },
+          { start: 1, end: 2 },
+        ];
+
+        w.instance().change(changeArgs);
+        expect(onChange).toBeCalledWith([{ start: 0, end: 1 }]);
+      });
+    });
+  });
+});

package/src/__tests__/utils.test.jsx

@@ -0,0 +1,27 @@
+import { prepareText } from '../utils';
+
+describe('logic', () => {
+  it('returns text if no html elements', () => {
+    const formattedText = prepareText(`foo bar`);
+
+    expect(formattedText).toEqual('foo bar');
+  });
+
+  it('replaces br with new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p>`);
+
+    expect(formattedText).toEqual('foo\nbar');
+  });
+
+  it('replaces p with 2 new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p><p>bar<br>foo</p>`);
+
+    expect(formattedText).toEqual('foo\nbar\n\nbar\nfoo');
+  });
+
+  it('adds p if there are no paragraphs', () => {
+    const formattedText = prepareText(`foo<br>bar<br>foo`);
+
+    expect(formattedText).toEqual('foo\nbar\nfoo');
+  });
+});

package/src/index.js

@@ -1,3 +1,4 @@
+import Controls from './tokenizer/controls';
 import Tokenizer from './tokenizer';
 import TokenSelect, { TokenTypes } from './token-select';
 import TextSelect from './text-select';
@@ -5,4 +6,4 @@ import { Legend } from './legend';
 import Token from './token-select/token';
 import { prepareText } from './utils';
 
-export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };
+export { Controls, TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/token-select/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token-select snapshot renders 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders in view mode with selected tokens 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders paragraphs properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span></p><p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders sentences properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;

package/src/token-select/__tests__/__snapshots__/token.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token snapshot renders 1`] = `
+<Wrapper
+  useWrapper={false}
+>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo bar",
+      }
+    }
+  />
+</Wrapper>
+`;
+
+exports[`token snapshot renders with brs 1`] = `
+<Wrapper
+  useWrapper={false}
+>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo <br>bar",
+      }
+    }
+  />
+</Wrapper>
+`;

package/src/token-select/__tests__/index.test.jsx

@@ -0,0 +1,257 @@
+import { TokenSelect } from '../index';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+describe('token-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo bar',
+              start: 0,
+              end: 7,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders sentences properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders paragraphs properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders in view mode with selected tokens', () => {
+      const w = shallow(
+        <TokenSelect
+          disabled
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo',
+              start: 0,
+              end: 3,
+            },
+            {
+              text: 'bar',
+              start: 4,
+              end: 7,
+            },
+          ]}
+          classes={{}}
+          onChange={onChange}
+        />,
+      );
+    });
+    describe('selectedCount', () => {
+      it('returns the correct count', () => {
+        expect(w.instance().selectedCount()).toEqual(0);
+      });
+
+      it('returns the correct count for 1 selected', () => {
+        w.setProps({ tokens: [{ selected: true }] });
+        expect(w.instance().selectedCount()).toEqual(1);
+      });
+    });
+
+    describe('canSelectMore', () => {
+      it('returns true for undefined max selections', () => {
+        w.setProps({ maxNoOfSelections: undefined });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 0 max selections', () => {
+        w.setProps({ maxNoOfSelections: 0 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for -1 max selections', () => {
+        w.setProps({ maxNoOfSelections: -1 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 5 max selections and count 4', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(4)).toEqual(true);
+      });
+
+      it('returns true for 5 max selections and count 5', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(5)).toEqual(false);
+      });
+
+      it('returns false for 5 max selections and count 6', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(6)).toEqual(false);
+      });
+
+      it('returns true for 1 max selections and count 1', () => {
+        w.setProps({ maxNoOfSelections: 1 });
+        expect(w.instance().canSelectMore(1)).toEqual(true);
+      });
+    });
+
+    describe('toggleToken', () => {
+      it('return if clicked target is not selectable', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue(null);
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalled();
+      });
+
+      it('calls onChange', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+
+      it('returns if max tokens have been selected', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalledWith([{ selected: true }]);
+      });
+
+      it('calls onChange if maxNoOfSelections is 1 and selectedCount is 1', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+    });
+  });
+});