@deephaven/iris-grid 0.46.1-beta.2 → 0.46.1-beta.7

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionalFormattingMenu.js","names":["React","useCallback","DragDropContext","Draggable","Droppable","classNames","FontAwesomeIcon","dhNewCircleLargeFilled","vsGripper","vsTrash","Button","DragUtils","Tooltip","TableUtils","Log","FormatterType","getBackgroundForStyleConfig","getColorForStyleConfig","getShortLabelForConditionType","NumberCondition","StringCondition","DateCondition","log","module","DEFAULT_CALLBACK","undefined","getRuleValue","config","column","type","isNumberType","condition","IS_NULL","IS_NOT_NULL","value","isCharType","isStringType","isDateType","isBooleanType","Error","getRuleTitle","IS_BETWEEN","start","name","end","ConditionalFormattingMenu","props","rules","onChange","onCreate","onSelect","handleRuleClick","e","rule","index","stopPropagation","debug","handleDeleteClick","updatedRules","splice","handleDragHandlerClick","handleDragEnd","result","stopDragging","destination","sourceIndex","source","destinationIndex","sourceInput","startDragging","provided","snapshot","innerRef","droppableProps","dragging","draggingFromThisWith","length","map","isDragging","draggableProps","backgroundColor","style","color","ROWS","dragHandleProps","placeholder"],"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  DragDropContext,\n  Draggable,\n  Droppable,\n  DropResult,\n} from 'react-beautiful-dnd';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';\nimport { Button, DragUtils, Tooltip } from '@deephaven/components';\nimport { TableUtils } from '@deephaven/jsapi-utils';\nimport Log from '@deephaven/log';\nimport './ConditionalFormattingMenu.scss';\nimport {\n  BaseFormatConfig,\n  FormattingRule,\n  FormatterType,\n  getBackgroundForStyleConfig,\n  getColorForStyleConfig,\n  getShortLabelForConditionType,\n  NumberCondition,\n  StringCondition,\n  DateCondition,\n} from './ConditionalFormattingUtils';\nimport { ColumnName } from '../../CommonTypes';\n\nconst log = Log.module('ConditionalFormattingMenu');\n\nexport type ChangeCallback = (rules: readonly FormattingRule[]) => void;\n\nexport type SelectCallback = (index: number) => void;\n\nexport type CreateCallback = () => void;\n\nexport type ConditionalFormattingMenuProps = {\n  rules: readonly FormattingRule[];\n  selectedColumn?: ColumnName;\n  onChange?: ChangeCallback;\n  onCreate?: CreateCallback;\n  onSelect?: SelectCallback;\n};\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction getRuleValue(config: BaseFormatConfig): string {\n  const {\n    column: { type },\n  } = config;\n  if (TableUtils.isNumberType(type)) {\n    return config.condition === NumberCondition.IS_NULL ||\n      config.condition === NumberCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isCharType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isStringType(type)) {\n    return config.condition === StringCondition.IS_NULL ||\n      config.condition === StringCondition.IS_NOT_NULL\n      ? ''\n      : `\"${config.value}\"`;\n  }\n  if (TableUtils.isDateType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isBooleanType(type)) {\n    return '';\n  }\n  throw new Error(`Invalid column type ${type} in getRuleValue`);\n}\n\nfunction getRuleTitle(config: BaseFormatConfig): string {\n  if (\n    TableUtils.isNumberType(config.column.type) &&\n    config.condition === NumberCondition.IS_BETWEEN\n  ) {\n    return `${config.start} < ${config.column.name} < ${config.end}`;\n  }\n  return `${config.column.name} ${getShortLabelForConditionType(\n    (config as BaseFormatConfig).column.type,\n    (config as BaseFormatConfig).condition\n  )} \n    ${getRuleValue(config as BaseFormatConfig)}`;\n}\n\nfunction ConditionalFormattingMenu(\n  props: ConditionalFormattingMenuProps\n): JSX.Element {\n  const {\n    rules = [],\n    onChange = DEFAULT_CALLBACK,\n    onCreate = DEFAULT_CALLBACK,\n    onSelect = DEFAULT_CALLBACK,\n  } = props;\n\n  const handleRuleClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Rule clicked', rule, index);\n      onSelect(index);\n    },\n    [onSelect]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Delete button clicked', rule, index);\n      const updatedRules = [...rules];\n      updatedRules.splice(index, 1);\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  const handleDragHandlerClick = useCallback(e => {\n    e.stopPropagation();\n  }, []);\n\n  const handleDragEnd = useCallback(\n    (result: DropResult) => {\n      DragUtils.stopDragging();\n\n      // if dropped outside the list\n      if (result.destination == null) {\n        return;\n      }\n      const sourceIndex = result.source.index;\n      const destinationIndex = result.destination.index;\n      const updatedRules = [...rules];\n      const sourceInput = rules[sourceIndex];\n\n      updatedRules.splice(sourceIndex, 1);\n      updatedRules.splice(destinationIndex, 0, sourceInput);\n\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  // Display list of rules\n  return (\n    <div className=\"conditional-formatting-rules\">\n      <DragDropContext\n        onDragStart={DragUtils.startDragging}\n        onDragEnd={handleDragEnd}\n      >\n        <Droppable droppableId=\"droppable-custom-columns\">\n          {(provided, snapshot) => (\n            <div\n              ref={provided.innerRef}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...provided.droppableProps}\n              className={classNames('droppable-container', {\n                dragging: snapshot.draggingFromThisWith,\n              })}\n            >\n              {rules.length === 0 && (\n                <div className=\"text-muted pl-2\">No formats defined</div>\n              )}\n              {rules.map((rule, index) => (\n                <Draggable\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={`${index}-${rule.type}`}\n                  draggableId={`${index}-${rule.type}`}\n                  index={index}\n                  disableInteractiveElementBlocking\n                >\n                  {\n                    // eslint-disable-next-line @typescript-eslint/no-shadow\n                    (provided, snapshot) => (\n                      <div\n                        role=\"menuitem\"\n                        tabIndex={0}\n                        onClick={e => handleRuleClick(e, rule, index)}\n                        className={classNames('draggable-container', {\n                          dragging: snapshot.isDragging,\n                        })}\n                        ref={provided.innerRef}\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        {...provided.draggableProps}\n                      >\n                        <div className=\"conditional-formatting-list-item\">\n                          <div className=\"formatting-item\">\n                            <div className=\"rule-icon\">\n                              <span\n                                className=\"rule-icon-bg\"\n                                style={{\n                                  backgroundColor: getBackgroundForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                  color: getColorForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                }}\n                              >\n                                {rule.type === FormatterType.ROWS\n                                  ? 'row'\n                                  : 'col'}\n                              </span>\n                            </div>\n                            <div className=\"rule-title\">\n                              {getRuleTitle(rule.config as BaseFormatConfig)}\n                            </div>\n                            <Button\n                              kind=\"ghost\"\n                              className=\"ml-1 px-2\"\n                              onClick={e => handleDeleteClick(e, rule, index)}\n                              icon={vsTrash}\n                              tooltip=\"Delete rule\"\n                            />\n                            <button\n                              type=\"button\"\n                              className=\"btn btn-link btn-link-icon px-2 btn-drag-handle\"\n                              onClick={handleDragHandlerClick}\n                              // eslint-disable-next-line react/jsx-props-no-spreading\n                              {...provided.dragHandleProps}\n                            >\n                              <Tooltip>Drag to re-order</Tooltip>\n                              <FontAwesomeIcon icon={vsGripper} />\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    )\n                  }\n                </Draggable>\n              ))}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n      <hr />\n      <Button kind=\"ghost\" onClick={onCreate} icon={dhNewCircleLargeFilled}>\n        Add New Rule\n      </Button>\n    </div>\n  );\n}\n\nexport default ConditionalFormattingMenu;\n"],"mappings":"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"}
+{"version":3,"file":"ConditionalFormattingMenu.js","names":["React","useCallback","DragDropContext","Draggable","Droppable","classNames","FontAwesomeIcon","dhNewCircleLargeFilled","vsGripper","vsTrash","Button","DragUtils","Tooltip","TableUtils","Log","FormatterType","getBackgroundForStyleConfig","getColorForStyleConfig","getShortLabelForConditionType","NumberCondition","StringCondition","DateCondition","log","module","DEFAULT_CALLBACK","undefined","getRuleValue","config","column","type","isNumberType","condition","IS_NULL","IS_NOT_NULL","value","isCharType","isStringType","isDateType","isBooleanType","Error","getRuleTitle","IS_BETWEEN","start","name","end","ConditionalFormattingMenu","props","rules","onChange","onCreate","onSelect","handleRuleClick","e","rule","index","stopPropagation","debug","handleDeleteClick","updatedRules","splice","handleDragHandlerClick","handleDragEnd","result","stopDragging","destination","sourceIndex","source","destinationIndex","sourceInput","startDragging","provided","snapshot","innerRef","droppableProps","dragging","draggingFromThisWith","length","map","isDragging","draggableProps","backgroundColor","style","color","ROWS","dragHandleProps","placeholder"],"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  DragDropContext,\n  Draggable,\n  Droppable,\n  DropResult,\n} from 'react-beautiful-dnd';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';\nimport { Button, DragUtils, Tooltip } from '@deephaven/components';\nimport { TableUtils } from '@deephaven/jsapi-utils';\nimport Log from '@deephaven/log';\nimport './ConditionalFormattingMenu.scss';\nimport {\n  BaseFormatConfig,\n  FormattingRule,\n  FormatterType,\n  getBackgroundForStyleConfig,\n  getColorForStyleConfig,\n  getShortLabelForConditionType,\n  NumberCondition,\n  StringCondition,\n  DateCondition,\n} from './ConditionalFormattingUtils';\nimport { ColumnName } from '../../CommonTypes';\n\nconst log = Log.module('ConditionalFormattingMenu');\n\nexport type ChangeCallback = (rules: readonly FormattingRule[]) => void;\n\nexport type SelectCallback = (index: number) => void;\n\nexport type CreateCallback = () => void;\n\nexport type ConditionalFormattingMenuProps = {\n  rules: readonly FormattingRule[];\n  selectedColumn?: ColumnName;\n  onChange?: ChangeCallback;\n  onCreate?: CreateCallback;\n  onSelect?: SelectCallback;\n};\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction getRuleValue(config: BaseFormatConfig): string {\n  const {\n    column: { type },\n  } = config;\n  if (TableUtils.isNumberType(type)) {\n    return config.condition === NumberCondition.IS_NULL ||\n      config.condition === NumberCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isCharType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isStringType(type)) {\n    return config.condition === StringCondition.IS_NULL ||\n      config.condition === StringCondition.IS_NOT_NULL\n      ? ''\n      : `\"${config.value}\"`;\n  }\n  if (TableUtils.isDateType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isBooleanType(type)) {\n    return '';\n  }\n  throw new Error(`Invalid column type ${type} in getRuleValue`);\n}\n\nfunction getRuleTitle(config: BaseFormatConfig): string {\n  if (\n    TableUtils.isNumberType(config.column.type) &&\n    config.condition === NumberCondition.IS_BETWEEN\n  ) {\n    return `${config.start} < ${config.column.name} < ${config.end}`;\n  }\n  return `${config.column.name} ${getShortLabelForConditionType(\n    (config as BaseFormatConfig).column.type,\n    (config as BaseFormatConfig).condition\n  )} \n    ${getRuleValue(config as BaseFormatConfig)}`;\n}\n\nfunction ConditionalFormattingMenu(\n  props: ConditionalFormattingMenuProps\n): JSX.Element {\n  const {\n    rules = [],\n    onChange = DEFAULT_CALLBACK,\n    onCreate = DEFAULT_CALLBACK,\n    onSelect = DEFAULT_CALLBACK,\n  } = props;\n\n  const handleRuleClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Rule clicked', rule, index);\n      onSelect(index);\n    },\n    [onSelect]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Delete button clicked', rule, index);\n      const updatedRules = [...rules];\n      updatedRules.splice(index, 1);\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  const handleDragHandlerClick = useCallback(e => {\n    e.stopPropagation();\n  }, []);\n\n  const handleDragEnd = useCallback(\n    (result: DropResult) => {\n      DragUtils.stopDragging();\n\n      // if dropped outside the list\n      if (result.destination == null) {\n        return;\n      }\n      const sourceIndex = result.source.index;\n      const destinationIndex = result.destination.index;\n      const updatedRules = [...rules];\n      const sourceInput = rules[sourceIndex];\n\n      updatedRules.splice(sourceIndex, 1);\n      updatedRules.splice(destinationIndex, 0, sourceInput);\n\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  // Display list of rules\n  return (\n    <div className=\"conditional-formatting-rules\">\n      <DragDropContext\n        onDragStart={DragUtils.startDragging}\n        onDragEnd={handleDragEnd}\n      >\n        <Droppable droppableId=\"droppable-custom-columns\">\n          {(provided, snapshot) => (\n            <div\n              ref={provided.innerRef}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...provided.droppableProps}\n              className={classNames('droppable-container', {\n                dragging: snapshot.draggingFromThisWith,\n              })}\n            >\n              {rules.length === 0 && (\n                <div className=\"text-muted pl-2\">No formats defined</div>\n              )}\n              {rules.map((rule, index) => (\n                <Draggable\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={`${index}-${rule.type}`}\n                  draggableId={`${index}-${rule.type}`}\n                  index={index}\n                  disableInteractiveElementBlocking\n                >\n                  {\n                    // eslint-disable-next-line @typescript-eslint/no-shadow\n                    (provided, snapshot) => (\n                      <div\n                        role=\"menuitem\"\n                        tabIndex={0}\n                        onClick={e => handleRuleClick(e, rule, index)}\n                        className={classNames('draggable-container', {\n                          dragging: snapshot.isDragging,\n                        })}\n                        ref={provided.innerRef}\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        {...provided.draggableProps}\n                      >\n                        <div className=\"conditional-formatting-list-item\">\n                          <div className=\"formatting-item\">\n                            <div className=\"rule-icon\">\n                              <span\n                                className=\"rule-icon-bg\"\n                                style={{\n                                  backgroundColor: getBackgroundForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                  color: getColorForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                }}\n                              >\n                                {rule.type === FormatterType.ROWS\n                                  ? 'row'\n                                  : 'col'}\n                              </span>\n                            </div>\n                            <div className=\"rule-title\">\n                              {getRuleTitle(rule.config as BaseFormatConfig)}\n                            </div>\n                            <Button\n                              kind=\"ghost\"\n                              className=\"ml-1 px-2\"\n                              onClick={e => handleDeleteClick(e, rule, index)}\n                              icon={vsTrash}\n                              tooltip=\"Delete rule\"\n                            />\n                            <button\n                              type=\"button\"\n                              className=\"btn btn-link btn-link-icon px-2 btn-drag-handle\"\n                              onClick={handleDragHandlerClick}\n                              // eslint-disable-next-line react/jsx-props-no-spreading\n                              {...provided.dragHandleProps}\n                            >\n                              <Tooltip>Drag to re-order</Tooltip>\n                              <FontAwesomeIcon icon={vsGripper} />\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    )\n                  }\n                </Draggable>\n              ))}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n      <hr />\n      <Button kind=\"ghost\" onClick={onCreate} icon={dhNewCircleLargeFilled}>\n        Add New Rule\n      </Button>\n    </div>\n  );\n}\n\nexport default ConditionalFormattingMenu;\n"],"mappings":"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"}

package/dist/sidebar/conditional-formatting/RowFormatEditor.js

@@ -9,6 +9,9 @@ import { ComboBox } from '@deephaven/components';
 import { getDefaultConditionConfigForType, getConditionConfig, getDefaultStyleConfig } from "./ConditionalFormattingUtils.js";
 import ConditionEditor from "./ConditionEditor.js";
 import StyleEditor from "./StyleEditor.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var log = Log.module('RowFormatEditor');
 var DEFAULT_CALLBACK = () => undefined;
 function makeDefaultConfig(columns) {
@@ -95,28 +98,33 @@ function RowFormatEditor(props) {
       value: name
     };
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "conditional-rule-editor form"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-2"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "mb-0"
-  }, "Format Row If"), /*#__PURE__*/React.createElement(ComboBox, {
-    defaultValue: selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.name,
-    options: columnInputOptions,
-    inputPlaceholder: "Select a column",
-    spellCheck: false,
-    onChange: handleColumnChange,
-    searchPlaceholder: "Filter columns"
-  })), selectedColumn !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConditionEditor, {
-    column: selectedColumn,
-    config: conditionConfig,
-    dh: dh,
-    onChange: handleConditionChange
-  }), /*#__PURE__*/React.createElement(StyleEditor, {
-    config: selectedStyle,
-    onChange: handleStyleChange
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "conditional-rule-editor form",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "mb-2",
+      children: [/*#__PURE__*/_jsx("label", {
+        className: "mb-0",
+        children: "Format Row If"
+      }), /*#__PURE__*/_jsx(ComboBox, {
+        defaultValue: selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.name,
+        options: columnInputOptions,
+        inputPlaceholder: "Select a column",
+        spellCheck: false,
+        onChange: handleColumnChange,
+        searchPlaceholder: "Filter columns"
+      })]
+    }), selectedColumn !== undefined && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ConditionEditor, {
+        column: selectedColumn,
+        config: conditionConfig,
+        dh: dh,
+        onChange: handleConditionChange
+      }), /*#__PURE__*/_jsx(StyleEditor, {
+        config: selectedStyle,
+        onChange: handleStyleChange
+      })]
+    })]
+  });
 }
 export default RowFormatEditor;
 //# sourceMappingURL=RowFormatEditor.js.map

package/dist/sidebar/conditional-formatting/RowFormatEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowFormatEditor.js","names":["React","useCallback","useEffect","useState","Log","ComboBox","getDefaultConditionConfigForType","getConditionConfig","getDefaultStyleConfig","ConditionEditor","StyleEditor","log","module","DEFAULT_CALLBACK","undefined","makeDefaultConfig","columns","type","name","column","config","style","RowFormatEditor","props","dh","onChange","selectedColumn","setColumn","find","c","conditionConfig","setConditionConfig","conditionValid","setConditionValid","selectedStyle","setStyle","handleColumnChange","value","newColumn","error","handleConditionChange","updatedConditionConfig","isValid","debug","handleStyleChange","updatedStyleConfig","updateRowFormat","columnInputOptions","map","title"],"sources":["../../../src/sidebar/conditional-formatting/RowFormatEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport { ComboBox } from '@deephaven/components';\nimport {\n  BaseFormatConfig,\n  ChangeCallback,\n  getDefaultConditionConfigForType,\n  getConditionConfig,\n  getDefaultStyleConfig,\n  ModelColumn,\n} from './ConditionalFormattingUtils';\nimport ConditionEditor from './ConditionEditor';\nimport StyleEditor from './StyleEditor';\n\nconst log = Log.module('RowFormatEditor');\n\nexport interface RowFormatEditorProps {\n  columns: ModelColumn[];\n  config?: BaseFormatConfig;\n  dh: DhType;\n  onChange?: ChangeCallback;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction makeDefaultConfig(columns: ModelColumn[]): BaseFormatConfig {\n  const { type, name } = columns[0];\n  const column = { type, name };\n  const config = {\n    column,\n    style: getDefaultStyleConfig(),\n    ...getDefaultConditionConfigForType(type),\n  };\n  return config;\n}\n\nfunction RowFormatEditor(props: RowFormatEditorProps): JSX.Element {\n  const {\n    columns,\n    config = makeDefaultConfig(columns),\n    dh,\n    onChange = DEFAULT_CALLBACK,\n  } = props;\n\n  const [selectedColumn, setColumn] = useState(\n    columns.find(\n      c => c.name === config.column.name && c.type === config.column.type\n    ) ?? columns[0]\n  );\n  const [conditionConfig, setConditionConfig] = useState(\n    getConditionConfig(config)\n  );\n  const [conditionValid, setConditionValid] = useState(false);\n  const [selectedStyle, setStyle] = useState(config.style);\n\n  const handleColumnChange = useCallback(\n    value => {\n      const newColumn = columns.find(({ name }) => name === value);\n      if (newColumn !== undefined) {\n        setColumn(newColumn);\n        if (selectedColumn.type !== newColumn.type) {\n          setConditionConfig(getDefaultConditionConfigForType(newColumn.type));\n          setConditionValid(false);\n        }\n      } else {\n        log.error(`Column ${value} not found.`);\n      }\n    },\n    [columns, selectedColumn]\n  );\n\n  const handleConditionChange = useCallback(\n    (updatedConditionConfig, isValid) => {\n      log.debug('handleConditionChange', updatedConditionConfig, isValid);\n      setConditionConfig(updatedConditionConfig);\n      setConditionValid(isValid);\n    },\n    []\n  );\n\n  const handleStyleChange = useCallback(updatedStyleConfig => {\n    log.debug('handleStyleChange', updatedStyleConfig);\n    setStyle(updatedStyleConfig);\n  }, []);\n\n  useEffect(\n    function updateRowFormat() {\n      if (selectedColumn === undefined) {\n        log.debug('Column is not selected, skip update.');\n        return;\n      }\n      if (selectedStyle === undefined) {\n        log.debug('Style is not selected, skip update.');\n        return;\n      }\n      const { type, name } = selectedColumn;\n      const column = { type, name };\n      onChange(\n        {\n          column,\n          style: selectedStyle,\n          ...conditionConfig,\n        },\n        conditionValid\n      );\n    },\n    [onChange, selectedColumn, selectedStyle, conditionConfig, conditionValid]\n  );\n\n  const columnInputOptions = columns.map(({ name }) => ({\n    title: name,\n    value: name,\n  }));\n\n  return (\n    <div className=\"conditional-rule-editor form\">\n      <div className=\"mb-2\">\n        <label className=\"mb-0\">Format Row If</label>\n        <ComboBox\n          defaultValue={selectedColumn?.name}\n          options={columnInputOptions}\n          inputPlaceholder=\"Select a column\"\n          spellCheck={false}\n          onChange={handleColumnChange}\n          searchPlaceholder=\"Filter columns\"\n        />\n      </div>\n\n      {selectedColumn !== undefined && (\n        <>\n          <ConditionEditor\n            column={selectedColumn}\n            config={conditionConfig}\n            dh={dh}\n            onChange={handleConditionChange}\n          />\n          <StyleEditor config={selectedStyle} onChange={handleStyleChange} />\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default RowFormatEditor;\n"],"mappings":"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"}
+{"version":3,"file":"RowFormatEditor.js","names":["React","useCallback","useEffect","useState","Log","ComboBox","getDefaultConditionConfigForType","getConditionConfig","getDefaultStyleConfig","ConditionEditor","StyleEditor","log","module","DEFAULT_CALLBACK","undefined","makeDefaultConfig","columns","type","name","column","config","style","RowFormatEditor","props","dh","onChange","selectedColumn","setColumn","find","c","conditionConfig","setConditionConfig","conditionValid","setConditionValid","selectedStyle","setStyle","handleColumnChange","value","newColumn","error","handleConditionChange","updatedConditionConfig","isValid","debug","handleStyleChange","updatedStyleConfig","updateRowFormat","columnInputOptions","map","title"],"sources":["../../../src/sidebar/conditional-formatting/RowFormatEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport { ComboBox } from '@deephaven/components';\nimport {\n  BaseFormatConfig,\n  ChangeCallback,\n  getDefaultConditionConfigForType,\n  getConditionConfig,\n  getDefaultStyleConfig,\n  ModelColumn,\n} from './ConditionalFormattingUtils';\nimport ConditionEditor from './ConditionEditor';\nimport StyleEditor from './StyleEditor';\n\nconst log = Log.module('RowFormatEditor');\n\nexport interface RowFormatEditorProps {\n  columns: ModelColumn[];\n  config?: BaseFormatConfig;\n  dh: DhType;\n  onChange?: ChangeCallback;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction makeDefaultConfig(columns: ModelColumn[]): BaseFormatConfig {\n  const { type, name } = columns[0];\n  const column = { type, name };\n  const config = {\n    column,\n    style: getDefaultStyleConfig(),\n    ...getDefaultConditionConfigForType(type),\n  };\n  return config;\n}\n\nfunction RowFormatEditor(props: RowFormatEditorProps): JSX.Element {\n  const {\n    columns,\n    config = makeDefaultConfig(columns),\n    dh,\n    onChange = DEFAULT_CALLBACK,\n  } = props;\n\n  const [selectedColumn, setColumn] = useState(\n    columns.find(\n      c => c.name === config.column.name && c.type === config.column.type\n    ) ?? columns[0]\n  );\n  const [conditionConfig, setConditionConfig] = useState(\n    getConditionConfig(config)\n  );\n  const [conditionValid, setConditionValid] = useState(false);\n  const [selectedStyle, setStyle] = useState(config.style);\n\n  const handleColumnChange = useCallback(\n    value => {\n      const newColumn = columns.find(({ name }) => name === value);\n      if (newColumn !== undefined) {\n        setColumn(newColumn);\n        if (selectedColumn.type !== newColumn.type) {\n          setConditionConfig(getDefaultConditionConfigForType(newColumn.type));\n          setConditionValid(false);\n        }\n      } else {\n        log.error(`Column ${value} not found.`);\n      }\n    },\n    [columns, selectedColumn]\n  );\n\n  const handleConditionChange = useCallback(\n    (updatedConditionConfig, isValid) => {\n      log.debug('handleConditionChange', updatedConditionConfig, isValid);\n      setConditionConfig(updatedConditionConfig);\n      setConditionValid(isValid);\n    },\n    []\n  );\n\n  const handleStyleChange = useCallback(updatedStyleConfig => {\n    log.debug('handleStyleChange', updatedStyleConfig);\n    setStyle(updatedStyleConfig);\n  }, []);\n\n  useEffect(\n    function updateRowFormat() {\n      if (selectedColumn === undefined) {\n        log.debug('Column is not selected, skip update.');\n        return;\n      }\n      if (selectedStyle === undefined) {\n        log.debug('Style is not selected, skip update.');\n        return;\n      }\n      const { type, name } = selectedColumn;\n      const column = { type, name };\n      onChange(\n        {\n          column,\n          style: selectedStyle,\n          ...conditionConfig,\n        },\n        conditionValid\n      );\n    },\n    [onChange, selectedColumn, selectedStyle, conditionConfig, conditionValid]\n  );\n\n  const columnInputOptions = columns.map(({ name }) => ({\n    title: name,\n    value: name,\n  }));\n\n  return (\n    <div className=\"conditional-rule-editor form\">\n      <div className=\"mb-2\">\n        <label className=\"mb-0\">Format Row If</label>\n        <ComboBox\n          defaultValue={selectedColumn?.name}\n          options={columnInputOptions}\n          inputPlaceholder=\"Select a column\"\n          spellCheck={false}\n          onChange={handleColumnChange}\n          searchPlaceholder=\"Filter columns\"\n        />\n      </div>\n\n      {selectedColumn !== undefined && (\n        <>\n          <ConditionEditor\n            column={selectedColumn}\n            config={conditionConfig}\n            dh={dh}\n            onChange={handleConditionChange}\n          />\n          <StyleEditor config={selectedStyle} onChange={handleStyleChange} />\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default RowFormatEditor;\n"],"mappings":"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"}

package/dist/sidebar/conditional-formatting/StyleEditor.js

@@ -6,6 +6,8 @@ import { dhSort, vsCheck } from '@deephaven/icons';
 import { Button, DropdownMenu } from '@deephaven/components';
 import { FormatStyleType, getLabelForStyleType, getBackgroundForStyleConfig, getColorForStyleConfig } from "./ConditionalFormattingUtils.js";
 import "./StyleEditor.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var log = Log.module('StyleEditor');
 var DEFAULT_BACKGROUND = '#fcfcfa';
 var DEFAULT_COLOR_LIGHT = '#f0f0ee';
@@ -63,8 +65,7 @@ function StyleEditor(props) {
       var option = styleOptions[index];
       var key = "option-".concat(index, "-").concat(option);
       matchFound = matchFound || option === styleType;
-      optionArray.push( /*#__PURE__*/React.createElement(Button, {
-        key: key,
+      optionArray.push( /*#__PURE__*/_jsxs(Button, {
         kind: "inline",
         className: "style-option-btn",
         onClick: () => {
@@ -78,73 +79,84 @@ function StyleEditor(props) {
           background: getBackgroundForStyleConfig({
             type: option
           })
-        }
-      }, option === styleType && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: vsCheck,
-        className: "mr-2"
-      }), option !== styleType && /*#__PURE__*/React.createElement("span", {
-        className: "mr-4"
-      }), getLabelForStyleType(option)));
+        },
+        children: [option === styleType && /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: vsCheck,
+          className: "mr-2"
+        }), option !== styleType && /*#__PURE__*/_jsx("span", {
+          className: "mr-4"
+        }), getLabelForStyleType(option)]
+      }, key));
     };
     for (var index = 0; index < styleOptions.length; index += 1) {
       _loop();
     }
     return optionArray;
   }, [styleOptions, styleType]);
-  var renderMenuElement = useCallback(() => /*#__PURE__*/React.createElement("div", {
+  var renderMenuElement = useCallback(() => /*#__PURE__*/_jsx("div", {
     className: "style-menu-container",
     role: "presentation",
     style: {
       width: dropdownWidth
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "style-options"
-  }, renderOptions())), [dropdownWidth, renderOptions]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "style-editor"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-2",
-    ref: csContainer
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "mb-0"
-  }, "Style"), /*#__PURE__*/React.createElement(Button, {
-    kind: "inline",
-    className: "cs-dropdown",
-    style: {
-      color: getColorForStyleConfig({
-        type: styleType
-      }),
-      background: getBackgroundForStyleConfig({
-        type: styleType
-      })
-    },
-    onClick: handleToggleClick
-  }, getLabelForStyleType(styleType), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: dhSort,
-    className: "cs-caret"
-  })), /*#__PURE__*/React.createElement(DropdownMenu, {
-    isShown: isShown,
-    actions: {
-      menuElement: renderMenuElement()
     },
-    popperOptions: {
-      placement: 'bottom-start'
-    },
-    popperClassName: "style-dropdown-menu",
-    onMenuClosed: handleMenuClosed,
-    menuStyle: {
-      maxWidth: '100rem'
-    }
-  }))), styleType === FormatStyleType.CUSTOM && /*#__PURE__*/React.createElement("div", {
-    className: "mb-2"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "mb-0"
-  }, "Background"), /*#__PURE__*/React.createElement("input", {
-    type: "color",
-    value: background,
-    className: "custom-select color-select",
-    onChange: handleBackgroundChange
-  })));
+    children: /*#__PURE__*/_jsx("div", {
+      className: "style-options",
+      children: renderOptions()
+    })
+  }), [dropdownWidth, renderOptions]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "style-editor",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "mb-2",
+      ref: csContainer,
+      children: [/*#__PURE__*/_jsx("label", {
+        className: "mb-0",
+        children: "Style"
+      }), /*#__PURE__*/_jsxs(Button, {
+        kind: "inline",
+        className: "cs-dropdown",
+        style: {
+          color: getColorForStyleConfig({
+            type: styleType
+          }),
+          background: getBackgroundForStyleConfig({
+            type: styleType
+          })
+        },
+        onClick: handleToggleClick,
+        children: [getLabelForStyleType(styleType), /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: dhSort,
+            className: "cs-caret"
+          })
+        }), /*#__PURE__*/_jsx(DropdownMenu, {
+          isShown: isShown,
+          actions: {
+            menuElement: renderMenuElement()
+          },
+          popperOptions: {
+            placement: 'bottom-start'
+          },
+          popperClassName: "style-dropdown-menu",
+          onMenuClosed: handleMenuClosed,
+          menuStyle: {
+            maxWidth: '100rem'
+          }
+        })]
+      })]
+    }), styleType === FormatStyleType.CUSTOM && /*#__PURE__*/_jsxs("div", {
+      className: "mb-2",
+      children: [/*#__PURE__*/_jsx("label", {
+        className: "mb-0",
+        children: "Background"
+      }), /*#__PURE__*/_jsx("input", {
+        type: "color",
+        value: background,
+        className: "custom-select color-select",
+        onChange: handleBackgroundChange
+      })]
+    })]
+  });
 }
 export default StyleEditor;
 //# sourceMappingURL=StyleEditor.js.map

package/dist/sidebar/conditional-formatting/StyleEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyleEditor.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","FontAwesomeIcon","Log","ColorUtils","dhSort","vsCheck","Button","DropdownMenu","FormatStyleType","getLabelForStyleType","getBackgroundForStyleConfig","getColorForStyleConfig","log","module","DEFAULT_BACKGROUND","DEFAULT_COLOR_LIGHT","DEFAULT_COLOR_DARK","DEFAULT_DROPDOWN_WIDTH","DEFAULT_CALLBACK","undefined","StyleEditor","props","config","onChange","styleType","setStyleType","type","background","setBackground","customConfig","isShown","setShown","dropdownWidth","setDropdownWidth","csContainer","handleBackgroundChange","e","value","target","debug","handleMenuClosed","handleToggleClick","updateDropdownWidth","styleOptions","NO_FORMATTING","POSITIVE","NEGATIVE","WARN","NEUTRAL","ACCENT_1","ACCENT_2","CUSTOM","current","getBoundingClientRect","width","updateTheme","color","isDark","renderOptions","matchFound","optionArray","option","index","key","push","length","renderMenuElement","menuElement","placement","maxWidth"],"sources":["../../../src/sidebar/conditional-formatting/StyleEditor.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Log from '@deephaven/log';\nimport { ColorUtils } from '@deephaven/utils';\nimport { dhSort, vsCheck } from '@deephaven/icons';\nimport { Button, DropdownMenu } from '@deephaven/components';\nimport {\n  FormatStyleType,\n  getLabelForStyleType,\n  FormatStyleConfig,\n  getBackgroundForStyleConfig,\n  getColorForStyleConfig,\n} from './ConditionalFormattingUtils';\n\nimport './StyleEditor.scss';\n\nconst log = Log.module('StyleEditor');\n\nconst DEFAULT_BACKGROUND = '#fcfcfa';\n\nconst DEFAULT_COLOR_LIGHT = '#f0f0ee';\n\nconst DEFAULT_COLOR_DARK = '#1a171a';\n\nconst DEFAULT_DROPDOWN_WIDTH = 200;\n\nexport interface ConditionEditorProps {\n  config: FormatStyleConfig;\n  onChange?: (config: FormatStyleConfig) => void;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction StyleEditor(props: ConditionEditorProps): JSX.Element {\n  const { config, onChange = DEFAULT_CALLBACK } = props;\n  const [styleType, setStyleType] = useState(config.type);\n  const [background, setBackground] = useState(\n    config.customConfig?.background ?? DEFAULT_BACKGROUND\n  );\n  const [isShown, setShown] = useState(false);\n  const [dropdownWidth, setDropdownWidth] = useState(DEFAULT_DROPDOWN_WIDTH);\n  const csContainer = useRef<HTMLDivElement>(null);\n\n  const handleBackgroundChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleBackgroundChange', value);\n    setBackground(value);\n  }, []);\n\n  const handleMenuClosed = useCallback(() => {\n    if (isShown) {\n      setShown(false);\n    }\n  }, [isShown]);\n\n  const handleToggleClick = useCallback(() => {\n    if (!isShown) {\n      updateDropdownWidth();\n    }\n    setShown(!isShown);\n  }, [isShown]);\n\n  const styleOptions = useMemo(\n    () => [\n      FormatStyleType.NO_FORMATTING,\n      FormatStyleType.POSITIVE,\n      FormatStyleType.NEGATIVE,\n      FormatStyleType.WARN,\n      FormatStyleType.NEUTRAL,\n      FormatStyleType.ACCENT_1,\n      FormatStyleType.ACCENT_2,\n      FormatStyleType.CUSTOM,\n    ],\n    []\n  );\n\n  function updateDropdownWidth(): void {\n    if (csContainer.current) {\n      setDropdownWidth(csContainer.current.getBoundingClientRect().width);\n    }\n  }\n\n  useEffect(\n    function updateTheme() {\n      onChange({\n        type: styleType,\n        customConfig: {\n          color: ColorUtils.isDark(background)\n            ? DEFAULT_COLOR_LIGHT\n            : DEFAULT_COLOR_DARK,\n          background,\n        },\n      });\n    },\n    [onChange, styleType, background]\n  );\n\n  const renderOptions = useCallback(() => {\n    let matchFound = false;\n    const optionArray: JSX.Element[] = [];\n    for (let index = 0; index < styleOptions.length; index += 1) {\n      const option = styleOptions[index];\n      const key = `option-${index}-${option}`;\n      matchFound = matchFound || option === styleType;\n      optionArray.push(\n        <Button\n          key={key}\n          kind=\"inline\"\n          className=\"style-option-btn\"\n          onClick={() => {\n            setStyleType(option);\n            setShown(false);\n          }}\n          style={{\n            color: getColorForStyleConfig({ type: option }),\n            background: getBackgroundForStyleConfig({ type: option }),\n          }}\n        >\n          {option === styleType && (\n            <FontAwesomeIcon icon={vsCheck} className=\"mr-2\" />\n          )}\n          {option !== styleType && <span className=\"mr-4\" />}\n          {getLabelForStyleType(option)}\n        </Button>\n      );\n    }\n    return optionArray;\n  }, [styleOptions, styleType]);\n\n  const renderMenuElement = useCallback(\n    () => (\n      <div\n        className=\"style-menu-container\"\n        role=\"presentation\"\n        style={{ width: dropdownWidth }}\n      >\n        <div className=\"style-options\">{renderOptions()}</div>\n      </div>\n    ),\n    [dropdownWidth, renderOptions]\n  );\n\n  return (\n    <div className=\"style-editor\">\n      <div className=\"mb-2\" ref={csContainer}>\n        <label className=\"mb-0\">Style</label>\n        <Button\n          kind=\"inline\"\n          className=\"cs-dropdown\"\n          style={{\n            color: getColorForStyleConfig({ type: styleType }),\n            background: getBackgroundForStyleConfig({ type: styleType }),\n          }}\n          onClick={handleToggleClick}\n        >\n          {getLabelForStyleType(styleType)}\n\n          <span>\n            <FontAwesomeIcon icon={dhSort} className=\"cs-caret\" />\n          </span>\n          <DropdownMenu\n            isShown={isShown}\n            actions={{ menuElement: renderMenuElement() }}\n            popperOptions={{ placement: 'bottom-start' }}\n            popperClassName=\"style-dropdown-menu\"\n            onMenuClosed={handleMenuClosed}\n            menuStyle={{ maxWidth: '100rem' }}\n          />\n        </Button>\n      </div>\n\n      {styleType === FormatStyleType.CUSTOM && (\n        <div className=\"mb-2\">\n          <label className=\"mb-0\">Background</label>\n          <input\n            type=\"color\"\n            value={background}\n            className=\"custom-select color-select\"\n            onChange={handleBackgroundChange}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default StyleEditor;\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,eAAe,QAAQ,gCAAgC;AAChE,OAAOC,GAAG,MAAM,gBAAgB;AAChC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,EAAEC,OAAO,QAAQ,kBAAkB;AAClD,SAASC,MAAM,EAAEC,YAAY,QAAQ,uBAAuB;AAAC,SAE3DC,eAAe,EACfC,oBAAoB,EAEpBC,2BAA2B,EAC3BC,sBAAsB;AAAA;AAKxB,IAAMC,GAAG,GAAGV,GAAG,CAACW,MAAM,CAAC,aAAa,CAAC;AAErC,IAAMC,kBAAkB,GAAG,SAAS;AAEpC,IAAMC,mBAAmB,GAAG,SAAS;AAErC,IAAMC,kBAAkB,GAAG,SAAS;AAEpC,IAAMC,sBAAsB,GAAG,GAAG;AAOlC,IAAMC,gBAAgB,GAAG,MAAMC,SAAS;AAExC,SAASC,WAAW,CAACC,KAA2B,EAAe;EAAA;EAC7D,IAAM;IAAEC,MAAM;IAAEC,QAAQ,GAAGL;EAAiB,CAAC,GAAGG,KAAK;EACrD,IAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAGzB,QAAQ,CAACsB,MAAM,CAACI,IAAI,CAAC;EACvD,IAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG5B,QAAQ,kDAC1CsB,MAAM,CAACO,YAAY,yDAAnB,qBAAqBF,UAAU,yEAAIb,kBAAkB,CACtD;EACD,IAAM,CAACgB,OAAO,EAAEC,QAAQ,CAAC,GAAG/B,QAAQ,CAAC,KAAK,CAAC;EAC3C,IAAM,CAACgC,aAAa,EAAEC,gBAAgB,CAAC,GAAGjC,QAAQ,CAACiB,sBAAsB,CAAC;EAC1E,IAAMiB,WAAW,GAAGnC,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMoC,sBAAsB,GAAGvC,WAAW,CAACwC,CAAC,IAAI;IAC9C,IAAM;MAAEC;IAAM,CAAC,GAAGD,CAAC,CAACE,MAAM;IAC1B1B,GAAG,CAAC2B,KAAK,CAAC,wBAAwB,EAAEF,KAAK,CAAC;IAC1CT,aAAa,CAACS,KAAK,CAAC;EACtB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMG,gBAAgB,GAAG5C,WAAW,CAAC,MAAM;IACzC,IAAIkC,OAAO,EAAE;MACXC,QAAQ,CAAC,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CAACD,OAAO,CAAC,CAAC;EAEb,IAAMW,iBAAiB,GAAG7C,WAAW,CAAC,MAAM;IAC1C,IAAI,CAACkC,OAAO,EAAE;MACZY,mBAAmB,EAAE;IACvB;IACAX,QAAQ,CAAC,CAACD,OAAO,CAAC;EACpB,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAMa,YAAY,GAAG7C,OAAO,CAC1B,MAAM,CACJU,eAAe,CAACoC,aAAa,EAC7BpC,eAAe,CAACqC,QAAQ,EACxBrC,eAAe,CAACsC,QAAQ,EACxBtC,eAAe,CAACuC,IAAI,EACpBvC,eAAe,CAACwC,OAAO,EACvBxC,eAAe,CAACyC,QAAQ,EACxBzC,eAAe,CAAC0C,QAAQ,EACxB1C,eAAe,CAAC2C,MAAM,CACvB,EACD,EAAE,CACH;EAED,SAAST,mBAAmB,GAAS;IACnC,IAAIR,WAAW,CAACkB,OAAO,EAAE;MACvBnB,gBAAgB,CAACC,WAAW,CAACkB,OAAO,CAACC,qBAAqB,EAAE,CAACC,KAAK,CAAC;IACrE;EACF;EAEAzD,SAAS,CACP,SAAS0D,WAAW,GAAG;IACrBhC,QAAQ,CAAC;MACPG,IAAI,EAAEF,SAAS;MACfK,YAAY,EAAE;QACZ2B,KAAK,EAAErD,UAAU,CAACsD,MAAM,CAAC9B,UAAU,CAAC,GAChCZ,mBAAmB,GACnBC,kBAAkB;QACtBW;MACF;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACJ,QAAQ,EAAEC,SAAS,EAAEG,UAAU,CAAC,CAClC;EAED,IAAM+B,aAAa,GAAG9D,WAAW,CAAC,MAAM;IACtC,IAAI+D,UAAU,GAAG,KAAK;IACtB,IAAMC,WAA0B,GAAG,EAAE;IAAC,6BACuB;MAC3D,IAAMC,MAAM,GAAGlB,YAAY,CAACmB,KAAK,CAAC;MAClC,IAAMC,GAAG,oBAAaD,KAAK,cAAID,MAAM,CAAE;MACvCF,UAAU,GAAGA,UAAU,IAAIE,MAAM,KAAKrC,SAAS;MAC/CoC,WAAW,CAACI,IAAI,eACd,oBAAC,MAAM;QACL,GAAG,EAAED,GAAI;QACT,IAAI,EAAC,QAAQ;QACb,SAAS,EAAC,kBAAkB;QAC5B,OAAO,EAAE,MAAM;UACbtC,YAAY,CAACoC,MAAM,CAAC;UACpB9B,QAAQ,CAAC,KAAK,CAAC;QACjB,CAAE;QACF,KAAK,EAAE;UACLyB,KAAK,EAAE7C,sBAAsB,CAAC;YAAEe,IAAI,EAAEmC;UAAO,CAAC,CAAC;UAC/ClC,UAAU,EAAEjB,2BAA2B,CAAC;YAAEgB,IAAI,EAAEmC;UAAO,CAAC;QAC1D;MAAE,GAEDA,MAAM,KAAKrC,SAAS,iBACnB,oBAAC,eAAe;QAAC,IAAI,EAAEnB,OAAQ;QAAC,SAAS,EAAC;MAAM,EACjD,EACAwD,MAAM,KAAKrC,SAAS,iBAAI;QAAM,SAAS,EAAC;MAAM,EAAG,EACjDf,oBAAoB,CAACoD,MAAM,CAAC,CACtB,CACV;IACH,CAAC;IAzBD,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGnB,YAAY,CAACsB,MAAM,EAAEH,KAAK,IAAI,CAAC;MAAA;IAAA;IA0B3D,OAAOF,WAAW;EACpB,CAAC,EAAE,CAACjB,YAAY,EAAEnB,SAAS,CAAC,CAAC;EAE7B,IAAM0C,iBAAiB,GAAGtE,WAAW,CACnC,mBACE;IACE,SAAS,EAAC,sBAAsB;IAChC,IAAI,EAAC,cAAc;IACnB,KAAK,EAAE;MAAE0D,KAAK,EAAEtB;IAAc;EAAE,gBAEhC;IAAK,SAAS,EAAC;EAAe,GAAE0B,aAAa,EAAE,CAAO,CAEzD,EACD,CAAC1B,aAAa,EAAE0B,aAAa,CAAC,CAC/B;EAED,oBACE;IAAK,SAAS,EAAC;EAAc,gBAC3B;IAAK,SAAS,EAAC,MAAM;IAAC,GAAG,EAAExB;EAAY,gBACrC;IAAO,SAAS,EAAC;EAAM,GAAC,OAAK,CAAQ,eACrC,oBAAC,MAAM;IACL,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,aAAa;IACvB,KAAK,EAAE;MACLsB,KAAK,EAAE7C,sBAAsB,CAAC;QAAEe,IAAI,EAAEF;MAAU,CAAC,CAAC;MAClDG,UAAU,EAAEjB,2BAA2B,CAAC;QAAEgB,IAAI,EAAEF;MAAU,CAAC;IAC7D,CAAE;IACF,OAAO,EAAEiB;EAAkB,GAE1BhC,oBAAoB,CAACe,SAAS,CAAC,eAEhC,+CACE,oBAAC,eAAe;IAAC,IAAI,EAAEpB,MAAO;IAAC,SAAS,EAAC;EAAU,EAAG,CACjD,eACP,oBAAC,YAAY;IACX,OAAO,EAAE0B,OAAQ;IACjB,OAAO,EAAE;MAAEqC,WAAW,EAAED,iBAAiB;IAAG,CAAE;IAC9C,aAAa,EAAE;MAAEE,SAAS,EAAE;IAAe,CAAE;IAC7C,eAAe,EAAC,qBAAqB;IACrC,YAAY,EAAE5B,gBAAiB;IAC/B,SAAS,EAAE;MAAE6B,QAAQ,EAAE;IAAS;EAAE,EAClC,CACK,CACL,EAEL7C,SAAS,KAAKhB,eAAe,CAAC2C,MAAM,iBACnC;IAAK,SAAS,EAAC;EAAM,gBACnB;IAAO,SAAS,EAAC;EAAM,GAAC,YAAU,CAAQ,eAC1C;IACE,IAAI,EAAC,OAAO;IACZ,KAAK,EAAExB,UAAW;IAClB,SAAS,EAAC,4BAA4B;IACtC,QAAQ,EAAEQ;EAAuB,EACjC,CAEL,CACG;AAEV;AAEA,eAAef,WAAW"}
+{"version":3,"file":"StyleEditor.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","FontAwesomeIcon","Log","ColorUtils","dhSort","vsCheck","Button","DropdownMenu","FormatStyleType","getLabelForStyleType","getBackgroundForStyleConfig","getColorForStyleConfig","log","module","DEFAULT_BACKGROUND","DEFAULT_COLOR_LIGHT","DEFAULT_COLOR_DARK","DEFAULT_DROPDOWN_WIDTH","DEFAULT_CALLBACK","undefined","StyleEditor","props","config","onChange","styleType","setStyleType","type","background","setBackground","customConfig","isShown","setShown","dropdownWidth","setDropdownWidth","csContainer","handleBackgroundChange","e","value","target","debug","handleMenuClosed","handleToggleClick","updateDropdownWidth","styleOptions","NO_FORMATTING","POSITIVE","NEGATIVE","WARN","NEUTRAL","ACCENT_1","ACCENT_2","CUSTOM","current","getBoundingClientRect","width","updateTheme","color","isDark","renderOptions","matchFound","optionArray","option","index","key","push","length","renderMenuElement","menuElement","placement","maxWidth"],"sources":["../../../src/sidebar/conditional-formatting/StyleEditor.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Log from '@deephaven/log';\nimport { ColorUtils } from '@deephaven/utils';\nimport { dhSort, vsCheck } from '@deephaven/icons';\nimport { Button, DropdownMenu } from '@deephaven/components';\nimport {\n  FormatStyleType,\n  getLabelForStyleType,\n  FormatStyleConfig,\n  getBackgroundForStyleConfig,\n  getColorForStyleConfig,\n} from './ConditionalFormattingUtils';\n\nimport './StyleEditor.scss';\n\nconst log = Log.module('StyleEditor');\n\nconst DEFAULT_BACKGROUND = '#fcfcfa';\n\nconst DEFAULT_COLOR_LIGHT = '#f0f0ee';\n\nconst DEFAULT_COLOR_DARK = '#1a171a';\n\nconst DEFAULT_DROPDOWN_WIDTH = 200;\n\nexport interface ConditionEditorProps {\n  config: FormatStyleConfig;\n  onChange?: (config: FormatStyleConfig) => void;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction StyleEditor(props: ConditionEditorProps): JSX.Element {\n  const { config, onChange = DEFAULT_CALLBACK } = props;\n  const [styleType, setStyleType] = useState(config.type);\n  const [background, setBackground] = useState(\n    config.customConfig?.background ?? DEFAULT_BACKGROUND\n  );\n  const [isShown, setShown] = useState(false);\n  const [dropdownWidth, setDropdownWidth] = useState(DEFAULT_DROPDOWN_WIDTH);\n  const csContainer = useRef<HTMLDivElement>(null);\n\n  const handleBackgroundChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleBackgroundChange', value);\n    setBackground(value);\n  }, []);\n\n  const handleMenuClosed = useCallback(() => {\n    if (isShown) {\n      setShown(false);\n    }\n  }, [isShown]);\n\n  const handleToggleClick = useCallback(() => {\n    if (!isShown) {\n      updateDropdownWidth();\n    }\n    setShown(!isShown);\n  }, [isShown]);\n\n  const styleOptions = useMemo(\n    () => [\n      FormatStyleType.NO_FORMATTING,\n      FormatStyleType.POSITIVE,\n      FormatStyleType.NEGATIVE,\n      FormatStyleType.WARN,\n      FormatStyleType.NEUTRAL,\n      FormatStyleType.ACCENT_1,\n      FormatStyleType.ACCENT_2,\n      FormatStyleType.CUSTOM,\n    ],\n    []\n  );\n\n  function updateDropdownWidth(): void {\n    if (csContainer.current) {\n      setDropdownWidth(csContainer.current.getBoundingClientRect().width);\n    }\n  }\n\n  useEffect(\n    function updateTheme() {\n      onChange({\n        type: styleType,\n        customConfig: {\n          color: ColorUtils.isDark(background)\n            ? DEFAULT_COLOR_LIGHT\n            : DEFAULT_COLOR_DARK,\n          background,\n        },\n      });\n    },\n    [onChange, styleType, background]\n  );\n\n  const renderOptions = useCallback(() => {\n    let matchFound = false;\n    const optionArray: JSX.Element[] = [];\n    for (let index = 0; index < styleOptions.length; index += 1) {\n      const option = styleOptions[index];\n      const key = `option-${index}-${option}`;\n      matchFound = matchFound || option === styleType;\n      optionArray.push(\n        <Button\n          key={key}\n          kind=\"inline\"\n          className=\"style-option-btn\"\n          onClick={() => {\n            setStyleType(option);\n            setShown(false);\n          }}\n          style={{\n            color: getColorForStyleConfig({ type: option }),\n            background: getBackgroundForStyleConfig({ type: option }),\n          }}\n        >\n          {option === styleType && (\n            <FontAwesomeIcon icon={vsCheck} className=\"mr-2\" />\n          )}\n          {option !== styleType && <span className=\"mr-4\" />}\n          {getLabelForStyleType(option)}\n        </Button>\n      );\n    }\n    return optionArray;\n  }, [styleOptions, styleType]);\n\n  const renderMenuElement = useCallback(\n    () => (\n      <div\n        className=\"style-menu-container\"\n        role=\"presentation\"\n        style={{ width: dropdownWidth }}\n      >\n        <div className=\"style-options\">{renderOptions()}</div>\n      </div>\n    ),\n    [dropdownWidth, renderOptions]\n  );\n\n  return (\n    <div className=\"style-editor\">\n      <div className=\"mb-2\" ref={csContainer}>\n        <label className=\"mb-0\">Style</label>\n        <Button\n          kind=\"inline\"\n          className=\"cs-dropdown\"\n          style={{\n            color: getColorForStyleConfig({ type: styleType }),\n            background: getBackgroundForStyleConfig({ type: styleType }),\n          }}\n          onClick={handleToggleClick}\n        >\n          {getLabelForStyleType(styleType)}\n\n          <span>\n            <FontAwesomeIcon icon={dhSort} className=\"cs-caret\" />\n          </span>\n          <DropdownMenu\n            isShown={isShown}\n            actions={{ menuElement: renderMenuElement() }}\n            popperOptions={{ placement: 'bottom-start' }}\n            popperClassName=\"style-dropdown-menu\"\n            onMenuClosed={handleMenuClosed}\n            menuStyle={{ maxWidth: '100rem' }}\n          />\n        </Button>\n      </div>\n\n      {styleType === FormatStyleType.CUSTOM && (\n        <div className=\"mb-2\">\n          <label className=\"mb-0\">Background</label>\n          <input\n            type=\"color\"\n            value={background}\n            className=\"custom-select color-select\"\n            onChange={handleBackgroundChange}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default StyleEditor;\n"],"mappings":"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"}

package/dist/sidebar/icons/BarIcon.js

@@ -1,23 +1,32 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function SvgBarIcon(props) {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-props-no-spreading
-    React.createElement("svg", _extends({
+    _jsx("svg", _objectSpread(_objectSpread({
       width: 48,
       height: 48,
       xmlns: "http://www.w3.org/2000/svg"
-    }, props), /*#__PURE__*/React.createElement("g", {
-      fill: "none",
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("path", {
-      fill: "#C1C0C0",
-      d: "M44 43v1H4v-1z"
-    }), /*#__PURE__*/React.createElement("path", {
-      fill: "#7DA4FF",
-      d: "M8 26h4v15H8zM15 17h4v24h-4zM22 21h4v20h-4zM29 17h4v24h-4zM36 11h4v30h-4z"
-    })))
+    }, props), {}, {
+      children: /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        children: [/*#__PURE__*/_jsx("path", {
+          fill: "#C1C0C0",
+          d: "M44 43v1H4v-1z"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: "#7DA4FF",
+          d: "M8 26h4v15H8zM15 17h4v24h-4zM22 21h4v20h-4zM29 17h4v24h-4zM36 11h4v30h-4z"
+        })]
+      })
+    }))
   );
 }
 export default SvgBarIcon;

package/dist/sidebar/icons/BarIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarIcon.js","names":["React","SvgBarIcon","props"],"sources":["../../../src/sidebar/icons/BarIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\nfunction SvgBarIcon(\n  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>\n): JSX.Element {\n  return (\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    <svg width={48} height={48} xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path fill=\"#C1C0C0\" d=\"M44 43v1H4v-1z\" />\n        <path\n          fill=\"#7DA4FF\"\n          d=\"M8 26h4v15H8zM15 17h4v24h-4zM22 21h4v20h-4zM29 17h4v24h-4zM36 11h4v30h-4z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nexport default SvgBarIcon;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,CACjBC,KAA8D,EACjD;EACb;IAAA;IACE;IACA;MAAK,KAAK,EAAE,EAAG;MAAC,MAAM,EAAE,EAAG;MAAC,KAAK,EAAC;IAA4B,GAAKA,KAAK,gBACtE;MAAG,IAAI,EAAC,MAAM;MAAC,QAAQ,EAAC;IAAS,gBAC/B;MAAM,IAAI,EAAC,SAAS;MAAC,CAAC,EAAC;IAAgB,EAAG,eAC1C;MACE,IAAI,EAAC,SAAS;MACd,CAAC,EAAC;IAA2E,EAC7E,CACA;EACA;AAEV;AAEA,eAAeD,UAAU"}
+{"version":3,"file":"BarIcon.js","names":["React","SvgBarIcon","props"],"sources":["../../../src/sidebar/icons/BarIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\nfunction SvgBarIcon(\n  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>\n): JSX.Element {\n  return (\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    <svg width={48} height={48} xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path fill=\"#C1C0C0\" d=\"M44 43v1H4v-1z\" />\n        <path\n          fill=\"#7DA4FF\"\n          d=\"M8 26h4v15H8zM15 17h4v24h-4zM22 21h4v20h-4zM29 17h4v24h-4zM36 11h4v30h-4z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nexport default SvgBarIcon;\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAAC;AAAA;AAE/B,SAASC,UAAU,CACjBC,KAA8D,EACjD;EACb;IAAA;IACE;IACA;MAAK,KAAK,EAAE,EAAG;MAAC,MAAM,EAAE,EAAG;MAAC,KAAK,EAAC;IAA4B,GAAKA,KAAK;MAAA,uBACtE;QAAG,IAAI,EAAC,MAAM;QAAC,QAAQ,EAAC,SAAS;QAAA,wBAC/B;UAAM,IAAI,EAAC,SAAS;UAAC,CAAC,EAAC;QAAgB,EAAG,eAC1C;UACE,IAAI,EAAC,SAAS;UACd,CAAC,EAAC;QAA2E,EAC7E;MAAA;IACA;EACA;AAEV;AAEA,eAAeD,UAAU"}

package/dist/sidebar/icons/FormatColumnWhereIcon.js

@@ -1,41 +1,49 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function FormatColumnWhereIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
     width: "48",
     height: "48",
     viewBox: "0 0 48 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props), /*#__PURE__*/React.createElement("rect", {
-    width: "48",
-    height: "48",
-    fill: "none"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "26",
-    y: "10",
-    width: "15",
-    height: "4",
-    fill: "#9FDE70"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "26",
-    y: "22",
-    width: "15",
-    height: "4",
-    fill: "#9FDE70"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "26",
-    y: "28",
-    width: "15",
-    height: "4",
-    fill: "#FFD95C"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "26",
-    y: "34",
-    width: "15",
-    height: "4",
-    fill: "#9FDE70"
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx("rect", {
+      width: "48",
+      height: "48",
+      fill: "none"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "26",
+      y: "10",
+      width: "15",
+      height: "4",
+      fill: "#9FDE70"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "26",
+      y: "22",
+      width: "15",
+      height: "4",
+      fill: "#9FDE70"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "26",
+      y: "28",
+      width: "15",
+      height: "4",
+      fill: "#FFD95C"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "26",
+      y: "34",
+      width: "15",
+      height: "4",
+      fill: "#9FDE70"
+    })]
   }));
 }
 export default FormatColumnWhereIcon;

package/dist/sidebar/icons/FormatColumnWhereIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatColumnWhereIcon.js","names":["React","FormatColumnWhereIcon","props"],"sources":["../../../src/sidebar/icons/FormatColumnWhereIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\nfunction FormatColumnWhereIcon(\n  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>\n): JSX.Element {\n  return (\n    <svg\n      width=\"48\"\n      height=\"48\"\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    >\n      <rect width=\"48\" height=\"48\" fill=\"none\" />\n      <rect x=\"26\" y=\"10\" width=\"15\" height=\"4\" fill=\"#9FDE70\" />\n      <rect x=\"26\" y=\"22\" width=\"15\" height=\"4\" fill=\"#9FDE70\" />\n      <rect x=\"26\" y=\"28\" width=\"15\" height=\"4\" fill=\"#FFD95C\" />\n      <rect x=\"26\" y=\"34\" width=\"15\" height=\"4\" fill=\"#9FDE70\" />\n    </svg>\n  );\n}\n\nexport default FormatColumnWhereIcon;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,qBAAqB,CAC5BC,KAA8D,EACjD;EACb,oBACE;IACE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;IACN;EAAA,GACIA,KAAK,gBAET;IAAM,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,IAAI,EAAC;EAAM,EAAG,eAC3C;IAAM,CAAC,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,GAAG;IAAC,IAAI,EAAC;EAAS,EAAG,eAC3D;IAAM,CAAC,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,GAAG;IAAC,IAAI,EAAC;EAAS,EAAG,eAC3D;IAAM,CAAC,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,GAAG;IAAC,IAAI,EAAC;EAAS,EAAG,eAC3D;IAAM,CAAC,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,GAAG;IAAC,IAAI,EAAC;EAAS,EAAG,CACvD;AAEV;AAEA,eAAeD,qBAAqB"}
+{"version":3,"file":"FormatColumnWhereIcon.js","names":["React","FormatColumnWhereIcon","props"],"sources":["../../../src/sidebar/icons/FormatColumnWhereIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\nfunction FormatColumnWhereIcon(\n  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>\n): JSX.Element {\n  return (\n    <svg\n      width=\"48\"\n      height=\"48\"\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    >\n      <rect width=\"48\" height=\"48\" fill=\"none\" />\n      <rect x=\"26\" y=\"10\" width=\"15\" height=\"4\" fill=\"#9FDE70\" />\n      <rect x=\"26\" y=\"22\" width=\"15\" height=\"4\" fill=\"#9FDE70\" />\n      <rect x=\"26\" y=\"28\" width=\"15\" height=\"4\" fill=\"#FFD95C\" />\n      <rect x=\"26\" y=\"34\" width=\"15\" height=\"4\" fill=\"#9FDE70\" />\n    </svg>\n  );\n}\n\nexport default FormatColumnWhereIcon;\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAAC;AAAA;AAE/B,SAASC,qBAAqB,CAC5BC,KAA8D,EACjD;EACb,oBACE;IACE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;IACN;EAAA,GACIA,KAAK;IAAA,wBAET;MAAM,KAAK,EAAC,IAAI;MAAC,MAAM,EAAC,IAAI;MAAC,IAAI,EAAC;IAAM,EAAG,eAC3C;MAAM,CAAC,EAAC,IAAI;MAAC,CAAC,EAAC,IAAI;MAAC,KAAK,EAAC,IAAI;MAAC,MAAM,EAAC,GAAG;MAAC,IAAI,EAAC;IAAS,EAAG,eAC3D;MAAM,CAAC,EAAC,IAAI;MAAC,CAAC,EAAC,IAAI;MAAC,KAAK,EAAC,IAAI;MAAC,MAAM,EAAC,GAAG;MAAC,IAAI,EAAC;IAAS,EAAG,eAC3D;MAAM,CAAC,EAAC,IAAI;MAAC,CAAC,EAAC,IAAI;MAAC,KAAK,EAAC,IAAI;MAAC,MAAM,EAAC,GAAG;MAAC,IAAI,EAAC;IAAS,EAAG,eAC3D;MAAM,CAAC,EAAC,IAAI;MAAC,CAAC,EAAC,IAAI;MAAC,KAAK,EAAC,IAAI;MAAC,MAAM,EAAC,GAAG;MAAC,IAAI,EAAC;IAAS,EAAG;EAAA,GACvD;AAEV;AAEA,eAAeD,qBAAqB"}