@entur/chip 0.4.24 → 0.5.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.2](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.5.1...@entur/chip@0.5.2) (2022-04-19)
+
+**Note:** Version bump only for package @entur/chip
+
+## [0.5.1](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.5.0...@entur/chip@0.5.1) (2022-03-17)
+
+### Bug Fixes
+
+- **ChoiceChip:** add -webkit fallback for Safari ([d19f8c3](https://bitbucket.org/enturas/design-system/commits/d19f8c34b401676283ff5fbc3b10ec0a1f04d3b8))
+
+# [0.5.0](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.24...@entur/chip@0.5.0) (2022-03-14)
+
+### Features
+
+- **action chip:** add loading state to action chip ([290e709](https://bitbucket.org/enturas/design-system/commits/290e709baef2c7513fc3b85e834fabb34697842e))
+
 ## [0.4.24](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.23...@entur/chip@0.4.24) (2022-03-01)
 
 **Note:** Version bump only for package @entur/chip

package/dist/ActionChip.d.ts

@@ -6,5 +6,9 @@ export declare type ActionChipProps = {
     children: React.ReactNode;
     /** Ekstra klassenavn */
     className?: string;
+    /** Om chip-en er opptatt, f.eks med å oppdatere informasjon
+     * @default false
+     */
+    loading?: boolean;
 } & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-export declare const ActionChip: React.ForwardRefExoticComponent<Pick<ActionChipProps, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ActionChip: React.ForwardRefExoticComponent<Pick<ActionChipProps, "loading" | "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;

package/dist/chip.cjs.development.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var utils = require('@entur/utils');
 var React = require('react');
 var classNames = require('classnames');
+var loader = require('@entur/loader');
 var icons = require('@entur/icons');
 var form = require('@entur/form');
 
@@ -99,10 +100,12 @@ var ChoiceChip = /*#__PURE__*/React__default["default"].forwardRef(function (_re
   }, children));
 });
 
-var _excluded$3 = ["children", "className"];
+var _excluded$3 = ["children", "className", "loading"];
 var ActionChip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var childrenArray = React__default["default"].Children.toArray(children);
@@ -115,7 +118,9 @@ var ActionChip = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     }, className),
     ref: ref,
     type: "button"
-  }, rest), children);
+  }, rest), loading ? React__default["default"].createElement(loader.LoadingDots, {
+    className: "eds-action-chip__loading-dots"
+  }) : children);
 });
 
 var _excluded$2 = ["children", "className", "onClose"];

package/dist/chip.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs.development.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/ChoiceChipGroup.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  ({ children, className, ...rest }, ref: React.Ref<HTMLButtonElement>) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    return (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(() => ({ name, value, onChange }), [\n    name,\n    value,\n    onChange,\n  ]);\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","useChoiceChipGroupContext","context","useContext","Error","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","hasLeadingIcon","length","hasTrailingIcon","classList","cx","name","selectedValue","onChange","type","checked","ActionChip","classNames","TagChip","onClose","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"chip.cjs.development.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/ChoiceChipGroup.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { LoadingDots } from '@entur/loader';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om chip-en er opptatt, f.eks med å oppdatere informasjon\n   * @default false\n   */\n  loading?: boolean;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    { children, className, loading = false, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    return (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-action-chip__loading-dots\" />\n        ) : (\n          children\n        )}\n      </button>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(() => ({ name, value, onChange }), [\n    name,\n    value,\n    onChange,\n  ]);\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","useChoiceChipGroupContext","context","useContext","Error","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","hasLeadingIcon","length","hasTrailingIcon","classList","cx","name","selectedValue","onChange","type","checked","ActionChip","loading","classNames","LoadingDots","TagChip","onClose","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}

package/dist/chip.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("classnames"),l=require("@entur/icons"),n=require("@entur/form");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(t),c=r(a);function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},s.apply(this,arguments)}function u(e,t){if(null==e)return{};var a,l,n={},r=Object.keys(e);for(l=0;l<r.length;l++)t.indexOf(a=r[l])>=0||(n[a]=e[a]);return n}var d=i.default.createContext(null),o=d.Provider,f=["className","children","value","disabled","style"],h=i.default.forwardRef((function(e,t){var a=e.className,l=e.children,n=e.value,r=e.disabled,o=void 0!==r&&r,h=e.style,p=u(e,f),m=i.default.Children.toArray(l),v=c.default(a,"eds-chip",{"eds-chip--disabled":o,"eds-chip--leading-icon":m.length>1&&"string"!=typeof m[0],"eds-chip--trailing-icon":m.length>1&&"string"!=typeof m[m.length-1]}),g=function(){var e=i.default.useContext(d);if(!e)throw new Error("You need to wrap your ChoiceChips in a ChoiceChipGroup-component");return e}();return i.default.createElement("label",{className:"eds-choice-chip",style:h},i.default.createElement("input",s({className:"eds-choice-chip__input",type:"radio",name:g.name,ref:t,value:n,disabled:o,checked:g.value===n,onChange:g.onChange},p)),i.default.createElement("div",{className:v},l))})),p=["children","className"],m=i.default.forwardRef((function(e,t){var a=e.children,l=e.className,n=u(e,p),r=i.default.Children.toArray(a);return i.default.createElement("button",s({className:c.default("eds-chip","eds-action-chip",{"eds-chip--leading-icon":r.length>1&&"string"!=typeof r[0],"eds-chip--trailing-icon":r.length>1&&"string"!=typeof r[r.length-1]},l),ref:t,type:"button"},n),a)})),v=["children","className","onClose"],g=i.default.forwardRef((function(e,t){var a=e.children,n=e.className,r=e.onClose,d=u(e,v);return i.default.createElement("div",s({className:c.default("eds-chip","eds-tag-chip",n)},d),a,i.default.createElement("button",{className:"eds-tag-chip__close-button",type:"button",onClick:r,ref:t},i.default.createElement(l.CloseIcon,null)))})),b=["className","children","value","disabled","name","style"],y=i.default.forwardRef((function(e,t){var a=e.className,l=e.children,n=e.value,r=e.disabled,d=void 0!==r&&r,o=e.name,f=e.style,h=u(e,b),p=c.default(a,"eds-chip","eds-filter-chip");return i.default.createElement("label",{className:p,style:f},i.default.createElement("input",s({className:"eds-filter-chip__input",type:"checkbox",name:o,ref:t,value:n,disabled:d},h)),i.default.createElement("span",{className:"eds-filter-chip__icon"},i.default.createElement(C,null)),l)})),C=function(){return i.default.createElement("svg",{className:"eds-filter-chip-icon",width:"11px",height:"9px",viewBox:"6 11 37 33"},i.default.createElement("path",{className:"eds-filter-chip-icon__path",d:"M14.1 27.2l7.1 7.2 14.6-14.8",fill:"none"}))},N=["name","value","children","onChange","label"];e.warnAboutMissingStyles("chip","form"),exports.ActionChip=m,exports.ChoiceChip=h,exports.ChoiceChipGroup=function(e){var t=e.name,a=e.value,l=e.children,r=e.onChange,c=e.label,d=u(e,N),f=i.default.useMemo((function(){return{name:t,value:a,onChange:r}}),[t,a,r]);return i.default.createElement(o,{value:f},i.default.createElement(n.Fieldset,s({className:"eds-choice-chips-group",label:c},d),l))},exports.FilterChip=y,exports.TagChip=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("classnames"),l=require("@entur/loader"),n=require("@entur/icons"),r=require("@entur/form");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=i(t),s=i(a);function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},d.apply(this,arguments)}function o(e,t){if(null==e)return{};var a,l,n={},r=Object.keys(e);for(l=0;l<r.length;l++)t.indexOf(a=r[l])>=0||(n[a]=e[a]);return n}var u=c.default.createContext(null),f=u.Provider,h=["className","children","value","disabled","style"],p=c.default.forwardRef((function(e,t){var a=e.className,l=e.children,n=e.value,r=e.disabled,i=void 0!==r&&r,f=e.style,p=o(e,h),m=c.default.Children.toArray(l),g=s.default(a,"eds-chip",{"eds-chip--disabled":i,"eds-chip--leading-icon":m.length>1&&"string"!=typeof m[0],"eds-chip--trailing-icon":m.length>1&&"string"!=typeof m[m.length-1]}),v=function(){var e=c.default.useContext(u);if(!e)throw new Error("You need to wrap your ChoiceChips in a ChoiceChipGroup-component");return e}();return c.default.createElement("label",{className:"eds-choice-chip",style:f},c.default.createElement("input",d({className:"eds-choice-chip__input",type:"radio",name:v.name,ref:t,value:n,disabled:i,checked:v.value===n,onChange:v.onChange},p)),c.default.createElement("div",{className:g},l))})),m=["children","className","loading"],g=c.default.forwardRef((function(e,t){var a=e.children,n=e.className,r=e.loading,i=void 0!==r&&r,u=o(e,m),f=c.default.Children.toArray(a);return c.default.createElement("button",d({className:s.default("eds-chip","eds-action-chip",{"eds-chip--leading-icon":f.length>1&&"string"!=typeof f[0],"eds-chip--trailing-icon":f.length>1&&"string"!=typeof f[f.length-1]},n),ref:t,type:"button"},u),i?c.default.createElement(l.LoadingDots,{className:"eds-action-chip__loading-dots"}):a)})),v=["children","className","onClose"],b=c.default.forwardRef((function(e,t){var a=e.children,l=e.className,r=e.onClose,i=o(e,v);return c.default.createElement("div",d({className:s.default("eds-chip","eds-tag-chip",l)},i),a,c.default.createElement("button",{className:"eds-tag-chip__close-button",type:"button",onClick:r,ref:t},c.default.createElement(n.CloseIcon,null)))})),y=["className","children","value","disabled","name","style"],C=c.default.forwardRef((function(e,t){var a=e.className,l=e.children,n=e.value,r=e.disabled,i=void 0!==r&&r,u=e.name,f=e.style,h=o(e,y),p=s.default(a,"eds-chip","eds-filter-chip");return c.default.createElement("label",{className:p,style:f},c.default.createElement("input",d({className:"eds-filter-chip__input",type:"checkbox",name:u,ref:t,value:n,disabled:i},h)),c.default.createElement("span",{className:"eds-filter-chip__icon"},c.default.createElement(N,null)),l)})),N=function(){return c.default.createElement("svg",{className:"eds-filter-chip-icon",width:"11px",height:"9px",viewBox:"6 11 37 33"},c.default.createElement("path",{className:"eds-filter-chip-icon__path",d:"M14.1 27.2l7.1 7.2 14.6-14.8",fill:"none"}))},E=["name","value","children","onChange","label"];e.warnAboutMissingStyles("chip","form"),exports.ActionChip=g,exports.ChoiceChip=p,exports.ChoiceChipGroup=function(e){var t=e.name,a=e.value,l=e.children,n=e.onChange,i=e.label,s=o(e,E),u=c.default.useMemo((function(){return{name:t,value:a,onChange:n}}),[t,a,n]);return c.default.createElement(f,{value:u},c.default.createElement(r.Fieldset,d({className:"eds-choice-chips-group",label:i},s),l))},exports.FilterChip=C,exports.TagChip=b;
 //# sourceMappingURL=chip.cjs.production.min.js.map

package/dist/chip.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs.production.min.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/index.tsx","../src/ChoiceChipGroup.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  ({ children, className, ...rest }, ref: React.Ref<HTMLButtonElement>) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    return (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(() => ({ name, value, onChange }), [\n    name,\n    value,\n    onChange,\n  ]);\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","classList","cx","length","context","useContext","Error","useChoiceChipGroupContext","type","name","checked","onChange","ActionChip","classNames","TagChip","onClose","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","warnAboutMissingStyles","label","contextValue","useMemo","Fieldset"],"mappings":"8mBAQA,IAAMA,EACJC,UAAMC,cAAkD,MAE7CC,EAAiCH,EAAuBI,+DCcxDC,EAAaJ,UAAMK,YAC9B,WAEEC,OADEC,IAAAA,UAAWC,IAAAA,SAAUC,IAAAA,UAAOC,SAAAA,gBAAkBC,IAAAA,MAAUC,SAGpDC,EAAgBb,UAAMc,SAASC,QAAQP,GAOvCQ,EAAYC,UAAGV,EAAW,WAAY,sBACpBG,2BANtBG,EAAcK,OAAS,GAAiC,iBAArBL,EAAc,6BAEjDA,EAAcK,OAAS,GAC4B,iBAA5CL,EAAcA,EAAcK,OAAS,ODrBhD,eACQC,EAAUnB,UAAMoB,WAAWrB,OAC5BoB,QACG,IAAIE,MACR,2EAGGF,ECyBHG,UAEFtB,iCAAOO,UAAU,kBAAkBI,MAAOA,GACxCX,mCACEO,UAAU,yBACVgB,KAAK,QACLC,OATJA,KAUIlB,IAAKA,EACLG,MAAOA,EACPC,SAAUA,EACVe,UAZJhB,QAY+BA,EAC3BiB,WAZJA,UAaQd,IAENZ,+BAAKO,UAAWS,GAAYR,kCC7CvBmB,EAAa3B,UAAMK,YAC9B,WAAmCC,OAAhCE,IAAAA,SAAUD,IAAAA,UAAcK,SACnBC,EAAgBb,UAAMc,SAASC,QAAQP,UAQ3CR,oCACEO,UAAWqB,UACT,WACA,kBACA,0BAVJf,EAAcK,OAAS,GAAiC,iBAArBL,EAAc,6BAEjDA,EAAcK,OAAS,GAC4B,iBAA5CL,EAAcA,EAAcK,OAAS,IAWxCX,GAEFD,IAAKA,EACLiB,KAAK,UACDX,GAEHJ,2CCxBIqB,EAAU7B,UAAMK,YAC3B,WAEEC,OADEE,IAAAA,SAAUD,IAAAA,UAAWuB,IAAAA,QAAYlB,gBAIjCZ,iCACEO,UAAWqB,UAAW,WAAY,eAAgBrB,IAC9CK,GAEHJ,EACDR,kCACEO,UAAU,6BACVgB,KAAK,SACLQ,QAASD,EACTxB,IAAKA,GAELN,wBAACgC,oFClBEC,EAAajC,UAAMK,YAC9B,WAEEC,OADEC,IAAAA,UAAWC,IAAAA,SAAUC,IAAAA,UAAOC,SAAAA,gBAAkBc,IAAAA,KAAMb,IAAAA,MAAUC,SAG1DI,EAAYC,UAAGV,EAAW,WAAY,0BAG1CP,iCAAOO,UAAWS,EAAWL,MAAOA,GAClCX,mCACEO,UAAU,yBACVgB,KAAK,WACLC,KAAMA,EACNlB,IAAKA,EACLG,MAAOA,EACPC,SAAUA,GACNE,IAENZ,gCAAMO,UAAU,yBACdP,wBAACkC,SAEF1B,MAMH0B,EAAyB,kBAE3BlC,+BACEO,UAAU,uBACV4B,MAAM,OACNC,OAAO,MACPC,QAAQ,cAERrC,gCACEO,UAAU,6BACV+B,EAAE,+BACFC,KAAK,4DCjDbC,yBAAuB,OAAQ,0ECcgC,gBAC7DhB,IAAAA,KACAf,IAAAA,MACAD,IAAAA,SACAkB,IAAAA,SACAe,IAAAA,MACG7B,SAEG8B,EAAe1C,UAAM2C,SAAQ,iBAAO,CAAEnB,KAAAA,EAAMf,MAAAA,EAAOiB,SAAAA,KAAa,CACpEF,EACAf,EACAiB,WAGA1B,wBAACE,GAA+BO,MAAOiC,GACrC1C,wBAAC4C,cAASrC,UAAU,yBAAyBkC,MAAOA,GAAW7B,GAC5DJ"}
+{"version":3,"file":"chip.cjs.production.min.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/index.tsx","../src/ChoiceChipGroup.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { LoadingDots } from '@entur/loader';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om chip-en er opptatt, f.eks med å oppdatere informasjon\n   * @default false\n   */\n  loading?: boolean;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    { children, className, loading = false, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    return (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-action-chip__loading-dots\" />\n        ) : (\n          children\n        )}\n      </button>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(() => ({ name, value, onChange }), [\n    name,\n    value,\n    onChange,\n  ]);\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","classList","cx","length","context","useContext","Error","useChoiceChipGroupContext","type","name","checked","onChange","ActionChip","loading","classNames","LoadingDots","TagChip","onClose","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","warnAboutMissingStyles","label","contextValue","useMemo","Fieldset"],"mappings":"yoBAQA,IAAMA,EACJC,UAAMC,cAAkD,MAE7CC,EAAiCH,EAAuBI,+DCcxDC,EAAaJ,UAAMK,YAC9B,WAEEC,OADEC,IAAAA,UAAWC,IAAAA,SAAUC,IAAAA,UAAOC,SAAAA,gBAAkBC,IAAAA,MAAUC,SAGpDC,EAAgBb,UAAMc,SAASC,QAAQP,GAOvCQ,EAAYC,UAAGV,EAAW,WAAY,sBACpBG,2BANtBG,EAAcK,OAAS,GAAiC,iBAArBL,EAAc,6BAEjDA,EAAcK,OAAS,GAC4B,iBAA5CL,EAAcA,EAAcK,OAAS,ODrBhD,eACQC,EAAUnB,UAAMoB,WAAWrB,OAC5BoB,QACG,IAAIE,MACR,2EAGGF,ECyBHG,UAEFtB,iCAAOO,UAAU,kBAAkBI,MAAOA,GACxCX,mCACEO,UAAU,yBACVgB,KAAK,QACLC,OATJA,KAUIlB,IAAKA,EACLG,MAAOA,EACPC,SAAUA,EACVe,UAZJhB,QAY+BA,EAC3BiB,WAZJA,UAaQd,IAENZ,+BAAKO,UAAWS,GAAYR,4CCxCvBmB,EAAa3B,UAAMK,YAC9B,WAEEC,OADEE,IAAAA,SAAUD,IAAAA,cAAWqB,QAAAA,gBAAoBhB,SAGrCC,EAAgBb,UAAMc,SAASC,QAAQP,UAQ3CR,oCACEO,UAAWsB,UACT,WACA,kBACA,0BAVJhB,EAAcK,OAAS,GAAiC,iBAArBL,EAAc,6BAEjDA,EAAcK,OAAS,GAC4B,iBAA5CL,EAAcA,EAAcK,OAAS,IAWxCX,GAEFD,IAAKA,EACLiB,KAAK,UACDX,GAEHgB,EACC5B,wBAAC8B,eAAYvB,UAAU,kCAEvBC,2CCnCGuB,EAAU/B,UAAMK,YAC3B,WAEEC,OADEE,IAAAA,SAAUD,IAAAA,UAAWyB,IAAAA,QAAYpB,gBAIjCZ,iCACEO,UAAWsB,UAAW,WAAY,eAAgBtB,IAC9CK,GAEHJ,EACDR,kCACEO,UAAU,6BACVgB,KAAK,SACLU,QAASD,EACT1B,IAAKA,GAELN,wBAACkC,oFClBEC,EAAanC,UAAMK,YAC9B,WAEEC,OADEC,IAAAA,UAAWC,IAAAA,SAAUC,IAAAA,UAAOC,SAAAA,gBAAkBc,IAAAA,KAAMb,IAAAA,MAAUC,SAG1DI,EAAYC,UAAGV,EAAW,WAAY,0BAG1CP,iCAAOO,UAAWS,EAAWL,MAAOA,GAClCX,mCACEO,UAAU,yBACVgB,KAAK,WACLC,KAAMA,EACNlB,IAAKA,EACLG,MAAOA,EACPC,SAAUA,GACNE,IAENZ,gCAAMO,UAAU,yBACdP,wBAACoC,SAEF5B,MAMH4B,EAAyB,kBAE3BpC,+BACEO,UAAU,uBACV8B,MAAM,OACNC,OAAO,MACPC,QAAQ,cAERvC,gCACEO,UAAU,6BACViC,EAAE,+BACFC,KAAK,4DCjDbC,yBAAuB,OAAQ,0ECcgC,gBAC7DlB,IAAAA,KACAf,IAAAA,MACAD,IAAAA,SACAkB,IAAAA,SACAiB,IAAAA,MACG/B,SAEGgC,EAAe5C,UAAM6C,SAAQ,iBAAO,CAAErB,KAAAA,EAAMf,MAAAA,EAAOiB,SAAAA,KAAa,CACpEF,EACAf,EACAiB,WAGA1B,wBAACE,GAA+BO,MAAOmC,GACrC5C,wBAAC8C,cAASvC,UAAU,yBAAyBoC,MAAOA,GAAW/B,GAC5DJ"}

package/dist/chip.esm.js

@@ -1,6 +1,7 @@
 import { warnAboutMissingStyles } from '@entur/utils';
 import React from 'react';
 import classNames from 'classnames';
+import { LoadingDots } from '@entur/loader';
 import { CloseIcon } from '@entur/icons';
 import { Fieldset } from '@entur/form';
 
@@ -90,10 +91,12 @@ var ChoiceChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children));
 });
 
-var _excluded$3 = ["children", "className"];
+var _excluded$3 = ["children", "className", "loading"];
 var ActionChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var childrenArray = React.Children.toArray(children);
@@ -106,7 +109,9 @@ var ActionChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, className),
     ref: ref,
     type: "button"
-  }, rest), children);
+  }, rest), loading ? React.createElement(LoadingDots, {
+    className: "eds-action-chip__loading-dots"
+  }) : children);
 });
 
 var _excluded$2 = ["children", "className", "onClose"];

package/dist/chip.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.esm.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/ChoiceChipGroup.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  ({ children, className, ...rest }, ref: React.Ref<HTMLButtonElement>) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    return (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(() => ({ name, value, onChange }), [\n    name,\n    value,\n    onChange,\n  ]);\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","useChoiceChipGroupContext","context","useContext","Error","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","hasLeadingIcon","length","hasTrailingIcon","classList","cx","name","selectedValue","onChange","type","checked","ActionChip","classNames","TagChip","onClose","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"chip.esm.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/ChoiceChipGroup.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { LoadingDots } from '@entur/loader';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om chip-en er opptatt, f.eks med å oppdatere informasjon\n   * @default false\n   */\n  loading?: boolean;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    { children, className, loading = false, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    return (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-action-chip__loading-dots\" />\n        ) : (\n          children\n        )}\n      </button>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(() => ({ name, value, onChange }), [\n    name,\n    value,\n    onChange,\n  ]);\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","useChoiceChipGroupContext","context","useContext","Error","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","hasLeadingIcon","length","hasTrailingIcon","classList","cx","name","selectedValue","onChange","type","checked","ActionChip","loading","classNames","LoadingDots","TagChip","onClose","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}

package/dist/styles.css

@@ -34,10 +34,14 @@
 .eds-tag-chip {
   cursor: default;
   padding-right: 0.25rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 .eds-tag-chip__close-button {
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background: none;
   border: none;
   border-radius: 50%;
@@ -67,80 +71,6 @@
   box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-filter-chip {
-  cursor: pointer;
-  user-select: none;
-  padding-left: 0.25rem;
-  width: fit-content;
-}
-.eds-filter-chip__input {
-  position: absolute;
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-.eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon {
-  visibility: visible;
-}
-.eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
-  stroke: #181c56;
-  animation: stroke ease-in-out 0.2s 0.1s forwards;
-}
-.eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
-  stroke: #5ac39a;
-}
-.eds-filter-chip:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast .eds-filter-chip:focus-within {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-filter-chip:hover {
-  border-color: #181c56;
-}
-.eds-contrast .eds-filter-chip:hover {
-  background-color: #54568c;
-  border-color: #54568c;
-}
-.eds-filter-chip__icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  margin-right: 0.5rem;
-  height: 1.5rem;
-  width: 1.5rem;
-  border: 0.125rem solid transparent;
-  border-radius: 50%;
-  background-color: #ffffff;
-  color: #ffffff;
-}
-.eds-contrast .eds-filter-chip__icon {
-  background-color: #181c56;
-}
-.eds-filter-chip__icon .eds-filter-chip-icon {
-  height: 1rem;
-  width: 1rem;
-  visibility: hidden;
-}
-.eds-contrast .eds-filter-chip__icon .eds-filter-chip-icon {
-  color: #ffffff;
-}
-.eds-filter-chip__icon .eds-filter-chip-icon__path {
-  transform-origin: 50% 50%;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  stroke-width: 0.375rem;
-}
-
-@keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-choice-chip {
   cursor: pointer;
   display: inline-block;
@@ -149,10 +79,12 @@
   transition: all 0.1s ease-out;
 }
 .eds-choice-chip__input {
-  appearance: none;
+  -moz-appearance: none;
+       appearance: none;
   height: 0;
   position: absolute;
   width: 0;
+  -webkit-appearance: none;
 }
 .eds-choice-chip__input ~ .eds-chip {
   background-color: transparent;
@@ -235,4 +167,101 @@
 .eds-contrast .eds-action-chip:active {
   background-color: #292b6a;
   border-color: #292b6a;
+}
+.eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
+  background-color: #ffffff;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-filter-chip {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding-left: 0.25rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.eds-filter-chip__input {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+.eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon {
+  visibility: visible;
+}
+.eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
+  stroke: #181c56;
+  -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
+          animation: stroke ease-in-out 0.2s 0.1s forwards;
+}
+.eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
+  stroke: #5ac39a;
+}
+.eds-filter-chip[focus-within] {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-filter-chip:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast .eds-filter-chip[focus-within] {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-contrast .eds-filter-chip:focus-within {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-filter-chip:hover {
+  border-color: #181c56;
+}
+.eds-contrast .eds-filter-chip:hover {
+  background-color: #54568c;
+  border-color: #54568c;
+}
+.eds-filter-chip__icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  border: 0.125rem solid transparent;
+  border-radius: 50%;
+  background-color: #ffffff;
+  color: #ffffff;
+}
+.eds-contrast .eds-filter-chip__icon {
+  background-color: #181c56;
+}
+.eds-filter-chip__icon .eds-filter-chip-icon {
+  height: 1rem;
+  width: 1rem;
+  visibility: hidden;
+}
+.eds-contrast .eds-filter-chip__icon .eds-filter-chip-icon {
+  color: #ffffff;
+}
+.eds-filter-chip__icon .eds-filter-chip-icon__path {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  stroke-width: 0.375rem;
+}
+
+@-webkit-keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/chip",
-  "version": "0.4.24",
+  "version": "0.5.2",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/chip.esm.js",
@@ -27,10 +27,10 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/form": "^5.2.3",
+    "@entur/form": "^5.3.1",
     "@entur/tokens": "^3.3.1",
     "@entur/utils": "^0.4.3",
     "classnames": "^2.3.1"
   },
-  "gitHead": "bf06a9d451cb7f978946c05ce04bb4e6f63379af"
+  "gitHead": "f760e1b8cfdc14231bd6391a8d82dfed1d71daa4"
 }