@mantine/core/cjs/components/TreeSelect/TreeSelectOption.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"TreeSelectOption.cjs","names":["classes","Combobox","AccordionChevron","CheckboxIndicator","CheckIcon"],"sources":["../../../src/components/TreeSelect/TreeSelectOption.tsx"],"sourcesContent":["import { AccordionChevron } from '../Accordion';\nimport { CheckboxIndicator } from '../Checkbox/CheckboxIndicator/CheckboxIndicator';\nimport { CheckIcon } from '../Checkbox/CheckIcon';\nimport { Combobox } from '../Combobox';\nimport type { TreeNodeData } from '../Tree';\nimport classes from './TreeSelect.module.css';\n\nconst LEVEL_OFFSET = 20;\nconst BASE_PADDING = 8;\nconst LINE_CONTENT_GAP = 5;\nconst OPTION_GAP = 6;\n\nexport interface TreeSelectChevronAriaLabels {\n  /** aria-label for the expand button when the node is collapsed @default 'Expand' */\n  expand?: string;\n\n  /** aria-label for the expand button when the node is expanded @default 'Collapse' */\n  collapse?: string;\n}\n\nexport interface TreeSelectOptionProps {\n  node: TreeNodeData;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  checked: boolean;\n  indeterminate: boolean;\n  showCheckbox: boolean;\n  isLastChild: boolean;\n  lineGuides: boolean[];\n  withLines: boolean;\n  onToggleExpand: (value: string) => void;\n  renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;\n  chevronAriaLabels?: TreeSelectChevronAriaLabels;\n}\n\nexport interface TreeSelectRenderNodePayload {\n  node: TreeNodeData;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  checked: boolean;\n  indeterminate: boolean;\n}\n\nexport function TreeSelectOption({\n  node,\n  level,\n  expanded,\n  hasChildren,\n  selected,\n  checked,\n  indeterminate,\n  showCheckbox,\n  isLastChild,\n  lineGuides,\n  withLines,\n  onToggleExpand,\n  renderNode,\n  chevronAriaLabels,\n}: TreeSelectOptionProps) {\n  const indentPx = (level - 1) * LEVEL_OFFSET;\n\n  const handleExpandClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n    onToggleExpand(node.value);\n  };\n\n  const handleExpandMouseDown = (event: React.MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const customContent = renderNode\n    ? renderNode({ node, level, expanded, hasChildren, selected, checked, indeterminate })\n    : null;\n\n  const lineElements =\n    withLines && level > 1 ? (\n      <>\n        {lineGuides.map((show, g) =>\n          show ? (\n            <span\n              key={`g${g}`}\n              className={classes.guideLine}\n              style={{ insetInlineStart: BASE_PADDING + (g + 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2 }}\n            />\n          ) : null\n        )}\n        <span\n          className={classes.branchVertical}\n          data-last={isLastChild || undefined}\n          style={{\n            insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,\n          }}\n        />\n        <span\n          className={classes.branchHorizontal}\n          style={{\n            insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,\n            width: LEVEL_OFFSET / 2,\n          }}\n        />\n      </>\n    ) : null;\n\n  const isActive = selected || checked;\n  const showCheckMark = !showCheckbox && isActive;\n\n  const ariaChecked = showCheckbox ? (indeterminate && !checked ? 'mixed' : checked) : undefined;\n\n  return (\n    <Combobox.Option\n      value={node.value}\n      disabled={node.nodeProps?.disabled}\n      active={isActive}\n      className={classes.option}\n      style={{\n        paddingInlineStart:\n          BASE_PADDING +\n          indentPx +\n          (withLines && level > 1 ? LINE_CONTENT_GAP : 0) +\n          (!hasChildren ? OPTION_GAP : 0),\n      }}\n      aria-selected={isActive}\n      aria-level={level}\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-checked={ariaChecked}\n    >\n      {lineElements}\n      {customContent || (\n        <>\n          {hasChildren && (\n            <span\n              className={classes.expandIcon}\n              data-expanded={expanded || undefined}\n              onClick={handleExpandClick}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleExpandClick(e as any);\n                }\n              }}\n              onMouseDown={handleExpandMouseDown}\n              role=\"button\"\n              tabIndex={-1}\n              aria-label={\n                expanded\n                  ? (chevronAriaLabels?.collapse ?? 'Collapse')\n                  : (chevronAriaLabels?.expand ?? 'Expand')\n              }\n            >\n              <AccordionChevron size=\"80%\" />\n            </span>\n          )}\n          {showCheckbox && (\n            <CheckboxIndicator\n              checked={checked || indeterminate}\n              indeterminate={!checked && indeterminate}\n              size=\"18px\"\n            />\n          )}\n          <span className={classes.label}>{node.label}</span>\n          {showCheckMark && <CheckIcon className={classes.checkIcon} />}\n        </>\n      )}\n    </Combobox.Option>\n  );\n}\n\nTreeSelectOption.displayName = '@mantine/core/TreeSelectOption';\n"],"mappings":";;;;;;;;;AAOA,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,mBAAmB;AACzB,MAAM,aAAa;AAqCnB,SAAgB,iBAAiB,EAC/B,MACA,OACA,UACA,aACA,UACA,SACA,eACA,cACA,aACA,YACA,WACA,gBACA,YACA,qBACwB;CACxB,MAAM,YAAY,QAAQ,KAAK;CAE/B,MAAM,qBAAqB,UAA4B;EACrD,MAAM,gBAAgB;EACtB,MAAM,eAAe;EACrB,eAAe,KAAK,KAAK;CAC3B;CAEA,MAAM,yBAAyB,UAA4B;EACzD,MAAM,eAAe;CACvB;CAEA,MAAM,gBAAgB,aAClB,WAAW;EAAE;EAAM;EAAO;EAAU;EAAa;EAAU;EAAS;CAAc,CAAC,IACnF;CAEJ,MAAM,eACJ,aAAa,QAAQ,IACnB,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACG,WAAW,KAAK,MAAM,MACrB,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAEE,WAAWA,0BAAAA,QAAQ;GACnB,OAAO,EAAE,kBAAkB,gBAAgB,IAAI,KAAK,eAAe,eAAe,EAAE;EACrF,GAHM,IAAI,GAGV,IACC,IACN;EACA,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,WAAWA,0BAAAA,QAAQ;GACnB,aAAW,eAAe,KAAA;GAC1B,OAAO,EACL,kBAAkB,gBAAgB,QAAQ,KAAK,eAAe,eAAe,EAC/E;EACD,CAAA;EACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,WAAWA,0BAAAA,QAAQ;GACnB,OAAO;IACL,kBAAkB,gBAAgB,QAAQ,KAAK,eAAe,eAAe;IAC7E,OAAO,eAAe;GACxB;EACD,CAAA;CACD,EAAA,CAAA,IACA;CAEN,MAAM,WAAW,YAAY;CAC7B,MAAM,gBAAgB,CAAC,gBAAgB;CAEvC,MAAM,cAAc,eAAgB,iBAAiB,CAAC,UAAU,UAAU,UAAW,KAAA;CAErF,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,SAAS,QAAV;EACE,OAAO,KAAK;EACZ,UAAU,KAAK,WAAW;EAC1B,QAAQ;EACR,WAAWD,0BAAAA,QAAQ;EACnB,OAAO,EACL,oBACE,eACA,YACC,aAAa,QAAQ,IAAI,mBAAmB,MAC5C,CAAC,cAAc,aAAa,GACjC;EACA,iBAAe;EACf,cAAY;EACZ,iBAAe,cAAc,WAAW,KAAA;EACxC,gBAAc;YAfhB,CAiBG,cACA,iBACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAWA,0BAAAA,QAAQ;IACnB,iBAAe,YAAY,KAAA;IAC3B,SAAS;IACT,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,SACZ,kBAAkB,CAAQ;IAE9B;IACA,aAAa;IACb,MAAK;IACL,UAAU;IACV,cACE,WACK,mBAAmB,YAAY,aAC/B,mBAAmB,UAAU;cAGpC,iBAAA,GAAA,kBAAA,KAACE,yBAAAA,kBAAD,EAAkB,MAAK,MAAO,CAAA;GAC1B,CAAA;GAEP,gBACC,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,mBAAD;IACE,SAAS,WAAW;IACpB,eAAe,CAAC,WAAW;IAC3B,MAAK;GACN,CAAA;GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAWH,0BAAAA,QAAQ;cAAQ,KAAK;GAAY,CAAA;GACjD,iBAAiB,iBAAA,GAAA,kBAAA,KAACI,kBAAAA,WAAD,EAAW,WAAWJ,0BAAAA,QAAQ,UAAY,CAAA;EAC5D,EAAA,CAAA,CAEW;;AAErB;AAEA,iBAAiB,cAAc"}