@contentful/field-editor-tags 0.14.3 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +20 -83
  2. package/README.md +0 -1
  3. package/dist/field-editor-tags.cjs.development.js +22 -23
  4. package/dist/field-editor-tags.cjs.development.js.map +1 -1
  5. package/dist/field-editor-tags.cjs.production.min.js +1 -1
  6. package/dist/field-editor-tags.cjs.production.min.js.map +1 -1
  7. package/dist/field-editor-tags.esm.js +20 -21
  8. package/dist/field-editor-tags.esm.js.map +1 -1
  9. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -3,181 +3,118 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [0.14.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.2...@contentful/field-editor-tags@0.14.3) (2021-09-16)
7
-
8
- **Note:** Version bump only for package @contentful/field-editor-tags
6
+ # [0.15.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.6...@contentful/field-editor-tags@0.15.0) (2021-11-04)
9
7
 
8
+ ### Features
10
9
 
10
+ - Forma v4 components adoption ([#805](https://github.com/contentful/field-editors/issues/805)) ([526bde6](https://github.com/contentful/field-editors/commit/526bde6e10e0ee3789705ec10fb31489af7ca59e))
11
11
 
12
+ ### BREAKING CHANGES
12
13
 
14
+ - adopts a new Forma v4 beta
13
15
 
14
- ## [0.14.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.1...@contentful/field-editor-tags@0.14.2) (2021-08-19)
16
+ ## [0.14.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.5...@contentful/field-editor-tags@0.14.6) (2021-10-14)
15
17
 
16
18
  **Note:** Version bump only for package @contentful/field-editor-tags
17
19
 
20
+ ## [0.14.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.4...@contentful/field-editor-tags@0.14.5) (2021-10-06)
18
21
 
22
+ **Note:** Version bump only for package @contentful/field-editor-tags
19
23
 
24
+ ## [0.14.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.3...@contentful/field-editor-tags@0.14.4) (2021-09-17)
20
25
 
26
+ **Note:** Version bump only for package @contentful/field-editor-tags
21
27
 
22
- ## [0.14.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.0...@contentful/field-editor-tags@0.14.1) (2021-07-29)
28
+ ## [0.14.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.2...@contentful/field-editor-tags@0.14.3) (2021-09-16)
23
29
 
24
30
  **Note:** Version bump only for package @contentful/field-editor-tags
25
31
 
32
+ ## [0.14.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.1...@contentful/field-editor-tags@0.14.2) (2021-08-19)
26
33
 
34
+ **Note:** Version bump only for package @contentful/field-editor-tags
27
35
 
36
+ ## [0.14.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.14.0...@contentful/field-editor-tags@0.14.1) (2021-07-29)
28
37
 
38
+ **Note:** Version bump only for package @contentful/field-editor-tags
29
39
 
30
40
  # [0.14.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.13.5...@contentful/field-editor-tags@0.14.0) (2021-07-23)
31
41
 
32
-
33
42
  ### Features
34
43
 
35
- * 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
36
-
37
-
38
-
39
-
44
+ - 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
40
45
 
41
46
  ## [0.13.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.13.2...@contentful/field-editor-tags@0.13.5) (2021-07-06)
42
47
 
43
48
  **Note:** Version bump only for package @contentful/field-editor-tags
44
49
 
45
-
46
-
47
-
48
-
49
50
  ## [0.13.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.13.2...@contentful/field-editor-tags@0.13.4) (2021-07-06)
50
51
 
51
52
  **Note:** Version bump only for package @contentful/field-editor-tags
52
53
 
53
-
54
-
55
-
56
-
57
54
  ## [0.13.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.13.2...@contentful/field-editor-tags@0.13.3) (2021-06-23)
58
55
 
59
56
  **Note:** Version bump only for package @contentful/field-editor-tags
60
57
 
61
-
62
-
63
-
64
-
65
58
  ## [0.13.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.13.1...@contentful/field-editor-tags@0.13.2) (2021-06-23)
66
59
 
67
60
  **Note:** Version bump only for package @contentful/field-editor-tags
68
61
 
69
-
70
-
71
-
72
-
73
62
  ## [0.13.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.13.0...@contentful/field-editor-tags@0.13.1) (2021-06-22)
74
63
 
75
64
  **Note:** Version bump only for package @contentful/field-editor-tags
76
65
 
77
-
78
-
79
-
80
-
81
66
  # [0.13.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.12.1...@contentful/field-editor-tags@0.13.0) (2021-04-06)
82
67
 
83
-
84
68
  ### Features
85
69
 
86
- * bump react-sortable-hoc from 1.11.0 to 2.0.0 ([#664](https://github.com/contentful/field-editors/issues/664)) ([24f1db2](https://github.com/contentful/field-editors/commit/24f1db20ba2842c1990773983b4fb7146efca5ca))
87
-
88
-
89
-
90
-
70
+ - bump react-sortable-hoc from 1.11.0 to 2.0.0 ([#664](https://github.com/contentful/field-editors/issues/664)) ([24f1db2](https://github.com/contentful/field-editors/commit/24f1db20ba2842c1990773983b4fb7146efca5ca))
91
71
 
92
72
  ## [0.12.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.12.0...@contentful/field-editor-tags@0.12.1) (2021-03-05)
93
73
 
94
74
  **Note:** Version bump only for package @contentful/field-editor-tags
95
75
 
96
-
97
-
98
-
99
-
100
76
  # [0.12.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.11.2...@contentful/field-editor-tags@0.12.0) (2021-02-19)
101
77
 
102
-
103
78
  ### Features
104
79
 
105
- * bump min version of forma-36 ([#606](https://github.com/contentful/field-editors/issues/606)) ([fd57c7a](https://github.com/contentful/field-editors/commit/fd57c7a4312766af38c01507f17706ab22992617))
106
-
107
-
108
-
109
-
80
+ - bump min version of forma-36 ([#606](https://github.com/contentful/field-editors/issues/606)) ([fd57c7a](https://github.com/contentful/field-editors/commit/fd57c7a4312766af38c01507f17706ab22992617))
110
81
 
111
82
  ## [0.11.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.11.1...@contentful/field-editor-tags@0.11.2) (2021-02-09)
112
83
 
113
84
  **Note:** Version bump only for package @contentful/field-editor-tags
114
85
 
115
-
116
-
117
-
118
-
119
86
  ## [0.11.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.11.0...@contentful/field-editor-tags@0.11.1) (2021-02-01)
120
87
 
121
88
  **Note:** Version bump only for package @contentful/field-editor-tags
122
89
 
123
-
124
-
125
-
126
-
127
90
  # [0.11.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.10.0...@contentful/field-editor-tags@0.11.0) (2021-01-20)
128
91
 
129
-
130
92
  ### Features
131
93
 
132
- * update minimal forma-36 versions to use updated design ([#565](https://github.com/contentful/field-editors/issues/565)) ([332c734](https://github.com/contentful/field-editors/commit/332c734bfaf54f0e9773fcbb460d743b1f5459ec))
133
-
134
-
135
-
136
-
94
+ - update minimal forma-36 versions to use updated design ([#565](https://github.com/contentful/field-editors/issues/565)) ([332c734](https://github.com/contentful/field-editors/commit/332c734bfaf54f0e9773fcbb460d743b1f5459ec))
137
95
 
138
96
  # [0.10.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.9.5...@contentful/field-editor-tags@0.10.0) (2021-01-12)
139
97
 
140
-
141
98
  ### Features
142
99
 
143
- * update minimal required Forma version to the 3.73.12 ([#552](https://github.com/contentful/field-editors/issues/552)) ([2816fd9](https://github.com/contentful/field-editors/commit/2816fd960c28815faebf49a9ef8f4c4c0d91fc36))
144
-
145
-
146
-
147
-
100
+ - update minimal required Forma version to the 3.73.12 ([#552](https://github.com/contentful/field-editors/issues/552)) ([2816fd9](https://github.com/contentful/field-editors/commit/2816fd960c28815faebf49a9ef8f4c4c0d91fc36))
148
101
 
149
102
  ## [0.9.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.9.4...@contentful/field-editor-tags@0.9.5) (2020-12-16)
150
103
 
151
104
  **Note:** Version bump only for package @contentful/field-editor-tags
152
105
 
153
-
154
-
155
-
156
-
157
106
  ## [0.9.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.9.3...@contentful/field-editor-tags@0.9.4) (2020-11-06)
158
107
 
159
108
  **Note:** Version bump only for package @contentful/field-editor-tags
160
109
 
161
-
162
-
163
-
164
-
165
110
  ## [0.9.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.9.2...@contentful/field-editor-tags@0.9.3) (2020-11-06)
166
111
 
167
112
  **Note:** Version bump only for package @contentful/field-editor-tags
168
113
 
169
-
170
-
171
-
172
-
173
114
  ## [0.9.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.9.1...@contentful/field-editor-tags@0.9.2) (2020-10-28)
174
115
 
175
116
  **Note:** Version bump only for package @contentful/field-editor-tags
176
117
 
177
-
178
-
179
-
180
-
181
118
  ## [0.9.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@0.9.0...@contentful/field-editor-tags@0.9.1) (2020-08-24)
182
119
 
183
120
  **Note:** Version bump only for package @contentful/field-editor-tags
package/README.md CHANGED
@@ -7,6 +7,5 @@ npm install @contentful/field-editor-tags
7
7
  This package contains a React `TagsEditor` component that is used as a default for the `Symbol / List` field type in the Contentful web application.
8
8
 
9
9
  ```js
10
- import '@contentful/forma-36-react-components/dist/styles.css';
11
10
  import { TagsEditor } from '@contentful/field-editor-tags';
12
11
  ```
package/dist/field-editor-tags.cjs.development.js CHANGED
@@ -10,28 +10,28 @@ var isNumber = _interopDefault(require('lodash/isNumber'));
10
10
  var fieldEditorShared = require('@contentful/field-editor-shared');
11
11
  var noop = _interopDefault(require('lodash/noop'));
12
12
  var emotion = require('emotion');
13
- var tokens = _interopDefault(require('@contentful/forma-36-tokens'));
14
- var forma36ReactComponents = require('@contentful/forma-36-react-components');
13
+ var tokens = _interopDefault(require('@contentful/f36-tokens'));
14
+ var f36Components = require('@contentful/f36-components');
15
15
  var reactSortableHoc = require('react-sortable-hoc');
16
16
  var arrayMove = _interopDefault(require('array-move'));
17
+ var f36Icons = require('@contentful/f36-icons');
17
18
 
18
- var styles = {
19
- constraints: /*#__PURE__*/emotion.css({
20
- fontStyle: 'italic',
21
- marginTop: tokens.spacingS,
22
- color: tokens.gray600
23
- })
24
- };
25
19
  function TagsEditorConstraints(props) {
26
20
  var constraintsType = props.constraintsType,
27
21
  constraints = props.constraints;
28
- return React__default.createElement(forma36ReactComponents.Paragraph, {
29
- className: styles.constraints,
22
+ return React__default.createElement(f36Components.Text, {
23
+ as: "p",
24
+ fontColor: "gray600",
25
+ marginBottom: "none",
26
+ marginTop: "spacingS",
27
+ className: emotion.css({
28
+ fontStyle: 'italic'
29
+ }),
30
30
  testId: "tag-editor-constraints"
31
31
  }, constraintsType === 'min' && React__default.createElement("span", null, "Requires at least ", constraints.min, " ", constraints.min === 1 ? 'tag' : 'tags'), constraintsType === 'max' && React__default.createElement("span", null, "Requires no more than ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'), constraintsType === 'min-max' && constraints.max !== constraints.min && React__default.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " tags"), constraintsType === 'min-max' && constraints.max === constraints.min && React__default.createElement("span", null, "Requires exactly ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'));
32
32
  }
33
33
 
34
- var styles$1 = {
34
+ var styles = {
35
35
  dropContainer: /*#__PURE__*/emotion.css({
36
36
  whiteSpace: 'nowrap',
37
37
  display: 'flex',
@@ -59,16 +59,15 @@ var styles$1 = {
59
59
  };
60
60
  var SortablePillHandle = /*#__PURE__*/reactSortableHoc.SortableHandle(function () {
61
61
  return React__default.createElement("div", {
62
- className: styles$1.handle
63
- }, React__default.createElement(forma36ReactComponents.Icon, {
64
- icon: "Drag",
65
- color: "muted"
62
+ className: styles.handle
63
+ }, React__default.createElement(f36Icons.DragIcon, {
64
+ variant: "muted"
66
65
  }));
67
66
  });
68
67
  var SortablePill = /*#__PURE__*/reactSortableHoc.SortableElement(function (props) {
69
- return React__default.createElement(forma36ReactComponents.Pill, {
68
+ return React__default.createElement(f36Components.Pill, {
70
69
  testId: "tag-editor-pill",
71
- className: styles$1.pill,
70
+ className: styles.pill,
72
71
  label: props.label,
73
72
  onClose: function onClose() {
74
73
  if (!props.disabled) {
@@ -81,7 +80,7 @@ var SortablePill = /*#__PURE__*/reactSortableHoc.SortableElement(function (props
81
80
  });
82
81
  var SortableList = /*#__PURE__*/reactSortableHoc.SortableContainer(function (props) {
83
82
  return React__default.createElement("div", {
84
- className: styles$1.dropContainer
83
+ className: styles.dropContainer
85
84
  }, props.children);
86
85
  });
87
86
  function TagsEditor(props) {
@@ -108,11 +107,11 @@ function TagsEditor(props) {
108
107
  }, [props]);
109
108
  return React__default.createElement("div", {
110
109
  "data-test-id": "tag-editor-container"
111
- }, React__default.createElement(forma36ReactComponents.TextInput, {
110
+ }, React__default.createElement(f36Components.TextInput, {
112
111
  testId: "tag-editor-input",
113
- className: styles$1.input,
114
- disabled: isDisabled,
115
- error: hasError,
112
+ className: styles.input,
113
+ isDisabled: isDisabled,
114
+ isInvalid: hasError,
116
115
  type: "text",
117
116
  value: pendingValue,
118
117
  placeholder: "Type the value and hit enter",
package/dist/field-editor-tags.cjs.development.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-editor-tags.cjs.development.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Paragraph } from '@contentful/forma-36-react-components';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Constraint, ConstraintsType } from './types';\n\nconst styles = {\n constraints: css({\n fontStyle: 'italic',\n marginTop: tokens.spacingS,\n color: tokens.gray600,\n }),\n};\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Paragraph className={styles.constraints} testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Paragraph>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { TextInput, Pill, Icon } from '@contentful/forma-36-react-components';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle(() => (\n <div className={styles.handle}>\n <Icon icon=\"Drag\" color=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n disabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={styles.pill}\n label={props.label}\n onClose={() => {\n if (!props.disabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n disabled={isDisabled}\n error={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["styles","constraints","css","fontStyle","marginTop","tokens","spacingS","color","gray600","TagsEditorConstraints","props","constraintsType","React","Paragraph","className","testId","min","max","dropContainer","whiteSpace","display","flexWrap","input","marginBottom","spacingM","pill","marginRight","handle","lineHeight","padding","paddingRight","cursor","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","Icon","icon","SortablePill","SortableElement","Pill","label","onClose","disabled","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","isDisabled","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","error","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"field-editor-tags.cjs.development.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Constraint, ConstraintsType } from './types';\n\nimport { Text } from '@contentful/f36-components';\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nimport { Pill, TextInput } from '@contentful/f36-components';\n\nimport { DragIcon } from '@contentful/f36-icons';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle(() => (\n <div className={styles.handle}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n disabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={styles.pill}\n label={props.label}\n onClose={() => {\n if (!props.disabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","handle","lineHeight","padding","paddingRight","cursor","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","DragIcon","variant","SortablePill","SortableElement","Pill","label","onClose","disabled","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","isDisabled","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
package/dist/field-editor-tags.cjs.production.min.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),a=e(require("lodash/isNumber")),r=require("@contentful/field-editor-shared"),i=e(require("lodash/noop")),l=require("emotion"),o=e(require("@contentful/forma-36-tokens")),s=require("@contentful/forma-36-react-components"),c=require("react-sortable-hoc"),u=e(require("array-move")),d={constraints:l.css({fontStyle:"italic",marginTop:o.spacingS,color:o.gray600})};function m(e){var n=e.constraintsType,a=e.constraints;return t.createElement(s.Paragraph,{className:d.constraints,testId:"tag-editor-constraints"},"min"===n&&t.createElement("span",null,"Requires at least ",a.min," ",1===a.min?"tag":"tags"),"max"===n&&t.createElement("span",null,"Requires no more than ",a.max," ",1===a.max?"tag":"tags"),"min-max"===n&&a.max!==a.min&&t.createElement("span",null,"Requires between ",a.min," and ",a.max," tags"),"min-max"===n&&a.max===a.min&&t.createElement("span",null,"Requires exactly ",a.max," ",1===a.max?"tag":"tags"))}var p={dropContainer:l.css({whiteSpace:"nowrap",display:"flex",flexWrap:"wrap"}),input:l.css({marginTop:o.spacingS,marginBottom:o.spacingM}),pill:l.css({marginRight:o.spacingS,marginBottom:o.spacingS}),handle:l.css({lineHeight:"1.5rem",padding:"0.375rem 0.625rem",paddingRight:0,cursor:"grab",userSelect:"none",svg:{fill:o.gray500,verticalAlign:"middle"}})},f=c.SortableHandle((function(){return t.createElement("div",{className:p.handle},t.createElement(s.Icon,{icon:"Drag",color:"muted"}))})),g=c.SortableElement((function(e){return t.createElement(s.Pill,{testId:"tag-editor-pill",className:p.pill,label:e.label,onClose:function(){e.disabled||e.onRemove(e.index)},onDrag:i,dragHandleComponent:t.createElement(f,null)})})),x=c.SortableContainer((function(e){return t.createElement("div",{className:p.dropContainer},e.children)}));function b(e){var a=n.useState(""),r=a[0],i=a[1],l=e.isDisabled,o=e.items,c=e.constraints,d=e.constraintsType,f=e.hasError,b=n.useCallback((function(n){var t=e.items.filter((function(e,t){return n!==t}));e.onUpdate(t)}),[e]),h=n.useCallback((function(n){var t=u(e.items,n.oldIndex,n.newIndex);e.onUpdate(t)}),[e]);return t.createElement("div",{"data-test-id":"tag-editor-container"},t.createElement(s.TextInput,{testId:"tag-editor-input",className:p.input,disabled:l,error:f,type:"text",value:r,placeholder:"Type the value and hit enter",onKeyDown:function(n){r&&13===n.keyCode&&(e.onUpdate([].concat(e.items,[r])),i(""))},onChange:function(e){i(e.target.value)}}),t.createElement(x,{useDragHandle:!0,axis:"xy",distance:10,onSortEnd:function(e){h({oldIndex:e.oldIndex,newIndex:e.newIndex})}},o.map((function(e,n){return t.createElement(g,{label:e,index:n,key:e+n,disabled:l,onRemove:function(){b(n)}})}))),c&&d&&t.createElement(m,{constraints:c,constraintsType:d}))}function h(e){return null===e||0===e.length}function v(e){var t=e.field,i=(t.validations||[]).filter((function(e){return e.size})).map((function(e){return e.size})),l=i.length>0?i[0]:{},o=function(e){if(e)return a(e.min)&&a(e.max)?"min-max":a(e.min)?"min":a(e.max)?"max":void 0}(l);return n.createElement(r.FieldConnector,{field:t,isInitiallyDisabled:e.isInitiallyDisabled,isEmptyValue:h,throttle:0},(function(e){var t=e.setValue;return n.createElement(b,{constraints:l,constraintsType:o,isDisabled:e.disabled,hasError:e.errors.length>0,items:e.value||[],onUpdate:function(e){t(e)}})}))}v.defaultProps={isInitiallyDisabled:!0},exports.TagsEditor=v;
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),a=e(require("lodash/isNumber")),r=require("@contentful/field-editor-shared"),i=e(require("lodash/noop")),l=require("emotion"),o=e(require("@contentful/f36-tokens")),s=require("@contentful/f36-components"),c=require("react-sortable-hoc"),u=e(require("array-move")),d=require("@contentful/f36-icons");function m(e){var n=e.constraintsType,a=e.constraints;return t.createElement(s.Text,{as:"p",fontColor:"gray600",marginBottom:"none",marginTop:"spacingS",className:l.css({fontStyle:"italic"}),testId:"tag-editor-constraints"},"min"===n&&t.createElement("span",null,"Requires at least ",a.min," ",1===a.min?"tag":"tags"),"max"===n&&t.createElement("span",null,"Requires no more than ",a.max," ",1===a.max?"tag":"tags"),"min-max"===n&&a.max!==a.min&&t.createElement("span",null,"Requires between ",a.min," and ",a.max," tags"),"min-max"===n&&a.max===a.min&&t.createElement("span",null,"Requires exactly ",a.max," ",1===a.max?"tag":"tags"))}var p={dropContainer:l.css({whiteSpace:"nowrap",display:"flex",flexWrap:"wrap"}),input:l.css({marginTop:o.spacingS,marginBottom:o.spacingM}),pill:l.css({marginRight:o.spacingS,marginBottom:o.spacingS}),handle:l.css({lineHeight:"1.5rem",padding:"0.375rem 0.625rem",paddingRight:0,cursor:"grab",userSelect:"none",svg:{fill:o.gray500,verticalAlign:"middle"}})},f=c.SortableHandle((function(){return t.createElement("div",{className:p.handle},t.createElement(d.DragIcon,{variant:"muted"}))})),g=c.SortableElement((function(e){return t.createElement(s.Pill,{testId:"tag-editor-pill",className:p.pill,label:e.label,onClose:function(){e.disabled||e.onRemove(e.index)},onDrag:i,dragHandleComponent:t.createElement(f,null)})})),x=c.SortableContainer((function(e){return t.createElement("div",{className:p.dropContainer},e.children)}));function v(e){var a=n.useState(""),r=a[0],i=a[1],l=e.isDisabled,o=e.items,c=e.constraints,d=e.constraintsType,f=e.hasError,v=n.useCallback((function(n){var t=e.items.filter((function(e,t){return n!==t}));e.onUpdate(t)}),[e]),b=n.useCallback((function(n){var t=u(e.items,n.oldIndex,n.newIndex);e.onUpdate(t)}),[e]);return t.createElement("div",{"data-test-id":"tag-editor-container"},t.createElement(s.TextInput,{testId:"tag-editor-input",className:p.input,isDisabled:l,isInvalid:f,type:"text",value:r,placeholder:"Type the value and hit enter",onKeyDown:function(n){r&&13===n.keyCode&&(e.onUpdate([].concat(e.items,[r])),i(""))},onChange:function(e){i(e.target.value)}}),t.createElement(x,{useDragHandle:!0,axis:"xy",distance:10,onSortEnd:function(e){b({oldIndex:e.oldIndex,newIndex:e.newIndex})}},o.map((function(e,n){return t.createElement(g,{label:e,index:n,key:e+n,disabled:l,onRemove:function(){v(n)}})}))),c&&d&&t.createElement(m,{constraints:c,constraintsType:d}))}function b(e){return null===e||0===e.length}function E(e){var t=e.field,i=(t.validations||[]).filter((function(e){return e.size})).map((function(e){return e.size})),l=i.length>0?i[0]:{},o=function(e){if(e)return a(e.min)&&a(e.max)?"min-max":a(e.min)?"min":a(e.max)?"max":void 0}(l);return n.createElement(r.FieldConnector,{field:t,isInitiallyDisabled:e.isInitiallyDisabled,isEmptyValue:b,throttle:0},(function(e){var t=e.setValue;return n.createElement(v,{constraints:l,constraintsType:o,isDisabled:e.disabled,hasError:e.errors.length>0,items:e.value||[],onUpdate:function(e){t(e)}})}))}E.defaultProps={isInitiallyDisabled:!0},exports.TagsEditor=E;
2
2
  //# sourceMappingURL=field-editor-tags.cjs.production.min.js.map
package/dist/field-editor-tags.cjs.production.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-editor-tags.cjs.production.min.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Paragraph } from '@contentful/forma-36-react-components';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Constraint, ConstraintsType } from './types';\n\nconst styles = {\n constraints: css({\n fontStyle: 'italic',\n marginTop: tokens.spacingS,\n color: tokens.gray600,\n }),\n};\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Paragraph className={styles.constraints} testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Paragraph>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { TextInput, Pill, Icon } from '@contentful/forma-36-react-components';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle(() => (\n <div className={styles.handle}>\n <Icon icon=\"Drag\" color=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n disabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={styles.pill}\n label={props.label}\n onClose={() => {\n if (!props.disabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n disabled={isDisabled}\n error={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["styles","constraints","css","fontStyle","marginTop","tokens","spacingS","color","gray600","TagsEditorConstraints","props","constraintsType","React","Paragraph","className","testId","min","max","dropContainer","whiteSpace","display","flexWrap","input","marginBottom","spacingM","pill","marginRight","handle","lineHeight","padding","paddingRight","cursor","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","Icon","icon","SortablePill","SortableElement","Pill","label","onClose","disabled","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","isDisabled","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","arrayMove","oldIndex","newIndex","TextInput","error","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","isEmptyTagsValue","length","TagsEditorContainer","field","sizeValidations","validations","validation","size","sizeConstraints","isNumber","getConstraintsType","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","setValue","errors","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"field-editor-tags.cjs.production.min.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Constraint, ConstraintsType } from './types';\n\nimport { Text } from '@contentful/f36-components';\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nimport { Pill, TextInput } from '@contentful/f36-components';\n\nimport { DragIcon } from '@contentful/f36-icons';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle(() => (\n <div className={styles.handle}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n disabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={styles.pill}\n label={props.label}\n onClose={() => {\n if (!props.disabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","handle","lineHeight","padding","paddingRight","cursor","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","DragIcon","variant","SortablePill","SortableElement","Pill","label","onClose","disabled","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","isDisabled","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","arrayMove","oldIndex","newIndex","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","isEmptyTagsValue","length","TagsEditorContainer","field","sizeValidations","validations","validation","size","sizeConstraints","isNumber","getConstraintsType","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","setValue","errors","defaultProps"],"mappings":"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"}
package/dist/field-editor-tags.esm.js CHANGED
@@ -3,28 +3,28 @@ import isNumber from 'lodash-es/isNumber';
3
3
  import { FieldConnector } from '@contentful/field-editor-shared';
4
4
  import noop from 'lodash-es/noop';
5
5
  import { css } from 'emotion';
6
- import tokens from '@contentful/forma-36-tokens';
7
- import { Paragraph, TextInput, Pill, Icon } from '@contentful/forma-36-react-components';
6
+ import tokens from '@contentful/f36-tokens';
7
+ import { Text, TextInput, Pill } from '@contentful/f36-components';
8
8
  import { SortableElement, SortableContainer, SortableHandle } from 'react-sortable-hoc';
9
9
  import arrayMove from 'array-move';
10
+ import { DragIcon } from '@contentful/f36-icons';
10
11
 
11
- var styles = {
12
- constraints: /*#__PURE__*/css({
13
- fontStyle: 'italic',
14
- marginTop: tokens.spacingS,
15
- color: tokens.gray600
16
- })
17
- };
18
12
  function TagsEditorConstraints(props) {
19
13
  var constraintsType = props.constraintsType,
20
14
  constraints = props.constraints;
21
- return React__default.createElement(Paragraph, {
22
- className: styles.constraints,
15
+ return React__default.createElement(Text, {
16
+ as: "p",
17
+ fontColor: "gray600",
18
+ marginBottom: "none",
19
+ marginTop: "spacingS",
20
+ className: css({
21
+ fontStyle: 'italic'
22
+ }),
23
23
  testId: "tag-editor-constraints"
24
24
  }, constraintsType === 'min' && React__default.createElement("span", null, "Requires at least ", constraints.min, " ", constraints.min === 1 ? 'tag' : 'tags'), constraintsType === 'max' && React__default.createElement("span", null, "Requires no more than ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'), constraintsType === 'min-max' && constraints.max !== constraints.min && React__default.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " tags"), constraintsType === 'min-max' && constraints.max === constraints.min && React__default.createElement("span", null, "Requires exactly ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'));
25
25
  }
26
26
 
27
- var styles$1 = {
27
+ var styles = {
28
28
  dropContainer: /*#__PURE__*/css({
29
29
  whiteSpace: 'nowrap',
30
30
  display: 'flex',
@@ -52,16 +52,15 @@ var styles$1 = {
52
52
  };
53
53
  var SortablePillHandle = /*#__PURE__*/SortableHandle(function () {
54
54
  return React__default.createElement("div", {
55
- className: styles$1.handle
56
- }, React__default.createElement(Icon, {
57
- icon: "Drag",
58
- color: "muted"
55
+ className: styles.handle
56
+ }, React__default.createElement(DragIcon, {
57
+ variant: "muted"
59
58
  }));
60
59
  });
61
60
  var SortablePill = /*#__PURE__*/SortableElement(function (props) {
62
61
  return React__default.createElement(Pill, {
63
62
  testId: "tag-editor-pill",
64
- className: styles$1.pill,
63
+ className: styles.pill,
65
64
  label: props.label,
66
65
  onClose: function onClose() {
67
66
  if (!props.disabled) {
@@ -74,7 +73,7 @@ var SortablePill = /*#__PURE__*/SortableElement(function (props) {
74
73
  });
75
74
  var SortableList = /*#__PURE__*/SortableContainer(function (props) {
76
75
  return React__default.createElement("div", {
77
- className: styles$1.dropContainer
76
+ className: styles.dropContainer
78
77
  }, props.children);
79
78
  });
80
79
  function TagsEditor(props) {
@@ -103,9 +102,9 @@ function TagsEditor(props) {
103
102
  "data-test-id": "tag-editor-container"
104
103
  }, React__default.createElement(TextInput, {
105
104
  testId: "tag-editor-input",
106
- className: styles$1.input,
107
- disabled: isDisabled,
108
- error: hasError,
105
+ className: styles.input,
106
+ isDisabled: isDisabled,
107
+ isInvalid: hasError,
109
108
  type: "text",
110
109
  value: pendingValue,
111
110
  placeholder: "Type the value and hit enter",
package/dist/field-editor-tags.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-editor-tags.esm.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Paragraph } from '@contentful/forma-36-react-components';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Constraint, ConstraintsType } from './types';\n\nconst styles = {\n constraints: css({\n fontStyle: 'italic',\n marginTop: tokens.spacingS,\n color: tokens.gray600,\n }),\n};\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Paragraph className={styles.constraints} testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Paragraph>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { TextInput, Pill, Icon } from '@contentful/forma-36-react-components';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle(() => (\n <div className={styles.handle}>\n <Icon icon=\"Drag\" color=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n disabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={styles.pill}\n label={props.label}\n onClose={() => {\n if (!props.disabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n disabled={isDisabled}\n error={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["styles","constraints","css","fontStyle","marginTop","tokens","spacingS","color","gray600","TagsEditorConstraints","props","constraintsType","React","Paragraph","className","testId","min","max","dropContainer","whiteSpace","display","flexWrap","input","marginBottom","spacingM","pill","marginRight","handle","lineHeight","padding","paddingRight","cursor","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","Icon","icon","SortablePill","SortableElement","Pill","label","onClose","disabled","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","isDisabled","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","error","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"field-editor-tags.esm.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Constraint, ConstraintsType } from './types';\n\nimport { Text } from '@contentful/f36-components';\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nimport { Pill, TextInput } from '@contentful/f36-components';\n\nimport { DragIcon } from '@contentful/f36-icons';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle(() => (\n <div className={styles.handle}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n disabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={styles.pill}\n label={props.label}\n onClose={() => {\n if (!props.disabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","handle","lineHeight","padding","paddingRight","cursor","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","DragIcon","variant","SortablePill","SortableElement","Pill","label","onClose","disabled","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","isDisabled","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-tags",
3
- "version": "0.14.3",
3
+ "version": "0.15.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/field-editor-tags.esm.js",
6
6
  "typings": "dist/index.d.ts",
@@ -21,9 +21,10 @@
21
21
  "tsc": "tsc -p ./ --noEmit"
22
22
  },
23
23
  "dependencies": {
24
- "@contentful/field-editor-shared": "^0.23.0",
25
- "@contentful/forma-36-react-components": "^3.93.4",
26
- "@contentful/forma-36-tokens": "^0.11.0",
24
+ "@contentful/f36-components": "beta",
25
+ "@contentful/f36-icons": "beta",
26
+ "@contentful/f36-tokens": "beta",
27
+ "@contentful/field-editor-shared": "^0.26.0",
27
28
  "array-move": "^3.0.0",
28
29
  "emotion": "^10.0.0",
29
30
  "lodash": "^4.17.15",
@@ -31,7 +32,7 @@
31
32
  "react-sortable-hoc": "^2.0.0"
32
33
  },
33
34
  "devDependencies": {
34
- "@contentful/field-editor-test-utils": "^0.17.2"
35
+ "@contentful/field-editor-test-utils": "^0.19.0"
35
36
  },
36
37
  "peerDependencies": {
37
38
  "react": ">=16.8.0"
@@ -46,5 +47,5 @@
46
47
  }
47
48
  }
48
49
  },
49
- "gitHead": "4020000939175ec415639fbc3b7b20e011c2a8a7"
50
+ "gitHead": "f86ba28db3f34cffc0dc2580bf21297542f331c9"
50
51
  }