UNPKG

@cavilha/chip

Version:

A component that allow users to make selections and filter content.

2 lines (1 loc) 2.96 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@fortawesome/pro-solid-svg-icons"),t=require("@cavilha/theme"),o=require("@radix-ui/react-toggle-group"),n=require("@cavilha/icon");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c,i,s,d,u=l(e),p=a(o),f=l(n),y=function(){return y=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},y.apply(this,arguments)};function b(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]])}return t}var v=t.styled(p.Root,{display:"flex",alignItems:"center"}),m=t.styled("span",{fontFamily:"$untitled",fontSize:"$bodySmall",fontWeight:"$semibold",color:"$secondary4",lineHeight:"$small2"}),g=t.styled(f.default,{ml:"$small2",lineHeight:0,color:"$neutral1",display:"none"}),h=t.styled(p.Item,{appearance:"none",border:"1px solid $colors$secondary4",br:"$large",mr:"$small2",mb:"$small2",outline:"none",height:32,padding:"6px $small3",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",position:"relative",bc:"transparent","&:hover":(c={bc:"$secondary0Hover"},c["".concat(m)]={color:"$secondary4"},c),"&:focus":(i={boxShadow:"$focusPressed"},i["".concat(m)]={color:"$secondary4"},i),"&[data-state=on]":(s={bc:"$secondary4","&:hover":{bc:"$secondary4Hover"}},s["".concat(m)]={color:"$alwaysWhite"},s["".concat(g)]={color:"$alwaysWhite",display:"block"},s),"&:disabled":(d={border:"1px solid $colors$neutral3",cursor:"not-allowed","&:hover":{bc:"transparent"}},d["".concat(m)]={color:"$neutral4"},d)}),$=function(e){var t=e.id,o=e.label,n=e.value,l=e.isDisabled,a=e.css,c=b(e,["id","label","value","isDisabled","css"]);return u.default.createElement(h,y({id:t,role:"button",title:o,disabled:l,value:n,css:a},c),u.default.createElement(m,null,o),u.default.createElement(g,{icon:r.faTimesCircle,iconSize:16}))};exports.ChipItem=$,exports.default=function(e){var r=e.isDisabled,t=void 0!==r&&r,o=e.children,n=e.onChange,l=e.loop,a=void 0===l||l,c=e.rovingFocus,i=void 0===c||c,s=e.css,d=b(e,["isDisabled","children","onChange","loop","rovingFocus","css"]);return u.default.createElement(v,y({onValueChange:n,loop:a,rovingFocus:i,disabled:t,type:"single",css:s},d),o&&(Array.isArray(o)?o.map((function(e){return u.default.createElement($,y({key:e.props.id},e.props))})):o))};