@contentful/field-editor-tags 1.1.2 → 1.1.5

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.4...@contentful/field-editor-tags@1.1.5) (2022-07-11)
+
+**Note:** Version bump only for package @contentful/field-editor-tags
+
+## [1.1.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.3...@contentful/field-editor-tags@1.1.4) (2022-06-22)
+
+**Note:** Version bump only for package @contentful/field-editor-tags
+
+## [1.1.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.2...@contentful/field-editor-tags@1.1.3) (2022-05-04)
+
+### Bug Fixes
+
+- reflect disabled state on fields ([#1125](https://github.com/contentful/field-editors/issues/1125)) ([01502b9](https://github.com/contentful/field-editors/commit/01502b9d785c5f782b0e5de782d092c439cb690f))
+
 ## [1.1.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.1...@contentful/field-editor-tags@1.1.2) (2022-02-15)
 
 ### Bug Fixes

package/dist/field-editor-tags.cjs.development.js

@@ -45,6 +45,14 @@ var styles = {
     marginRight: tokens.spacingS,
     marginBottom: tokens.spacingS
   }),
+  pillDisabled: /*#__PURE__*/emotion.css({
+    cursor: 'not-allowed !important',
+    button: {
+      cursor: 'not-allowed !important',
+      // instead of changing the @contentful/f36-components package
+      pointerEvents: 'none'
+    }
+  }),
   handle: /*#__PURE__*/emotion.css({
     lineHeight: '1.5rem',
     padding: '0.375rem 0.625rem',
@@ -57,25 +65,31 @@ var styles = {
     }
   })
 };
-var SortablePillHandle = /*#__PURE__*/reactSortableHoc.SortableHandle(function () {
+var SortablePillHandle = /*#__PURE__*/reactSortableHoc.SortableHandle(function (props) {
+  var _cx;
+
   return React__default.createElement("div", {
-    className: styles.handle
+    className: emotion.cx(styles.handle, (_cx = {}, _cx[styles.pillDisabled] = props.isDisabled, _cx))
   }, React__default.createElement(f36Icons.DragIcon, {
     variant: "muted"
   }));
 });
 var SortablePill = /*#__PURE__*/reactSortableHoc.SortableElement(function (props) {
+  var _cx2;
+
   return React__default.createElement(f36Components.Pill, {
     testId: "tag-editor-pill",
-    className: styles.pill,
+    className: emotion.cx(styles.pill, (_cx2 = {}, _cx2[styles.pillDisabled] = props.isSortablePillDisabled, _cx2)),
     label: props.label,
     onClose: function onClose() {
-      if (!props.disabled) {
+      if (!props.isSortablePillDisabled) {
         props.onRemove(props.index);
       }
     },
     onDrag: noop,
-    dragHandleComponent: React__default.createElement(SortablePillHandle, null)
+    dragHandleComponent: React__default.createElement(SortablePillHandle, {
+      isDisabled: props.isSortablePillDisabled
+    })
   });
 });
 var SortableList = /*#__PURE__*/reactSortableHoc.SortableContainer(function (props) {
@@ -142,6 +156,13 @@ function TagsEditor(props) {
       index: index,
       key: item + index,
       disabled: isDisabled,
+
+      /**
+       * `isSortablePillDisabled` is needed as SortableElement
+       * from react-sortable-hoc doesn't pass down the disabled prop.
+       * See: https://github.com/clauderic/react-sortable-hoc/issues/612
+       */
+      isSortablePillDisabled: isDisabled,
       onRemove: function onRemove() {
         removeItem(index);
       }

package/dist/field-editor-tags.cjs.development.js.map

@@ -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 { 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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"}
+{"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, cx } 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  pillDisabled: css({\n    cursor: 'not-allowed !important',\n    button: {\n      cursor: 'not-allowed !important',\n      // instead of changing the @contentful/f36-components package\n      pointerEvents: 'none',\n    },\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((props: { isDisabled: boolean }) => (\n  <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n    <DragIcon variant=\"muted\" />\n  </div>\n));\n\ninterface SortablePillProps {\n  label: string;\n  onRemove: Function;\n  isSortablePillDisabled: boolean;\n  index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n  <Pill\n    testId=\"tag-editor-pill\"\n    className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n    label={props.label}\n    onClose={() => {\n      if (!props.isSortablePillDisabled) {\n        props.onRemove(props.index);\n      }\n    }}\n    onDrag={noop}\n    dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\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              /**\n               * `isSortablePillDisabled` is needed as SortableElement\n               * from react-sortable-hoc doesn't pass down the disabled prop.\n               * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n               */\n              isSortablePillDisabled={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","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","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","disabled","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

@@ -1,2 +1,2 @@
-"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;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=e(require("lodash/isNumber")),i=require("@contentful/field-editor-shared"),r=e(require("lodash/noop")),l=require("emotion"),o=e(require("@contentful/f36-tokens")),s=require("@contentful/f36-components"),c=require("react-sortable-hoc"),d=e(require("array-move")),u=require("@contentful/f36-icons");function m(e){var t=e.constraintsType,a=e.constraints;return n.createElement(s.Text,{as:"p",fontColor:"gray600",marginBottom:"none",marginTop:"spacingS",className:l.css({fontStyle:"italic"}),testId:"tag-editor-constraints"},"min"===t&&n.createElement("span",null,"Requires at least ",a.min," ",1===a.min?"tag":"tags"),"max"===t&&n.createElement("span",null,"Requires no more than ",a.max," ",1===a.max?"tag":"tags"),"min-max"===t&&a.max!==a.min&&n.createElement("span",null,"Requires between ",a.min," and ",a.max," tags"),"min-max"===t&&a.max===a.min&&n.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}),pillDisabled:l.css({cursor:"not-allowed !important",button:{cursor:"not-allowed !important",pointerEvents:"none"}}),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(e){var t;return n.createElement("div",{className:l.cx(p.handle,(t={},t[p.pillDisabled]=e.isDisabled,t))},n.createElement(u.DragIcon,{variant:"muted"}))})),g=c.SortableElement((function(e){var t;return n.createElement(s.Pill,{testId:"tag-editor-pill",className:l.cx(p.pill,(t={},t[p.pillDisabled]=e.isSortablePillDisabled,t)),label:e.label,onClose:function(){e.isSortablePillDisabled||e.onRemove(e.index)},onDrag:r,dragHandleComponent:n.createElement(f,{isDisabled:e.isSortablePillDisabled})})})),b=c.SortableContainer((function(e){return n.createElement("div",{className:p.dropContainer},e.children)}));function x(e){var a=t.useState(""),i=a[0],r=a[1],l=e.isDisabled,o=e.items,c=e.constraints,u=e.constraintsType,f=e.hasError,x=t.useCallback((function(t){var n=e.items.filter((function(e,n){return t!==n}));e.onUpdate(n)}),[e]),v=t.useCallback((function(t){var n=d(e.items,t.oldIndex,t.newIndex);e.onUpdate(n)}),[e]);return n.createElement("div",{"data-test-id":"tag-editor-container"},n.createElement(s.TextInput,{testId:"tag-editor-input",className:p.input,isDisabled:l,isInvalid:f,type:"text",value:i,placeholder:"Type the value and hit enter",onKeyDown:function(t){i&&13===t.keyCode&&(e.onUpdate([].concat(e.items,[i])),r(""))},onChange:function(e){r(e.target.value)}}),n.createElement(b,{useDragHandle:!0,axis:"xy",distance:10,onSortEnd:function(e){v({oldIndex:e.oldIndex,newIndex:e.newIndex})}},o.map((function(e,t){return n.createElement(g,{label:e,index:t,key:e+t,disabled:l,isSortablePillDisabled:l,onRemove:function(){x(t)}})}))),c&&u&&n.createElement(m,{constraints:c,constraintsType:u}))}function v(e){return null===e||0===e.length}function E(e){var n=e.field,r=(n.validations||[]).filter((function(e){return e.size})).map((function(e){return e.size})),l=r.length>0?r[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 t.createElement(i.FieldConnector,{field:n,isInitiallyDisabled:e.isInitiallyDisabled,isEmptyValue:v,throttle:0},(function(e){var n=e.setValue;return t.createElement(x,{constraints:l,constraintsType:o,isDisabled:e.disabled,hasError:e.errors.length>0,items:e.value||[],onUpdate:function(e){n(e)}})}))}E.defaultProps={isInitiallyDisabled:!0},exports.TagsEditor=E;
 //# sourceMappingURL=field-editor-tags.cjs.production.min.js.map

package/dist/field-editor-tags.cjs.production.min.js.map

@@ -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 { 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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"}
+{"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, cx } 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  pillDisabled: css({\n    cursor: 'not-allowed !important',\n    button: {\n      cursor: 'not-allowed !important',\n      // instead of changing the @contentful/f36-components package\n      pointerEvents: 'none',\n    },\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((props: { isDisabled: boolean }) => (\n  <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n    <DragIcon variant=\"muted\" />\n  </div>\n));\n\ninterface SortablePillProps {\n  label: string;\n  onRemove: Function;\n  isSortablePillDisabled: boolean;\n  index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n  <Pill\n    testId=\"tag-editor-pill\"\n    className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n    label={props.label}\n    onClose={() => {\n      if (!props.isSortablePillDisabled) {\n        props.onRemove(props.index);\n      }\n    }}\n    onDrag={noop}\n    dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\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              /**\n               * `isSortablePillDisabled` is needed as SortableElement\n               * from react-sortable-hoc doesn't pass down the disabled prop.\n               * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n               */\n              isSortablePillDisabled={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","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","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","disabled","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

@@ -2,7 +2,7 @@ import React__default, { useState, useCallback, createElement } from 'react';
 import isNumber from 'lodash-es/isNumber';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import noop from 'lodash-es/noop';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 import { Text, TextInput, Pill } from '@contentful/f36-components';
 import { SortableElement, SortableContainer, SortableHandle } from 'react-sortable-hoc';
@@ -38,6 +38,14 @@ var styles = {
     marginRight: tokens.spacingS,
     marginBottom: tokens.spacingS
   }),
+  pillDisabled: /*#__PURE__*/css({
+    cursor: 'not-allowed !important',
+    button: {
+      cursor: 'not-allowed !important',
+      // instead of changing the @contentful/f36-components package
+      pointerEvents: 'none'
+    }
+  }),
   handle: /*#__PURE__*/css({
     lineHeight: '1.5rem',
     padding: '0.375rem 0.625rem',
@@ -50,25 +58,31 @@ var styles = {
     }
   })
 };
-var SortablePillHandle = /*#__PURE__*/SortableHandle(function () {
+var SortablePillHandle = /*#__PURE__*/SortableHandle(function (props) {
+  var _cx;
+
   return React__default.createElement("div", {
-    className: styles.handle
+    className: cx(styles.handle, (_cx = {}, _cx[styles.pillDisabled] = props.isDisabled, _cx))
   }, React__default.createElement(DragIcon, {
     variant: "muted"
   }));
 });
 var SortablePill = /*#__PURE__*/SortableElement(function (props) {
+  var _cx2;
+
   return React__default.createElement(Pill, {
     testId: "tag-editor-pill",
-    className: styles.pill,
+    className: cx(styles.pill, (_cx2 = {}, _cx2[styles.pillDisabled] = props.isSortablePillDisabled, _cx2)),
     label: props.label,
     onClose: function onClose() {
-      if (!props.disabled) {
+      if (!props.isSortablePillDisabled) {
         props.onRemove(props.index);
       }
     },
     onDrag: noop,
-    dragHandleComponent: React__default.createElement(SortablePillHandle, null)
+    dragHandleComponent: React__default.createElement(SortablePillHandle, {
+      isDisabled: props.isSortablePillDisabled
+    })
   });
 });
 var SortableList = /*#__PURE__*/SortableContainer(function (props) {
@@ -135,6 +149,13 @@ function TagsEditor(props) {
       index: index,
       key: item + index,
       disabled: isDisabled,
+
+      /**
+       * `isSortablePillDisabled` is needed as SortableElement
+       * from react-sortable-hoc doesn't pass down the disabled prop.
+       * See: https://github.com/clauderic/react-sortable-hoc/issues/612
+       */
+      isSortablePillDisabled: isDisabled,
       onRemove: function onRemove() {
         removeItem(index);
       }

package/dist/field-editor-tags.esm.js.map

@@ -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 { 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":";;;;;;;;;;;SAWgBA,sBAAsBC;AACpC,MAAQC,eAAR,GAAyCD,KAAzC,CAAQC,eAAR;AAAA,MAAyBC,WAAzB,GAAyCF,KAAzC,CAAyBE,WAAzB;AACA,SACEC,4BAAA,CAACC,IAAD;AACEC,IAAAA,EAAE,EAAC;AACHC,IAAAA,SAAS,EAAC;AACVC,IAAAA,YAAY,EAAC;AACbC,IAAAA,SAAS,EAAC;AACVC,IAAAA,SAAS,EAAEC,GAAG,CAAC;AACbC,MAAAA,SAAS,EAAE;AADE,KAAD;AAGdC,IAAAA,MAAM,EAAC;GART,EASGX,eAAe,KAAK,KAApB,IACCE,4BAAA,OAAA,MAAA,sBAAA,EACqBD,WAAW,CAACW,GADjC,KAAA,EACuCX,WAAW,CAACW,GAAZ,KAAoB,CAApB,GAAwB,KAAxB,GAAgC,MADvE,CAVJ,EAcGZ,eAAe,KAAK,KAApB,IACCE,4BAAA,OAAA,MAAA,0BAAA,EACyBD,WAAW,CAACY,GADrC,KAAA,EAC2CZ,WAAW,CAACY,GAAZ,KAAoB,CAApB,GAAwB,KAAxB,GAAgC,MAD3E,CAfJ,EAmBGb,eAAe,KAAK,SAApB,IAAiCC,WAAW,CAACY,GAAZ,KAAoBZ,WAAW,CAACW,GAAjE,IACCV,4BAAA,OAAA,MAAA,qBAAA,EACoBD,WAAW,CAACW,GADhC,SAAA,EAC0CX,WAAW,CAACY,GADtD,SAAA,CApBJ,EAwBGb,eAAe,KAAK,SAApB,IAAiCC,WAAW,CAACY,GAAZ,KAAoBZ,WAAW,CAACW,GAAjE,IACCV,4BAAA,OAAA,MAAA,qBAAA,EACoBD,WAAW,CAACY,GADhC,KAAA,EACsCZ,WAAW,CAACY,GAAZ,KAAoB,CAApB,GAAwB,KAAxB,GAAgC,MADtE,CAzBJ,CADF;AAgCD;;ACvBD,IAAMC,MAAM,GAAG;AACbC,EAAAA,aAAa,eAAEN,GAAG,CAAC;AACjBO,IAAAA,UAAU,EAAE,QADK;AAEjBC,IAAAA,OAAO,EAAE,MAFQ;AAGjBC,IAAAA,QAAQ,EAAE;AAHO,GAAD,CADL;AAMbC,EAAAA,KAAK,eAAEV,GAAG,CAAC;AACTF,IAAAA,SAAS,EAAEa,MAAM,CAACC,QADT;AAETf,IAAAA,YAAY,EAAEc,MAAM,CAACE;AAFZ,GAAD,CANG;AAUbC,EAAAA,IAAI,eAAEd,GAAG,CAAC;AACRe,IAAAA,WAAW,EAAEJ,MAAM,CAACC,QADZ;AAERf,IAAAA,YAAY,EAAEc,MAAM,CAACC;AAFb,GAAD,CAVI;AAcbI,EAAAA,MAAM,eAAEhB,GAAG,CAAC;AACViB,IAAAA,UAAU,EAAE,QADF;AAEVC,IAAAA,OAAO,EAAE,mBAFC;AAGVC,IAAAA,YAAY,EAAE,CAHJ;AAIVC,IAAAA,MAAM,EAAE,MAJE;AAKVC,IAAAA,UAAU,EAAE,MALF;AAMVC,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAEZ,MAAM,CAACa,OADV;AAEHC,MAAAA,aAAa,EAAE;AAFZ;AANK,GAAD;AAdE,CAAf;AA2BA,IAAMC,kBAAkB,gBAAGC,cAAc,CAAC;AAAA,SACxClC,4BAAA,MAAA;AAAKM,IAAAA,SAAS,EAAEM,MAAM,CAACW;GAAvB,EACEvB,4BAAA,CAACmC,QAAD;AAAUC,IAAAA,OAAO,EAAC;GAAlB,CADF,CADwC;AAAA,CAAD,CAAzC;AAaA,IAAMC,YAAY,gBAAGC,eAAe,CAAC,UAACzC,KAAD;AAAA,SACnCG,4BAAA,CAACuC,IAAD;AACE9B,IAAAA,MAAM,EAAC;AACPH,IAAAA,SAAS,EAAEM,MAAM,CAACS;AAClBmB,IAAAA,KAAK,EAAE3C,KAAK,CAAC2C;AACbC,IAAAA,OAAO,EAAE;AACP,UAAI,CAAC5C,KAAK,CAAC6C,QAAX,EAAqB;AACnB7C,QAAAA,KAAK,CAAC8C,QAAN,CAAe9C,KAAK,CAAC+C,KAArB;AACD;AACF;AACDC,IAAAA,MAAM,EAAEC;AACRC,IAAAA,mBAAmB,EAAE/C,4BAAA,CAACiC,kBAAD,MAAA;GAVvB,CADmC;AAAA,CAAD,CAApC;AAmBA,IAAMe,YAAY,gBAAGC,iBAAiB,CAAC,UAACpD,KAAD;AAAA,SACrCG,4BAAA,MAAA;AAAKM,IAAAA,SAAS,EAAEM,MAAM,CAACC;GAAvB,EAAuChB,KAAK,CAACqD,QAA7C,CADqC;AAAA,CAAD,CAAtC;AAIA,SAAgBC,WAAWtD;AACzB,kBAAwCuD,QAAQ,CAAC,EAAD,CAAhD;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEA,MAAQC,UAAR,GAAsE1D,KAAtE,CAAQ0D,UAAR;AAAA,MAAoBC,KAApB,GAAsE3D,KAAtE,CAAoB2D,KAApB;AAAA,MAA2BzD,WAA3B,GAAsEF,KAAtE,CAA2BE,WAA3B;AAAA,MAAwCD,eAAxC,GAAsED,KAAtE,CAAwCC,eAAxC;AAAA,MAAyD2D,QAAzD,GAAsE5D,KAAtE,CAAyD4D,QAAzD;AAEA,MAAMC,UAAU,GAAGC,WAAW,CAC5B,UAACf,KAAD;AACE,QAAMgB,QAAQ,GAAG/D,KAAK,CAAC2D,KAAN,CAAYK,MAAZ,CAAmB,UAACC,CAAD,EAAIC,WAAJ;AAAA,aAAoBnB,KAAK,KAAKmB,WAA9B;AAAA,KAAnB,CAAjB;AACAlE,IAAAA,KAAK,CAACmE,QAAN,CAAeJ,QAAf;AACD,GAJ2B,EAK5B,CAAC/D,KAAD,CAL4B,CAA9B;AAQA,MAAMoE,SAAS,GAAGN,WAAW,CAC3B;QAAGO,gBAAAA;QAAUC,gBAAAA;AACX,QAAMP,QAAQ,GAAGQ,SAAS,CAACvE,KAAK,CAAC2D,KAAP,EAAcU,QAAd,EAAwBC,QAAxB,CAA1B;AACAtE,IAAAA,KAAK,CAACmE,QAAN,CAAeJ,QAAf;AACD,GAJ0B,EAK3B,CAAC/D,KAAD,CAL2B,CAA7B;AAQA,SACEG,4BAAA,MAAA;oBAAkB;GAAlB,EACEA,4BAAA,CAACqE,SAAD;AACE5D,IAAAA,MAAM,EAAC;AACPH,IAAAA,SAAS,EAAEM,MAAM,CAACK;AAClBsC,IAAAA,UAAU,EAAEA;AACZe,IAAAA,SAAS,EAAEb;AACXc,IAAAA,IAAI,EAAC;AACLC,IAAAA,KAAK,EAAEnB;AACPoB,IAAAA,WAAW,EAAC;AACZC,IAAAA,SAAS,EAAE,mBAACC,CAAD;AACT,UAAItB,YAAY,IAAIsB,CAAC,CAACC,OAAF,KAAc,EAAlC,EAAsC;AACpC/E,QAAAA,KAAK,CAACmE,QAAN,WAAmBnE,KAAK,CAAC2D,KAAzB,GAAgCH,YAAhC;AACAC,QAAAA,eAAe,CAAC,EAAD,CAAf;AACD;AACF;AACDuB,IAAAA,QAAQ,EAAE,kBAACF,CAAD;AACRrB,MAAAA,eAAe,CAACqB,CAAC,CAACG,MAAF,CAASN,KAAV,CAAf;AACD;GAhBH,CADF,EAmBExE,4BAAA,CAACgD,YAAD;AACE+B,IAAAA,aAAa;AACbC,IAAAA,IAAI,EAAC;AACLC,IAAAA,QAAQ,EAAE;AACVC,IAAAA,SAAS,EAAE;UAAGhB,iBAAAA;UAAUC,iBAAAA;AACtBF,MAAAA,SAAS,CAAC;AAAEC,QAAAA,QAAQ,EAARA,QAAF;AAAYC,QAAAA,QAAQ,EAARA;AAAZ,OAAD,CAAT;AACD;GANH,EAOGX,KAAK,CAAC2B,GAAN,CAAU,UAACC,IAAD,EAAOxC,KAAP;AACT,WACE5C,4BAAA,CAACqC,YAAD;AACEG,MAAAA,KAAK,EAAE4C;AACPxC,MAAAA,KAAK,EAAEA;AACPyC,MAAAA,GAAG,EAAED,IAAI,GAAGxC;AACZF,MAAAA,QAAQ,EAAEa;AACVZ,MAAAA,QAAQ,EAAE;AACRe,QAAAA,UAAU,CAACd,KAAD,CAAV;AACD;KAPH,CADF;AAWD,GAZA,CAPH,CAnBF,EAwCG7C,WAAW,IAAID,eAAf,IACCE,4BAAA,CAACJ,qBAAD;AAAuBG,IAAAA,WAAW,EAAEA;AAAaD,IAAAA,eAAe,EAAEA;GAAlE,CAzCJ,CADF;AA8CD;;ACrID,SAASwF,gBAAT,CAA0Bd,KAA1B;AACE,SAAOA,KAAK,KAAK,IAAV,IAAkBA,KAAK,CAACe,MAAN,KAAiB,CAA1C;AACD;;AAED,SAASC,kBAAT,CAA4BC,eAA5B;AACE,MAAI,CAACA,eAAL,EAAsB;AACpB,WAAOC,SAAP;AACD;;AACD,MAAIC,QAAQ,CAACF,eAAe,CAAC/E,GAAjB,CAAR,IAAiCiF,QAAQ,CAACF,eAAe,CAAC9E,GAAjB,CAA7C,EAAoE;AAClE,WAAO,SAAP;AACD,GAFD,MAEO,IAAIgF,QAAQ,CAACF,eAAe,CAAC/E,GAAjB,CAAZ,EAAmC;AACxC,WAAO,KAAP;AACD,GAFM,MAEA,IAAIiF,QAAQ,CAACF,eAAe,CAAC9E,GAAjB,CAAZ,EAAmC;AACxC,WAAO,KAAP;AACD,GAFM,MAEA;AACL,WAAO+E,SAAP;AACD;AACF;;AAED,SAAgBE,oBAAoB/F;AAClC,MAAMgG,KAAK,GAAGhG,KAAK,CAACgG,KAApB;AAEA,MAAMC,WAAW,GAAGD,KAAK,CAACC,WAAN,IAAqB,EAAzC;AAEA,MAAMC,eAAe,GAAID,WAAuC,CAC7DjC,MADsB,CACf,UAACmC,UAAD;AAAA,WAAgBA,UAAU,CAACC,IAA3B;AAAA,GADe,EAEtBd,GAFsB,CAElB,UAACa,UAAD;AAAA,WAAgBA,UAAU,CAACC,IAA3B;AAAA,GAFkB,CAAzB;AAIA,MAAMlG,WAAW,GAAGgG,eAAe,CAACR,MAAhB,GAAyB,CAAzB,GAA6BQ,eAAe,CAAC,CAAD,CAA5C,GAAkD,EAAtE;AAEA,MAAMjG,eAAe,GAAG0F,kBAAkB,CAACzF,WAAD,CAA1C;AAEA,SACEC,aAAA,CAACkG,cAAD;AACEL,IAAAA,KAAK,EAAEA;AACPM,IAAAA,mBAAmB,EAAEtG,KAAK,CAACsG;AAC3BC,IAAAA,YAAY,EAAEd;AACde,IAAAA,QAAQ,EAAE;GAJZ,EAKG;QAAG3D,gBAAAA;QAAU8B,aAAAA;QAAO8B,cAAAA;QAAQC,gBAAAA;AAC3B,QAAM/C,KAAK,GAAGgB,KAAK,IAAI,EAAvB;AACA,WACExE,aAAA,CAACmD,UAAD;AACEpD,MAAAA,WAAW,EAAEA;AACbD,MAAAA,eAAe,EAAEA;AACjByD,MAAAA,UAAU,EAAEb;AACZe,MAAAA,QAAQ,EAAE6C,MAAM,CAACf,MAAP,GAAgB;AAC1B/B,MAAAA,KAAK,EAAEA;AACPQ,MAAAA,QAAQ,EAAE,kBAACR,KAAD;AACR+C,QAAAA,QAAQ,CAAC/C,KAAD,CAAR;AACD;KARH,CADF;AAYD,GAnBH,CADF;AAuBD;AAEDoC,mBAAmB,CAACY,YAApB,GAAmC;AACjCL,EAAAA,mBAAmB,EAAE;AADY,CAAnC;;IC1EahD,YAAU,GAAGyC,mBAAnB;;;;"}
+{"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, cx } 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  pillDisabled: css({\n    cursor: 'not-allowed !important',\n    button: {\n      cursor: 'not-allowed !important',\n      // instead of changing the @contentful/f36-components package\n      pointerEvents: 'none',\n    },\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((props: { isDisabled: boolean }) => (\n  <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n    <DragIcon variant=\"muted\" />\n  </div>\n));\n\ninterface SortablePillProps {\n  label: string;\n  onRemove: Function;\n  isSortablePillDisabled: boolean;\n  index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n  <Pill\n    testId=\"tag-editor-pill\"\n    className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n    label={props.label}\n    onClose={() => {\n      if (!props.isSortablePillDisabled) {\n        props.onRemove(props.index);\n      }\n    }}\n    onDrag={noop}\n    dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\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              /**\n               * `isSortablePillDisabled` is needed as SortableElement\n               * from react-sortable-hoc doesn't pass down the disabled prop.\n               * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n               */\n              isSortablePillDisabled={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","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","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","disabled","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

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-tags",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "main": "dist/index.js",
   "module": "dist/field-editor-tags.esm.js",
   "typings": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-icons": "^4.1.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.1.2",
+    "@contentful/field-editor-shared": "^1.1.3",
     "array-move": "^3.0.0",
     "emotion": "^10.0.0",
     "lodash": "^4.17.15",
@@ -32,7 +32,7 @@
     "react-sortable-hoc": "^2.0.0"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.1.2"
+    "@contentful/field-editor-test-utils": "^1.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -47,5 +47,5 @@
       }
     }
   },
-  "gitHead": "de8be92c698f4fd7348e79325f39ea1525439b1e"
+  "gitHead": "6cee7fea6ac7d0f8cf1c6689ad8c95fc5814d85e"
 }