@canvas-components/react-components 0.3.17 → 0.3.18

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 (3) hide show
  1. package/dist/index.cjs +11 -4
  2. package/dist/index.js +11 -4
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -738,7 +738,7 @@ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, re
738
738
  });
739
739
 
740
740
  // src/components/select/style.css
741
- styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus,\n.canvas-react-select:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
741
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus,\n.canvas-react-select:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-label {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
742
742
  var ReactSelect = React.forwardRef(
743
743
  function ReactSelect2(props, ref) {
744
744
  const {
@@ -1062,9 +1062,16 @@ var ReactSelect = React.forwardRef(
1062
1062
  }
1063
1063
  selectOption(option, "mouse");
1064
1064
  },
1065
- children: renderSelectOptionLabel(
1066
- option.label,
1067
- showSearch ? searchKeyword : ""
1065
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1066
+ "span",
1067
+ {
1068
+ className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
1069
+ title: option.label,
1070
+ children: renderSelectOptionLabel(
1071
+ option.label,
1072
+ showSearch ? searchKeyword : ""
1073
+ )
1074
+ }
1068
1075
  )
1069
1076
  },
1070
1077
  String(option.value)
package/dist/index.js CHANGED
@@ -717,7 +717,7 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
717
717
  });
718
718
 
719
719
  // src/components/select/style.css
720
- styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus,\n.canvas-react-select:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
720
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus,\n.canvas-react-select:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-label {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
721
721
  var ReactSelect = forwardRef(
722
722
  function ReactSelect2(props, ref) {
723
723
  const {
@@ -1041,9 +1041,16 @@ var ReactSelect = forwardRef(
1041
1041
  }
1042
1042
  selectOption(option, "mouse");
1043
1043
  },
1044
- children: renderSelectOptionLabel(
1045
- option.label,
1046
- showSearch ? searchKeyword : ""
1044
+ children: /* @__PURE__ */ jsx(
1045
+ "span",
1046
+ {
1047
+ className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
1048
+ title: option.label,
1049
+ children: renderSelectOptionLabel(
1050
+ option.label,
1051
+ showSearch ? searchKeyword : ""
1052
+ )
1053
+ }
1047
1054
  )
1048
1055
  },
1049
1056
  String(option.value)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canvas-components/react-components",
3
- "version": "0.3.17",
3
+ "version": "0.3.18",
4
4
  "description": "Shared React UI primitives for canvas-components adapters.",
5
5
  "license": "MIT",
6
6
  "type": "module",