@edvisor/product-language 0.4.3 → 0.5.1

package/index.js

@@ -4531,20 +4531,18 @@ const LeftRightCard = props => {
 LeftRightCard.Right = Right;
 LeftRightCard.Controls = Controls$1;
 
-const WIDTH = 12;
-const HEIGHT = 10;
-/** no magic here, just copy/pasted the svg from the mockup
- * I had to tweak the width and height though
-*/
-
-const svg = `
-<svg xmlns='http://www.w3.org/2000/svg' width='${WIDTH}' height='${HEIGHT}' viewBox='0 0 10 8'>
-  <path d='M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z' fill='white'/>
-</svg>
+const indeterminateSvg = `
+  <svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 10 8'>
+    <rect fill='white' width='10' height='2' rx='1'/>
+  </svg>
 `;
+const checkSvg = `
+  <svg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 8'>
+    <path d='M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z' fill='white'/>
+  </svg>`;
 
-function getCheckMark() {
-  return css(["::before{position:absolute;content:url(\"data:image/svg+xml,", "\");top:3px;left:3px;}"], svg);
+function getCheckMark(indeterminate) {
+  return css(["::before{position:absolute;content:url(\"data:image/svg+xml,", "\");left:", "px;top:", "px;}"], indeterminate ? indeterminateSvg : checkSvg, indeterminate ? 3 : 4, indeterminate ? 6 : 3);
 }
 /** the reason I have this isNil to test
  * whether `checked` was passes is this:
@@ -4559,41 +4557,49 @@ function getCheckMark() {
   */
 
 
-function getCheckedStyles(color) {
+function getCheckedStyles(indeterminate, color) {
   return css(["", ""], ({
     checked
-  }) => isNil(checked) ? css([":checked{background:", ";border:2px solid ", ";", "}"], color, color, getCheckMark()) : checked ? css(["background:", ";border:2px solid ", ";", ""], color, color, getCheckMark()) : '');
+  }) => isNil(checked) ? css([":checked{background:", ";border:2px solid ", ";", "}"], color, color, getCheckMark(indeterminate)) : is(checked) || is(indeterminate) ? css(["background:", ";border:2px solid ", ";", ""], color, color, getCheckMark(indeterminate)) : '');
 }
 
-const getHoverStyles = () => css(["background:", ";", ""], Surface.Default.Hover, getCheckedStyles(Interactive.Default.Hover));
-const getDisabledStyles = () => css(["pointer-events:none;background:", ";border:2px solid ", ";", ""], props => props.checked === true ? `${Borders.Default.Default}` : `${Surface.Default.Subdued}`, Borders.Default.Default, getCheckedStyles(Icons.Disabled));
-const getDefaultStyles = () => css(["background:", ";border:2px solid ", ";", ":hover{", "}"], Surface.Default.Default, Interactive.Default.Disabled, getCheckedStyles(Interactive.Default.Default), getHoverStyles);
-const getInvalidStyles = () => css(["background:", ";border:2px solid ", ";", ""], props => props.checked === true ? `${Actions.Critical.Default}` : `${Surface.Critical.Subdued}`, Borders.Critical.Default, getCheckedStyles(Icons.Critical));
+const getHoverStyles = indeterminate => css(["background:", ";", ""], Surface.Default.Hover, getCheckedStyles(indeterminate, Interactive.Default.Hover));
+const getDisabledStyles = indeterminate => css(["pointer-events:none;background:", ";border:2px solid ", ";", ""], props => is(props.checked) || is(indeterminate) ? `${Borders.Default.Default}` : `${Surface.Default.Subdued}`, Borders.Default.Default, getCheckedStyles(indeterminate, Icons.Disabled));
+const getDefaultStyles = indeterminate => css(["background:", ";border:2px solid ", ";", ":hover{", "}"], Surface.Default.Default, Interactive.Default.Disabled, getCheckedStyles(indeterminate, Interactive.Default.Default), getHoverStyles(indeterminate));
+const getInvalidStyles = indeterminate => css(["background:", ";border:2px solid ", ";", ""], props => is(props.checked) || is(indeterminate) ? `${Actions.Critical.Default}` : `${Surface.Critical.Subdued}`, Borders.Critical.Default, getCheckedStyles(indeterminate, Icons.Critical));
 
 const CustomizedCheckbox = /*#__PURE__*/styled.input.withConfig({
   displayName: "checkbox__CustomizedCheckbox",
   componentId: "gcfss3-0"
 })(["appearance:none;position:relative;box-sizing:content-box;width:18px;height:18px;margin:", ";padding:", ";border-radius:4px;user-select:none;vertical-align:bottom;display:inline-block;", ":focus-visible{outline:2px solid ", ";outline-offset:1px;}"], Margin.none, Padding.none, ({
   disabled,
+  indeterminate,
   error
 }) => {
   if (is(disabled)) {
-    return getDisabledStyles();
+    return getDisabledStyles(indeterminate);
   } else if (is(error)) {
-    return getInvalidStyles();
+    return getInvalidStyles(indeterminate);
   } else {
-    return getDefaultStyles();
+    return getDefaultStyles(indeterminate);
   }
 }, Focused.Default);
 const Checkbox = props => {
   const {
-    error = false
+    error,
+    indeterminate
   } = props,
-        htmlProps = __rest(props, ["error"]);
+        htmlProps = __rest(props, ["error", "indeterminate"]);
 
   return jsx(CustomizedCheckbox, Object.assign({}, htmlProps, {
     type: 'checkbox',
-    error: error
+    error: error,
+    indeterminate: is(indeterminate),
+    ref: input => {
+      if (isDefined(input)) {
+        input.indeterminate = is(props.indeterminate);
+      }
+    }
   }));
 };
 
@@ -9319,6 +9325,469 @@ fixRegExpWellKnownSymbolLogic('split', function (SPLIT, nativeSplit, maybeCallNa
   ];
 }, !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC, UNSUPPORTED_Y);
 
+var CheckboxState;
+
+(function (CheckboxState) {
+  CheckboxState[CheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
+  CheckboxState[CheckboxState["CHECKED"] = 1] = "CHECKED";
+  CheckboxState[CheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
+})(CheckboxState || (CheckboxState = {}));
+
+const ListItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "tree-node__ListItem",
+  componentId: "sc-1wjf7p9-0"
+})(["& ol{margin-top:", ";}", ""], Margin.xs, ({
+  disabled
+}) => is(disabled) && css(["opacity:.75;cursor:not-allowed;"]));
+const ItemWrapper = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "tree-node__ItemWrapper",
+  componentId: "sc-1wjf7p9-1"
+})(["align-items:center;padding:", " ", ";gap:8px;flex:none;order:0;align-self:stretch;flex-grow:0;"], Padding.xxxs, Padding.none);
+const ClickableLabel = /*#__PURE__*/styled(Label).withConfig({
+  displayName: "tree-node__ClickableLabel",
+  componentId: "sc-1wjf7p9-2"
+})(["cursor:pointer;&:hover{background:", ";}&:focus{outline:0;background:", ";}"], Surface.Default.Default, Surface.Default.Default);
+const CollapseButton = /*#__PURE__*/styled(Button).withConfig({
+  displayName: "tree-node__CollapseButton",
+  componentId: "sc-1wjf7p9-3"
+})(["align-self:baseline;top:10px;border:0;cursor:pointer;padding:", ";gap:0;width:8px;margin-left:auto;right:8px;&:active{outline:none;}"], Padding.none);
+const InputWrapper = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "tree-node__InputWrapper",
+  componentId: "sc-1wjf7p9-4"
+})(["gap:8px;"]);
+const HelpfulMessage$1 = /*#__PURE__*/styled(Label).withConfig({
+  displayName: "tree-node__HelpfulMessage",
+  componentId: "sc-1wjf7p9-5"
+})(["margin-left:", ";user-select:none;"], Margin.xl);
+const TreeNode = props => {
+  const {
+    value,
+    label,
+    expanded
+  } = props;
+
+  const handleCheck = () => {
+    const {
+      onCheck
+    } = props;
+    onCheck({
+      label,
+      value,
+      checked: getCheckState({
+        toggle: true
+      })
+    });
+  };
+
+  const handleClick = () => {
+    const {
+      onClick,
+      isParent,
+      expandDisabled
+    } = props;
+
+    if (isParent && !expandDisabled) {
+      handleOnExpand();
+    }
+
+    onClick({
+      label,
+      value,
+      checked: getCheckState({
+        toggle: false
+      })
+    });
+  };
+
+  const handleOnExpand = () => {
+    const {
+      onExpand
+    } = props;
+    onExpand({
+      value,
+      label,
+      expanded: !is(expanded)
+    });
+  };
+
+  const getCheckState = ({
+    toggle
+  }) => {
+    const {
+      checkState
+    } = props;
+
+    if (checkState === CheckboxState.UNCHECKED && toggle) {
+      return true;
+    }
+
+    if (checkState === CheckboxState.CHECKED && !toggle) {
+      return true;
+    }
+
+    if (checkState === CheckboxState.INDETERMINATE) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const renderCollapseButton = () => {
+    const {
+      expandDisabled,
+      isParent
+    } = props;
+    return maybeRender(isParent, jsx(CollapseButton, {
+      subtle: true,
+      disabled: expandDisabled,
+      onClick: handleOnExpand,
+      IconSuffix: expanded ? IconMinor.ChevronUpSolid : IconMinor.ChevronDownSolid
+    }));
+  };
+
+  const renderCheckboxLabel = () => {
+    const {
+      checkState,
+      disabled,
+      treeId,
+      childCount,
+      isParent,
+      invalid,
+      showChildCount,
+      helpfulMessage
+    } = props;
+    const inputId = `${treeId}-${String(value).split(' ').join('_')}`;
+    const displayText = showChildCount && isParent ? `${label} (${childCount})` : label;
+    return jsxs(React.Fragment, {
+      children: [jsxs("div", {
+        children: [jsxs(InputWrapper, Object.assign({
+          center: true
+        }, {
+          children: [jsx(Checkbox, {
+            checked: checkState === CheckboxState.CHECKED,
+            indeterminate: checkState === CheckboxState.INDETERMINATE,
+            disabled: disabled,
+            error: invalid,
+            id: `input-${inputId}`,
+            onClick: handleCheck,
+            onChange: () => void 0
+          }), jsx(ClickableLabel, Object.assign({
+            onClick: handleClick,
+            role: "link",
+            tabIndex: 0
+          }, {
+            children: displayText
+          }), 1)]
+        })), maybeRender(helpfulMessage, jsx(HelpfulMessage$1, Object.assign({
+          subdued: true,
+          id: `error-${inputId}`
+        }, {
+          children: helpfulMessage
+        })))]
+      }), renderCollapseButton()]
+    });
+  };
+
+  const {
+    disabled
+  } = props;
+  return jsxs(ListItem, Object.assign({
+    role: "treeitem",
+    disabled: disabled
+  }, {
+    children: [jsx(ItemWrapper, Object.assign({
+      center: true
+    }, {
+      children: renderCheckboxLabel()
+    })), expanded && props.children]
+  }));
+};
+
+const flattenNodes = (flattenList, nodes, parent, depth = 0) => {
+  safeArray(nodes).forEach((node, index) => {
+    const isParent = nodeHasChildren(node);
+    flattenList.push({
+      label: node.label,
+      value: node.value,
+      children: node.children,
+      parent,
+      isChild: isDefined(parent) && isDefined(parent.value),
+      isParent,
+      isLeaf: !isParent,
+      disabled: getDisabledState(node, parent),
+      treeDepth: depth,
+      index,
+      checked: false,
+      checkState: 0,
+      expanded: false
+    });
+    flattenNodes(flattenList, safeArray(node.children), node, depth + 1);
+  });
+};
+const getNode = (nodes, value) => {
+  return nodes.find(node => node.value === value);
+};
+
+const nodeHasChildren = node => {
+  return isDefined(node.children) && Array.isArray(node.children) && !isEmpty(node.children);
+};
+
+const getDisabledState = (node, parent) => {
+  if (isDefined(parent) && is(parent.disabled)) {
+    return true;
+  }
+
+  return is(node.disabled);
+};
+
+const deserializeList = (flatNodes, lists) => {
+  flatNodes.forEach(flatNode => {
+    if (lists.checked.includes(flatNode.value)) {
+      flatNode.checked = true;
+
+      if (flatNode.isParent) {
+        checkAllChildren(flatNodes, flatNode);
+      }
+    }
+
+    if (lists.expanded.includes(flatNode.value)) {
+      flatNode.expanded = true;
+    }
+  });
+};
+
+const checkAllChildren = (flatNodes, flatNode) => {
+  defaultTo(flatNode.children, []).forEach(node => {
+    const _flatoNode = getNode(flatNodes, node.value);
+
+    if (isDefined(_flatoNode)) {
+      _flatoNode.checked = true;
+    }
+  });
+};
+
+const serializeList = (flatNodes, key) => {
+  const list = [];
+  flatNodes.forEach(node => {
+    if (key === 'expanded') {
+      if (node.expanded) {
+        list.push(node.value);
+      }
+    }
+
+    if (key === 'checked') {
+      if (node.checked) {
+        list.push(node.value);
+      }
+    }
+  });
+  return list;
+};
+const toggleChecked = (flatNodes, node, isChecked) => {
+  const flatNode = getNode(flatNodes, node.value);
+
+  if (isNil(flatNode)) {
+    return;
+  }
+
+  if (flatNode.isLeaf) {
+    if (is(node.disabled)) {
+      return;
+    }
+
+    toggleNode(flatNodes, node.value, 'checked', isChecked);
+  } else {
+    if (isDefined(flatNode.children) && flatNode.children.length === 0) {
+      toggleNode(flatNodes, node.value, 'checked', isChecked);
+    }
+
+    safeArray(flatNode.children).forEach(child => {
+      toggleChecked(flatNodes, child, isChecked);
+    });
+  }
+};
+const toggleNode = (flatNodes, nodeValue, key, toggleValue) => {
+  const node = flatNodes.find(_node => _node.value === nodeValue);
+
+  if (isDefined(node)) {
+    key === 'checked' ? node.checked = toggleValue : node.expanded = toggleValue;
+  }
+};
+const getNodeCheckState = (flattenNodeList, node) => {
+  const flatNode = getNode(flattenNodeList, node.value);
+
+  if (is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isLeaf) || isDefined(node.children) && node.children.length === 0) {
+    return is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.checked) ? CheckboxState.CHECKED : CheckboxState.UNCHECKED;
+  }
+
+  if (is(isEveryChildChecked(flattenNodeList, node))) {
+    return CheckboxState.CHECKED;
+  }
+
+  if (is(isSomeChildChecked(flattenNodeList, node))) {
+    return CheckboxState.INDETERMINATE;
+  }
+
+  return CheckboxState.UNCHECKED;
+};
+
+const isEveryChildChecked = (flattenNodeList, node) => {
+  return safeArray(node.children).every(child => {
+    const _node = getNode(flattenNodeList, child.value);
+
+    return isDefined(_node) && _node.checkState === 1;
+  });
+};
+
+const isSomeChildChecked = (flattenNodeList, node) => {
+  return safeArray(node.children).some(child => {
+    const _node = getNode(flattenNodeList, child.value);
+
+    return isDefined(_node) && _node.checkState > 0;
+  });
+};
+
+const ParentNode = /*#__PURE__*/styled.ol.withConfig({
+  displayName: "tree-view__ParentNode",
+  componentId: "sc-4bkb59-0"
+})(["display:flex;flex-direction:column;gap:8px;margin:", ";padding-left:", ";list-style-type:none;& ol{padding-left:", ";}"], Margin.none, Padding.none, Padding.l);
+const Container$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "tree-view__Container",
+  componentId: "sc-4bkb59-1"
+})(["display:block;margin:", ";padding:", ";"], Margin.none, ({
+  useCardContainer
+}) => useCardContainer ? Padding.none : Padding.xs);
+const TreeView = props => {
+  const {
+    checkedList = [],
+    expanded = [],
+    title,
+    nodes,
+    className,
+    showChildCount = false,
+    useCardContainer = true
+  } = props;
+  const [expandedList, setExpandedList] = useState(expanded);
+  const treeId = new Date().getTime().toString();
+  const flattenNodeList = useMemo(() => {
+    const _nodeList = [];
+    flattenNodes(_nodeList, nodes);
+    deserializeList(_nodeList, {
+      checked: checkedList,
+      expanded: expandedList
+    });
+    return _nodeList;
+  }, [nodes]);
+
+  const handleOnCheck = nodeInfo => {
+    const {
+      onCheck
+    } = props;
+    toggleChecked(flattenNodeList, nodeInfo, nodeInfo.checked);
+
+    if (isDefined(onCheck)) {
+      onCheck(serializeList(flattenNodeList, 'checked'), Object.assign({}, nodeInfo));
+    }
+  };
+
+  const handleOnExpand = nodeInfo => {
+    const {
+      onExpand
+    } = props;
+    toggleNode(flattenNodeList, nodeInfo.value, 'expanded', nodeInfo.expanded);
+
+    if (isDefined(onExpand)) {
+      onExpand(serializeList(flattenNodeList, 'expanded'), Object.assign({}, nodeInfo));
+    }
+
+    setExpandedList(serializeList(flattenNodeList, 'expanded'));
+  };
+
+  const onNodeClick = nodeInfo => {
+    const {
+      onClick
+    } = props;
+    const node = getNode(flattenNodeList, nodeInfo.value);
+
+    if (isDefined(onClick)) {
+      onClick(Object.assign(Object.assign({}, node), nodeInfo));
+    }
+  };
+
+  const renderTreeNodes = (nodeList, parent) => {
+    const {
+      expandDisabled = false
+    } = props;
+    const treeNodes = nodeList.map(node => {
+      var _a, _b;
+
+      const flatNode = getNode(flattenNodeList, node.value);
+      const children = is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isParent) ? renderTreeNodes(defaultTo(node.children, []), node) : jsx(Nothing, {}, node.value);
+
+      if (isDefined(flatNode)) {
+        flatNode.checkState = getNodeCheckState(flattenNodeList, node);
+      }
+
+      const parentExpanded = isDefined(parent) && isDefined(parent.value) ? (_a = getNode(flattenNodeList, parent.value)) === null || _a === void 0 ? void 0 : _a.expanded : true;
+
+      if (!is(parentExpanded)) {
+        return jsx(Nothing, {}, node.value);
+      }
+
+      return jsx(TreeNode, Object.assign({
+        checkState: defaultTo(flatNode === null || flatNode === void 0 ? void 0 : flatNode.checkState, 0),
+        disabled: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.disabled),
+        expandDisabled: expandDisabled,
+        expanded: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.expanded),
+        label: node.label,
+        isLeaf: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isLeaf),
+        isParent: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isParent),
+        treeId: treeId,
+        invalid: defaultTo(node.invalid, false),
+        value: node.value,
+        showChildCount: showChildCount,
+        childCount: defaultTo((_b = flatNode === null || flatNode === void 0 ? void 0 : flatNode.children) === null || _b === void 0 ? void 0 : _b.length, 0),
+        helpfulMessage: node.helpfulMessage,
+        onClick: onNodeClick,
+        onCheck: handleOnCheck,
+        onExpand: handleOnExpand
+      }, {
+        children: children
+      }), node.value);
+    });
+    return jsx(ParentNode, Object.assign({
+      role: "tree",
+      className: 'tree-view'
+    }, {
+      children: treeNodes
+    }));
+  };
+
+  const renderTree = () => {
+    return useCardContainer ? jsx(Card, Object.assign({
+      heading: title
+    }, {
+      children: jsx(Card.Section, {
+        children: jsx(Container$1, Object.assign({
+          className: className,
+          id: treeId,
+          useCardContainer: true
+        }, {
+          children: renderTreeNodes(nodes)
+        }))
+      })
+    })) : jsx(Container$1, Object.assign({
+      className: className,
+      id: treeId,
+      useCardContainer: false
+    }, {
+      children: renderTreeNodes(nodes)
+    }));
+  };
+
+  return maybeRender(!isEmpty(nodes), renderTree());
+};
+
 // this file was generated, but it is safe to modify
 
 function toAvatarSize(n) {
@@ -9453,8 +9922,8 @@ const Wrapper = /*#__PURE__*/styled.label.withConfig({
 })(["display:flex;width:100%;align-items:center;"]);
 const InputCheckbox = props => {
   const {
-    onChange,
-    label = ''
+    label = '',
+    onChange
   } = props;
 
   if (isEmpty(label)) {
@@ -9463,12 +9932,12 @@ const InputCheckbox = props => {
 
   return jsxs(Wrapper, {
     children: [jsx(Checkbox, Object.assign({}, props, {
+      name: isDefined(props.name) ? props.name : label,
       onChange: e => {
         if (isDefined(onChange)) {
           onChange(e.target.checked);
         }
-      },
-      name: isDefined(props.name) ? props.name : label
+      }
     })), jsx(Text, {
       children: label
     })]
@@ -9508,4 +9977,4 @@ const MultiChoiceList = props => {
   }));
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };

package/lib/components/checkbox/checkbox.d.ts

@@ -3,6 +3,7 @@ import { FC } from '@helpers';
 export interface ICheckboxProps {
     disabled?: boolean;
     checked?: boolean;
+    indeterminate?: boolean;
     error?: boolean;
     className?: string;
 }

package/lib/components/checkbox/helpers.d.ts

@@ -1,12 +1,12 @@
-export declare const getHoverStyles: () => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+export declare const getHoverStyles: (indeterminate: boolean) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     checked?: boolean | undefined;
 }, any>>;
-export declare const getDisabledStyles: () => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+export declare const getDisabledStyles: (indeterminate: boolean) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     checked?: boolean | undefined;
 }, any>>;
-export declare const getDefaultStyles: () => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+export declare const getDefaultStyles: (indeterminate: boolean) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     checked?: boolean | undefined;
 }, any>>;
-export declare const getInvalidStyles: () => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+export declare const getInvalidStyles: (indeterminate: boolean) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     checked?: boolean | undefined;
 }, any>>;

package/lib/components/index.d.ts

@@ -14,5 +14,6 @@ export * from './icon';
 export * from './flag';
 export * from './spinner';
 export * from './select';
+export * from './tree-view';
 export * from './molecules';
 export * from './organisms';

package/lib/components/select/index.d.ts

@@ -1,2 +1,3 @@
 export * from './select';
 export * from './components/menu-list';
+export { IOption } from './types';

package/lib/components/tree-view/components/tree-node.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from '@helpers';
+import { ITreeNode } from '../types';
+export declare const TreeNode: FC<PropsWithChildren<ITreeNode>>;

package/lib/components/tree-view/helper.d.ts

@@ -0,0 +1,12 @@
+import { INode, IFlattenNode, CheckboxState } from './types';
+export declare const flattenNodes: (flattenList: IFlattenNode[], nodes: INode[], parent?: INode, depth?: number) => void;
+export declare const getNode: (nodes: IFlattenNode[], value: string) => IFlattenNode | undefined;
+export declare const deserializeList: (flatNodes: IFlattenNode[], lists: {
+    checked: string[];
+    expanded: string[];
+}) => void;
+export declare const serializeList: (flatNodes: IFlattenNode[], key: string) => string[];
+export declare const expandAllNodes: (flatNodes: IFlattenNode[], expand: boolean) => void;
+export declare const toggleChecked: (flatNodes: IFlattenNode[], node: INode, isChecked: boolean) => void;
+export declare const toggleNode: (flatNodes: IFlattenNode[], nodeValue: string, key: string, toggleValue: boolean) => void;
+export declare const getNodeCheckState: (flattenNodeList: IFlattenNode[], node: INode) => CheckboxState;

package/lib/components/tree-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tree-view';
+export { INode, ICheckNode, IExpandNode } from './types';

package/lib/components/tree-view/tree-view.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from '@helpers';
+import { ITreeViewProps } from './types';
+export declare const TreeView: FC<PropsWithChildren<ITreeViewProps>>;

package/lib/components/tree-view/types.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+export interface INode {
+    label: string;
+    value: string;
+    helpfulMessage?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    children?: INode[];
+}
+export interface IFlattenNode extends INode {
+    parent?: INode;
+    isChild: boolean;
+    isParent: boolean;
+    isLeaf: boolean;
+    treeDepth: number;
+    index: number;
+    checked: boolean;
+    checkState: number;
+    expanded: boolean;
+}
+export interface ITreeViewProps {
+    checkedList: string[];
+    nodes: INode[];
+    expanded?: string[];
+    className?: string;
+    title?: string;
+    useCardContainer?: boolean;
+    showChildCount?: boolean;
+    expandDisabled?: boolean;
+    onCheck: (checked: string[], node?: ICheckNode) => void;
+    onClick?: (node: ICheckNode) => void;
+    onExpand?: (expanded: string[], node?: IExpandNode) => void;
+}
+export interface ITreeNode {
+    checkState: number;
+    disabled: boolean;
+    expanded: boolean;
+    isParent: boolean;
+    isLeaf: boolean;
+    expandDisabled: boolean;
+    label: string;
+    value: string;
+    children: ReactNode;
+    treeId: string;
+    invalid: boolean;
+    childCount: number;
+    showChildCount: boolean;
+    helpfulMessage?: string;
+    onCheck: (node: ICheckNode) => void;
+    onClick: (node: ICheckNode) => void;
+    onExpand: (node: IExpandNode) => void;
+}
+export interface ICheckNode extends INode {
+    checked: boolean;
+}
+export interface IExpandNode extends INode {
+    expanded: boolean;
+}
+export declare enum CheckboxState {
+    UNCHECKED = 0,
+    CHECKED = 1,
+    INDETERMINATE = 2
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",