@paubox/ui 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/index.esm.js +37 -26
  2. package/package.json +1 -1
package/index.esm.js CHANGED
@@ -23778,7 +23778,8 @@ function _templateObject$g() {
23778
23778
  }
23779
23779
  function _templateObject1$c() {
23780
23780
  var data = _tagged_template_literal$g([
23781
- "\n display: flex;\n align-items: center;\n\n width: 100%;\n position: relative;\n cursor: pointer;\n &:hover {\n background-color: ",
23781
+ "\n display: flex;\n align-items: center;\n\n width: 100%;\n position: relative;\n cursor: ",
23782
+ ";\n &:hover {\n background-color: ",
23782
23783
  ";\n }\n transition: all 150ms ease-in-out;\n\n &:focus-within {\n border-color: ",
23783
23784
  ";\n }\n\n &:focus {\n background-color: ",
23784
23785
  ";\n }\n\n border: 1px solid\n ",
@@ -23792,7 +23793,7 @@ function _templateObject1$c() {
23792
23793
  }
23793
23794
  function _templateObject2$b() {
23794
23795
  var data = _tagged_template_literal$g([
23795
- "\n flex: 1;\n z-index: 2;\n cursor: pointer;\n border: none;\n background-color: transparent;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n &::-ms-expand {\n display: none;\n }\n &::placeholder {\n color: ",
23796
+ "\n flex: 1;\n z-index: 2;\n pointer-events: none;\n border: none;\n background-color: transparent;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n &::-ms-expand {\n display: none;\n }\n &::placeholder {\n color: ",
23796
23797
  ";\n }\n color: ",
23797
23798
  ";\n padding: ",
23798
23799
  ";\n padding-right: 2rem;\n outline: none;\n &::placeholder {\n color: ",
@@ -23862,6 +23863,9 @@ function _templateObject7$1() {
23862
23863
  // Wrapper for the Input and Icons
23863
23864
  var InputWrapper$2 = styled.div(_templateObject$g());
23864
23865
  var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
23866
+ var disabled = param.disabled;
23867
+ return disabled ? 'not-allowed' : 'pointer';
23868
+ }, function(param) {
23865
23869
  var disabled = param.disabled, type = param.type;
23866
23870
  return disabled || type === 'secondary' ? neutral100 : 'white';
23867
23871
  }, function(param) {
@@ -23902,7 +23906,10 @@ var ChipWrapper$1 = styled.div(_templateObject4$8(), neutral100, neutral300, fun
23902
23906
  var MultiSelectChip = function(option) {
23903
23907
  var label = option.label, onClick = option.onClick, _option_type = option.type, type = _option_type === void 0 ? 'primary' : _option_type, _option_sz = option.sz, sz = _option_sz === void 0 ? 'sm' : _option_sz;
23904
23908
  return /*#__PURE__*/ jsxs(Chip$1, {
23905
- onClick: onClick,
23909
+ onClick: function(e) {
23910
+ e.stopPropagation();
23911
+ onClick();
23912
+ },
23906
23913
  secondary: type === 'secondary',
23907
23914
  sz: sz,
23908
23915
  children: [
@@ -23934,7 +23941,7 @@ var MultiSelect = function(_param) {
23934
23941
  "type"
23935
23942
  ]);
23936
23943
  var _useState = _sliced_to_array$b(useState(false), 2), open = _useState[0], setOpen = _useState[1];
23937
- var selectRef = useRef(null);
23944
+ var wrapperRef = useRef(null);
23938
23945
  var toggleSelect = function(option) {
23939
23946
  setValues(values.some(function(val) {
23940
23947
  return val === option.value;
@@ -23945,22 +23952,21 @@ var MultiSelect = function(_param) {
23945
23952
  ]), option);
23946
23953
  };
23947
23954
  return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
23955
+ ref: wrapperRef,
23948
23956
  disabled: disabled,
23949
23957
  type: type,
23950
23958
  error: error,
23951
23959
  open: open,
23952
23960
  className: className,
23961
+ onClick: function() {
23962
+ return !disabled && setOpen(function(prev) {
23963
+ return !prev;
23964
+ });
23965
+ },
23953
23966
  children: [
23954
23967
  /*#__PURE__*/ jsxs(InputWrapper$2, {
23955
23968
  children: [
23956
- /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({
23957
- ref: selectRef,
23958
- onClick: function() {
23959
- setOpen(function(prev) {
23960
- return !prev;
23961
- });
23962
- }
23963
- }, props), {
23969
+ /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({}, props), {
23964
23970
  type: type,
23965
23971
  sz: sz,
23966
23972
  value: values,
@@ -24009,7 +24015,7 @@ var MultiSelect = function(_param) {
24009
24015
  onClose: function() {
24010
24016
  return setOpen(false);
24011
24017
  },
24012
- anchorRef: selectRef,
24018
+ anchorRef: wrapperRef,
24013
24019
  align: "start",
24014
24020
  offset: 4,
24015
24021
  maxHeight: 400,
@@ -24025,8 +24031,9 @@ var MultiSelect = function(_param) {
24025
24031
  return val === option.value;
24026
24032
  })
24027
24033
  }, option), {
24028
- onClick: function() {
24029
- return toggleSelect(option);
24034
+ onClick: function(e) {
24035
+ e.stopPropagation();
24036
+ toggleSelect(option);
24030
24037
  }
24031
24038
  }), option.value);
24032
24039
  })
@@ -24679,7 +24686,8 @@ function _templateObject$d() {
24679
24686
  }
24680
24687
  function _templateObject1$a() {
24681
24688
  var data = _tagged_template_literal$d([
24682
- "\n display: flex;\n align-items: center;\n width: max-content;\n position: relative;\n cursor: pointer;\n &:hover {\n background-color: ",
24689
+ "\n display: flex;\n align-items: center;\n width: max-content;\n position: relative;\n cursor: ",
24690
+ ";\n &:hover {\n background-color: ",
24683
24691
  ";\n }\n transition: all 150ms ease-in-out;\n\n &:focus-within {\n border-color: ",
24684
24692
  ";\n }\n\n &:focus {\n background-color: ",
24685
24693
  ";\n }\n\n border: 1px solid\n ",
@@ -24694,7 +24702,7 @@ function _templateObject1$a() {
24694
24702
  }
24695
24703
  function _templateObject2$9() {
24696
24704
  var data = _tagged_template_literal$d([
24697
- "\n flex: 1;\n cursor: pointer;\n border: none;\n width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n background-color: transparent;\n z-index: 1;\n -webkit-appearance: none;\n -moz-appearance: none;\n &::-ms-expand {\n display: none;\n }\n color: ",
24705
+ "\n flex: 1;\n pointer-events: none;\n border: none;\n width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n background-color: transparent;\n z-index: 1;\n -webkit-appearance: none;\n -moz-appearance: none;\n &::-ms-expand {\n display: none;\n }\n color: ",
24698
24706
  ";\n padding: ",
24699
24707
  ";\n padding-right: 2rem;\n outline: none;\n\n ",
24700
24708
  "\n"
@@ -24729,6 +24737,9 @@ function _templateObject4$6() {
24729
24737
  // Wrapper for the Input and Icons
24730
24738
  var InputWrapper = styled.div(_templateObject$d());
24731
24739
  var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
24740
+ var disabled = param.disabled;
24741
+ return disabled ? 'not-allowed' : 'pointer';
24742
+ }, function(param) {
24732
24743
  var disabled = param.disabled, type = param.type;
24733
24744
  return disabled || type === 'secondary' ? neutral100 : 'white';
24734
24745
  }, function(param) {
@@ -24797,16 +24808,15 @@ var Select = function(_param) {
24797
24808
  error: error,
24798
24809
  open: open,
24799
24810
  style: style,
24811
+ onClick: function() {
24812
+ return !disabled && setOpen(function(prev) {
24813
+ return !prev;
24814
+ });
24815
+ },
24800
24816
  children: [
24801
24817
  /*#__PURE__*/ jsxs(InputWrapper, {
24802
24818
  children: [
24803
- /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$h(_object_spread$k({
24804
- onClick: function() {
24805
- return setOpen(function(prev) {
24806
- return !prev;
24807
- });
24808
- }
24809
- }, props), {
24819
+ /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$h(_object_spread$k({}, props), {
24810
24820
  type: type,
24811
24821
  disabled: disabled,
24812
24822
  sz: sz,
@@ -24852,8 +24862,9 @@ var Select = function(_param) {
24852
24862
  return /*#__PURE__*/ jsx(MenuItem, _object_spread_props$h(_object_spread$k({
24853
24863
  selected: value === option.value
24854
24864
  }, option), {
24855
- onClick: function() {
24856
- return handleSelect(option);
24865
+ onClick: function(e) {
24866
+ e.stopPropagation();
24867
+ handleSelect(option);
24857
24868
  }
24858
24869
  }), option.value);
24859
24870
  })
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@paubox/ui",
3
3
  "author": "Paubox, Inc.",
4
4
  "description": "Paubox Component Library",
5
- "version": "1.8.0",
5
+ "version": "1.9.0",
6
6
  "type": "module",
7
7
  "private": false,
8
8
  "publishConfig": {