@entur/chip 0.5.8 → 0.6.0

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.
 
+# [0.6.0](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.5.8...@entur/chip@0.6.0) (2022-06-28)
+
+### Features
+
+- **action chip:** add aria-loading and aria-label text to action chip when loading ([2eaadbe](https://bitbucket.org/enturas/design-system/commits/2eaadbe743049a57613d0c89cb17fab8128da915))
+- **action chip:** add visual disabled indicator to actionChip ([15edd0d](https://bitbucket.org/enturas/design-system/commits/15edd0da4111c79465f620dd008b7047fbf9cee7))
+- **tag chip:** add autogenerated aria-label for tag close/remove button ([9e63b0a](https://bitbucket.org/enturas/design-system/commits/9e63b0af9dfb618caa301aab3c954974aecb9bb0))
+
+### BREAKING CHANGES
+
+- **tag chip:** This change will add aria-label to all tag chip close buttons. If you already use this component,
+  you should check that the accessible text makes sense and if it doesn't, change the text using the
+  closeButtonAriaLabel prop
+
 ## [0.5.8](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.5.7...@entur/chip@0.5.8) (2022-06-24)
 
 **Note:** Version bump only for package @entur/chip

package/dist/TagChip.d.ts

@@ -8,5 +8,7 @@ export declare type TagChipProps = {
     className?: string;
     /** Callback for når man klikker på krysset */
     onClose: () => void;
+    /** Skjermlesertekst for X-knappen */
+    closeButtonAriaLabel?: string;
 };
 export declare const TagChip: React.ForwardRefExoticComponent<TagChipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/chip.cjs.development.js

@@ -111,31 +111,55 @@ var ActionChip = /*#__PURE__*/React__default["default"].forwardRef(function (_re
   var childrenArray = React__default["default"].Children.toArray(children);
   var hasLeadingIcon = childrenArray.length > 1 && typeof childrenArray[0] !== 'string';
   var hasTrailingIcon = childrenArray.length > 1 && typeof childrenArray[childrenArray.length - 1] !== 'string';
-  return React__default["default"].createElement("button", _extends({
+
+  var ariaLabelValue = function ariaLabelValue() {
+    if (rest['aria-label']) return rest['aria-label'];
+    if (loading) return ariaLabelWhenLoading;
+    return undefined;
+  };
+
+  var ariaLabelWhenLoading = childrenArray.filter(function (child) {
+    return typeof child === 'string';
+  }).join(' ');
+  var actionChip = React__default["default"].createElement("button", _extends({
     className: classNames__default["default"]('eds-chip', 'eds-action-chip', {
       'eds-chip--leading-icon': hasLeadingIcon,
-      'eds-chip--trailing-icon': hasTrailingIcon
+      'eds-chip--trailing-icon': hasTrailingIcon,
+      'eds-action-chip--disabled': rest.disabled
     }, className),
     ref: ref,
+    "aria-busy": loading,
+    "aria-label": ariaLabelValue(),
     type: "button"
   }, rest), loading ? React__default["default"].createElement(loader.LoadingDots, {
     className: "eds-action-chip__loading-dots"
   }) : children);
+
+  if (rest.disabled) {
+    return React__default["default"].createElement("div", {
+      className: "eds-action-chip--disabled__wrapper"
+    }, actionChip);
+  }
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, actionChip);
 });
 
-var _excluded$2 = ["children", "className", "onClose"];
+var _excluded$2 = ["children", "className", "onClose", "closeButtonAriaLabel"];
 var TagChip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       onClose = _ref.onClose,
+      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
+  var selectedCloseLabel = closeButtonAriaLabel != null ? closeButtonAriaLabel : 'Fjern ' + (children == null ? void 0 : children.toString());
   return React__default["default"].createElement("div", _extends({
     className: classNames__default["default"]('eds-chip', 'eds-tag-chip', className)
   }, rest), children, React__default["default"].createElement("button", {
     className: "eds-tag-chip__close-button",
     type: "button",
     onClick: onClose,
+    "aria-label": selectedCloseLabel,
     ref: ref
   }, React__default["default"].createElement(icons.CloseIcon, null)));
 });

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 { 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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"}
+{"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    const ariaLabelValue = () => {\n      if (rest['aria-label']) return rest['aria-label'];\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const actionChip = (\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            'eds-action-chip--disabled': rest.disabled,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        aria-label={ariaLabelValue()}\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    if (rest.disabled) {\n      return (\n        <div className=\"eds-action-chip--disabled__wrapper\">{actionChip}</div>\n      );\n    }\n    return <>{actionChip}</>;\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  /** Skjermlesertekst for X-knappen */\n  closeButtonAriaLabel?: string;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, closeButtonAriaLabel, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const selectedCloseLabel =\n      closeButtonAriaLabel ?? 'Fjern ' + children?.toString();\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          aria-label={selectedCloseLabel}\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","ariaLabelValue","ariaLabelWhenLoading","undefined","filter","child","join","actionChip","classNames","LoadingDots","TagChip","onClose","closeButtonAriaLabel","selectedCloseLabel","toString","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/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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),a=require("react"),t=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(a),s=i(t);function d(){return d=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e},d.apply(this,arguments)}function o(e,a){if(null==e)return{};var t,l,n={},r=Object.keys(e);for(l=0;l<r.length;l++)a.indexOf(t=r[l])>=0||(n[t]=e[t]);return n}var u=c.default.createContext(null),f=u.Provider,h=["className","children","value","disabled","style"],p=c.default.forwardRef((function(e,a){var t=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(t,"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:a,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,a){var t=e.children,n=e.className,r=e.loading,i=void 0!==r&&r,u=o(e,m),f=c.default.Children.toArray(t),h=f.length>1&&"string"!=typeof f[0],p=f.length>1&&"string"!=typeof f[f.length-1],g=f.filter((function(e){return"string"==typeof e})).join(" "),v=c.default.createElement("button",d({className:s.default("eds-chip","eds-action-chip",{"eds-chip--leading-icon":h,"eds-chip--trailing-icon":p,"eds-action-chip--disabled":u.disabled},n),ref:a,"aria-busy":i,"aria-label":u["aria-label"]?u["aria-label"]:i?g:void 0,type:"button"},u),i?c.default.createElement(l.LoadingDots,{className:"eds-action-chip__loading-dots"}):t);return u.disabled?c.default.createElement("div",{className:"eds-action-chip--disabled__wrapper"},v):c.default.createElement(c.default.Fragment,null,v)})),v=["children","className","onClose","closeButtonAriaLabel"],b=c.default.forwardRef((function(e,a){var t=e.children,l=e.className,r=e.onClose,i=e.closeButtonAriaLabel,u=o(e,v),f=null!=i?i:"Fjern "+(null==t?void 0:t.toString());return c.default.createElement("div",d({className:s.default("eds-chip","eds-tag-chip",l)},u),t,c.default.createElement("button",{className:"eds-tag-chip__close-button",type:"button",onClick:r,"aria-label":f,ref:a},c.default.createElement(n.CloseIcon,null)))})),y=["className","children","value","disabled","name","style"],C=c.default.forwardRef((function(e,a){var t=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(t,"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:a,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 a=e.name,t=e.value,l=e.children,n=e.onChange,i=e.label,s=o(e,E),u=c.default.useMemo((function(){return{name:a,value:t,onChange:n}}),[a,t,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 { 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"}
+{"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    const ariaLabelValue = () => {\n      if (rest['aria-label']) return rest['aria-label'];\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const actionChip = (\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            'eds-action-chip--disabled': rest.disabled,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        aria-label={ariaLabelValue()}\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    if (rest.disabled) {\n      return (\n        <div className=\"eds-action-chip--disabled__wrapper\">{actionChip}</div>\n      );\n    }\n    return <>{actionChip}</>;\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  /** Skjermlesertekst for X-knappen */\n  closeButtonAriaLabel?: string;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, closeButtonAriaLabel, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const selectedCloseLabel =\n      closeButtonAriaLabel ?? 'Fjern ' + children?.toString();\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          aria-label={selectedCloseLabel}\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","hasLeadingIcon","hasTrailingIcon","ariaLabelWhenLoading","filter","child","join","actionChip","classNames","LoadingDots","TagChip","onClose","closeButtonAriaLabel","selectedCloseLabel","toString","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","warnAboutMissingStyles","label","contextValue","useMemo","Fieldset"],"mappings":"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"}

package/dist/chip.esm.js

@@ -102,31 +102,55 @@ var ActionChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var childrenArray = React.Children.toArray(children);
   var hasLeadingIcon = childrenArray.length > 1 && typeof childrenArray[0] !== 'string';
   var hasTrailingIcon = childrenArray.length > 1 && typeof childrenArray[childrenArray.length - 1] !== 'string';
-  return React.createElement("button", _extends({
+
+  var ariaLabelValue = function ariaLabelValue() {
+    if (rest['aria-label']) return rest['aria-label'];
+    if (loading) return ariaLabelWhenLoading;
+    return undefined;
+  };
+
+  var ariaLabelWhenLoading = childrenArray.filter(function (child) {
+    return typeof child === 'string';
+  }).join(' ');
+  var actionChip = React.createElement("button", _extends({
     className: classNames('eds-chip', 'eds-action-chip', {
       'eds-chip--leading-icon': hasLeadingIcon,
-      'eds-chip--trailing-icon': hasTrailingIcon
+      'eds-chip--trailing-icon': hasTrailingIcon,
+      'eds-action-chip--disabled': rest.disabled
     }, className),
     ref: ref,
+    "aria-busy": loading,
+    "aria-label": ariaLabelValue(),
     type: "button"
   }, rest), loading ? React.createElement(LoadingDots, {
     className: "eds-action-chip__loading-dots"
   }) : children);
+
+  if (rest.disabled) {
+    return React.createElement("div", {
+      className: "eds-action-chip--disabled__wrapper"
+    }, actionChip);
+  }
+
+  return React.createElement(React.Fragment, null, actionChip);
 });
 
-var _excluded$2 = ["children", "className", "onClose"];
+var _excluded$2 = ["children", "className", "onClose", "closeButtonAriaLabel"];
 var TagChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       onClose = _ref.onClose,
+      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
+  var selectedCloseLabel = closeButtonAriaLabel != null ? closeButtonAriaLabel : 'Fjern ' + (children == null ? void 0 : children.toString());
   return React.createElement("div", _extends({
     className: classNames('eds-chip', 'eds-tag-chip', className)
   }, rest), children, React.createElement("button", {
     className: "eds-tag-chip__close-button",
     type: "button",
     onClick: onClose,
+    "aria-label": selectedCloseLabel,
     ref: ref
   }, React.createElement(CloseIcon, null)));
 });

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 { 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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"}
+{"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    const ariaLabelValue = () => {\n      if (rest['aria-label']) return rest['aria-label'];\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const actionChip = (\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            'eds-action-chip--disabled': rest.disabled,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        aria-label={ariaLabelValue()}\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    if (rest.disabled) {\n      return (\n        <div className=\"eds-action-chip--disabled__wrapper\">{actionChip}</div>\n      );\n    }\n    return <>{actionChip}</>;\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  /** Skjermlesertekst for X-knappen */\n  closeButtonAriaLabel?: string;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, closeButtonAriaLabel, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const selectedCloseLabel =\n      closeButtonAriaLabel ?? 'Fjern ' + children?.toString();\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          aria-label={selectedCloseLabel}\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","ariaLabelValue","ariaLabelWhenLoading","undefined","filter","child","join","actionChip","classNames","LoadingDots","TagChip","onClose","closeButtonAriaLabel","selectedCloseLabel","toString","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}

package/dist/styles.css

@@ -2,35 +2,6 @@
   --eds-chip: 1;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-action-chip {
-  cursor: pointer;
-}
-.eds-action-chip:focus {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast .eds-action-chip:focus {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-action-chip:hover {
-  border-color: #181c56;
-}
-.eds-contrast .eds-action-chip:hover {
-  background-color: #54568c;
-  border-color: #54568c;
-}
-.eds-action-chip:active {
-  background: #d1d4e3;
-}
-.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-chip {
   background: #ebebf1;
   border: 0.0625rem solid #d1d4e3;
@@ -60,6 +31,117 @@
   margin-left: 0.5rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-choice-chip {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 0.75rem;
+  position: relative;
+  transition: all 0.1s ease-out;
+}
+.eds-choice-chip__input {
+  -moz-appearance: none;
+       appearance: none;
+  height: 0;
+  position: absolute;
+  width: 0;
+  -webkit-appearance: none;
+}
+.eds-choice-chip__input ~ .eds-chip {
+  background-color: transparent;
+}
+.eds-contrast .eds-choice-chip__input ~ .eds-chip {
+  border-color: #aeb7e2;
+  color: #ffffff;
+}
+.eds-choice-chip__input:checked ~ .eds-chip {
+  background-color: #181c56;
+  border-color: #181c56;
+  color: #ffffff;
+}
+.eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
+  border-color: #aeb7e2;
+  background-color: #aeb7e2;
+  color: #181c56;
+}
+.eds-choice-chip__input:focus ~ .eds-chip {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast .eds-choice-chip__input:focus ~ .eds-chip {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
+  border-color: #181c56;
+}
+.eds-contrast .eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
+  border-color: #ffffff;
+}
+.eds-choice-chip__input:checked:hover ~ .eds-chip {
+  background-color: #3b3e6f;
+  border-color: #3b3e6f;
+}
+.eds-contrast .eds-choice-chip__input:checked:hover ~ .eds-chip {
+  background-color: #bac2e6;
+  border-color: #bac2e6;
+}
+.eds-choice-chip__input:active ~ .eds-chip {
+  background-color: #d1d4e3;
+  border-color: #d1d4e3;
+}
+.eds-contrast .eds-choice-chip__input:active ~ .eds-chip {
+  background: #33376d;
+}
+.eds-choice-chip .eds-chip--disabled {
+  opacity: 0.5;
+  border-style: dashed;
+  cursor: not-allowed;
+}
+.eds-contrast .eds-choice-chip .eds-chip--disabled {
+  opacity: 1;
+  border-color: #8285a8;
+  color: #babbcf;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-action-chip {
+  cursor: pointer;
+}
+.eds-action-chip:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast .eds-action-chip:focus {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-action-chip:hover {
+  border-color: #181c56;
+}
+.eds-contrast .eds-action-chip:hover {
+  background-color: #54568c;
+  border-color: #54568c;
+}
+.eds-action-chip:active {
+  background: #d1d4e3;
+}
+.eds-contrast .eds-action-chip:active {
+  background-color: #292b6a;
+  border-color: #292b6a;
+}
+.eds-action-chip--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.eds-action-chip--disabled__wrapper {
+  cursor: not-allowed;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.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-tag-chip {
   cursor: default;
   padding-right: 0.25rem;
@@ -192,76 +274,4 @@
   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;
-  margin-right: 0.75rem;
-  position: relative;
-  transition: all 0.1s ease-out;
-}
-.eds-choice-chip__input {
-  -moz-appearance: none;
-       appearance: none;
-  height: 0;
-  position: absolute;
-  width: 0;
-  -webkit-appearance: none;
-}
-.eds-choice-chip__input ~ .eds-chip {
-  background-color: transparent;
-}
-.eds-contrast .eds-choice-chip__input ~ .eds-chip {
-  border-color: #aeb7e2;
-  color: #ffffff;
-}
-.eds-choice-chip__input:checked ~ .eds-chip {
-  background-color: #181c56;
-  border-color: #181c56;
-  color: #ffffff;
-}
-.eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
-  border-color: #aeb7e2;
-  background-color: #aeb7e2;
-  color: #181c56;
-}
-.eds-choice-chip__input:focus ~ .eds-chip {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast .eds-choice-chip__input:focus ~ .eds-chip {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
-  border-color: #181c56;
-}
-.eds-contrast .eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
-  border-color: #ffffff;
-}
-.eds-choice-chip__input:checked:hover ~ .eds-chip {
-  background-color: #3b3e6f;
-  border-color: #3b3e6f;
-}
-.eds-contrast .eds-choice-chip__input:checked:hover ~ .eds-chip {
-  background-color: #bac2e6;
-  border-color: #bac2e6;
-}
-.eds-choice-chip__input:active ~ .eds-chip {
-  background-color: #d1d4e3;
-  border-color: #d1d4e3;
-}
-.eds-contrast .eds-choice-chip__input:active ~ .eds-chip {
-  background: #33376d;
-}
-.eds-choice-chip .eds-chip--disabled {
-  opacity: 0.5;
-  border-style: dashed;
-  cursor: not-allowed;
-}
-.eds-contrast .eds-choice-chip .eds-chip--disabled {
-  opacity: 1;
-  border-color: #8285a8;
-  color: #babbcf;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/chip",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "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.3.7",
+    "@entur/form": "^5.3.8",
     "@entur/tokens": "^3.3.2",
     "@entur/utils": "^0.4.3",
     "classnames": "^2.3.1"
   },
-  "gitHead": "974289b6579ade4460d12aa877a89e454c983d48"
+  "gitHead": "b8c747624dc3cb71b5710305c958ece5ba460e23"
 }