td-stylekit 30.17.3 → 32.0.0

package/dist/es/MultiSelect/MultiSelect.d.ts

@@ -8,14 +8,14 @@ type Option = {
 };
 export type MultiSelectProps = {
     options: Array<Option>;
-    rowRenderer: (optionItem: {
+    rowRenderer?: (optionItem: {
         option: {
             name: string;
             value: string;
         };
         index: number;
     }) => ReactNode;
-    initiallySelected: Array<number>;
+    initiallySelected?: Array<number>;
     onSelectionChange: (selected: Array<number>) => void;
     onEnterKey?: (selected: Array<number>) => void;
     width?: number;
@@ -46,17 +46,6 @@ type SelectProps = {
     index: number;
 };
 export declare class MultiSelect extends Component<MultiSelectProps, MultiSelectState> {
-    static defaultProps: {
-        rowRenderer: ({ option }: {
-            option: Option;
-            index: number;
-        }) => import("@emotion/react/jsx-runtime").JSX.Element;
-        initiallySelected: never[];
-        'data-instrumentation': string;
-        selectedLabel: string;
-        totalLabel: string;
-        showTotal: boolean;
-    };
     constructor(props: MultiSelectProps);
     select: ({ index, contiguous }: SelectProps) => void;
     deselect: ({ index, contiguous }: SelectProps) => void;
@@ -79,20 +68,7 @@ export declare class MultiSelect extends Component<MultiSelectProps, MultiSelect
     noRowsRenderer: () => import("@emotion/react/jsx-runtime").JSX.Element;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
-declare const ThemedComponent: import("react").FC<Pick<Pick<MultiSelectProps, "filter" | "ref" | "theme" | "height" | "width" | "options" | "onSelectionChange" | "onEnterKey" | "onFilterChange" | "inputName" | "inputPlaceholder"> & {
-    'data-instrumentation'?: string | undefined;
-    rowRenderer?: ((optionItem: {
-        option: {
-            name: string;
-            value: string;
-        };
-        index: number;
-    }) => ReactNode) | undefined;
-    initiallySelected?: number[] | undefined;
-    showTotal?: boolean | undefined;
-    selectedLabel?: string | undefined;
-    totalLabel?: string | undefined;
-} & {}, "filter" | "ref" | "height" | "width" | "data-instrumentation" | "options" | "rowRenderer" | "initiallySelected" | "onSelectionChange" | "onEnterKey" | "onFilterChange" | "inputName" | "inputPlaceholder" | "showTotal" | "selectedLabel" | "totalLabel"> & {
+declare const ThemedComponent: import("react").ForwardRefExoticComponent<Pick<MultiSelectProps, "filter" | "ref" | "height" | "width" | "data-instrumentation" | "options" | "rowRenderer" | "initiallySelected" | "onSelectionChange" | "onEnterKey" | "onFilterChange" | "inputName" | "inputPlaceholder" | "showTotal" | "selectedLabel" | "totalLabel"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }>;
 export default ThemedComponent;

package/dist/es/MultiSelect/MultiSelect.js

@@ -37,16 +37,24 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {}; // loosely based on https://github.com/hawkrives/react-list-select
+var defaultRowRenderer = function defaultRowRenderer(_ref) {
+  var option = _ref.option;
+  return (0, _jsxRuntime.jsx)(_elements.DefaultRowRenderer, {
+    "data-gs": gs("src", "multiselect", "multiselect.tsx", "default-row-renderer"),
+    text: option.name
+  });
+};
 var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
   function MultiSelect(_props) {
+    var _props$initiallySelec;
     var _this;
     _classCallCheck(this, MultiSelect);
     _this = _callSuper(this, MultiSelect, [_props]);
-    _defineProperty(_this, "select", function (_ref) {
+    _defineProperty(_this, "select", function (_ref2) {
       var _this$props$options$i;
-      var index = _ref.index,
-        _ref$contiguous = _ref.contiguous,
-        contiguous = _ref$contiguous === void 0 ? false : _ref$contiguous;
+      var index = _ref2.index,
+        _ref2$contiguous = _ref2.contiguous,
+        contiguous = _ref2$contiguous === void 0 ? false : _ref2$contiguous;
       if (index === null) {
         return;
       }
@@ -77,11 +85,11 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
         _this.props.onSelectionChange(_this.state.selected);
       });
     });
-    _defineProperty(_this, "deselect", function (_ref2) {
+    _defineProperty(_this, "deselect", function (_ref3) {
       var _this$props$options$i2;
-      var index = _ref2.index,
-        _ref2$contiguous = _ref2.contiguous,
-        contiguous = _ref2$contiguous === void 0 ? false : _ref2$contiguous;
+      var index = _ref3.index,
+        _ref3$contiguous = _ref3.contiguous,
+        contiguous = _ref3$contiguous === void 0 ? false : _ref3$contiguous;
       if (index === null) {
         return;
       }
@@ -162,9 +170,9 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
         };
       });
     });
-    _defineProperty(_this, "toggleSelect", function (_ref3) {
-      var contiguous = _ref3.contiguous,
-        index = _ref3.index;
+    _defineProperty(_this, "toggleSelect", function (_ref4) {
+      var contiguous = _ref4.contiguous,
+        index = _ref4.index;
       if (index === null) {
         return;
       }
@@ -231,18 +239,20 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
         focusedIndex: 0
       });
     });
-    _defineProperty(_this, "rowRender", function (_ref4) {
+    _defineProperty(_this, "rowRender", function (_ref5) {
       var _options$index$disabl, _options$index;
-      var index = _ref4.index,
-        key = _ref4.key,
-        style = _ref4.style;
+      var index = _ref5.index,
+        key = _ref5.key,
+        style = _ref5.style;
       var _this$state = _this.state,
         selected = _this$state.selected,
         focusedIndex = _this$state.focusedIndex;
       var _this$props = _this.props,
         options = _this$props.options,
-        dataInstrumentation = _this$props['data-instrumentation'],
-        rowRenderer = _this$props.rowRenderer;
+        _this$props$dataInst = _this$props['data-instrumentation'],
+        dataInstrumentation = _this$props$dataInst === void 0 ? 'multiselect' : _this$props$dataInst,
+        _this$props$rowRender = _this$props.rowRenderer,
+        rowRenderer = _this$props$rowRender === void 0 ? defaultRowRenderer : _this$props$rowRender;
       var isDisabled = (_options$index$disabl = (_options$index = options[index]) === null || _options$index === void 0 ? void 0 : _options$index.disabled) !== null && _options$index$disabl !== void 0 ? _options$index$disabl : false;
       var isSelected = (0, _lodash["default"])(selected, index) && !isDisabled;
       return (0, _jsxRuntime.jsx)(_elements.ListItem, {
@@ -275,7 +285,7 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
       });
     });
     _this.state = {
-      selected: _props.initiallySelected,
+      selected: (_props$initiallySelec = _props.initiallySelected) !== null && _props$initiallySelec !== void 0 ? _props$initiallySelec : [],
       lastSelected: null,
       focusedIndex: undefined,
       pose: 'idle'
@@ -332,15 +342,19 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
       var _this4 = this;
       var _this$props2 = this.props,
         options = _this$props2.options,
-        dataInstrumentation = _this$props2['data-instrumentation'],
+        _this$props2$dataIns = _this$props2['data-instrumentation'],
+        dataInstrumentation = _this$props2$dataIns === void 0 ? 'multiselect' : _this$props2$dataIns,
         filter = _this$props2.filter,
         onFilterChange = _this$props2.onFilterChange,
         inputName = _this$props2.inputName,
         inputPlaceholder = _this$props2.inputPlaceholder,
         theme = _this$props2.theme,
-        showTotal = _this$props2.showTotal,
-        selectedLabel = _this$props2.selectedLabel,
-        totalLabel = _this$props2.totalLabel;
+        _this$props2$showTota = _this$props2.showTotal,
+        showTotal = _this$props2$showTota === void 0 ? false : _this$props2$showTota,
+        _this$props2$selected = _this$props2.selectedLabel,
+        selectedLabel = _this$props2$selected === void 0 ? 'selected' : _this$props2$selected,
+        _this$props2$totalLab = _this$props2.totalLabel,
+        totalLabel = _this$props2$totalLab === void 0 ? 'total' : _this$props2$totalLab;
       var _this$state2 = this.state,
         selected = _this$state2.selected,
         focusedIndex = _this$state2.focusedIndex,
@@ -373,9 +387,9 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
           animate: pose,
           height: this.props.height,
           children: (0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
-            "data-gs-c": gsC(function children(_ref5) {
-              var width = _ref5.width,
-                height = _ref5.height;
+            "data-gs-c": gsC(function children(_ref6) {
+              var width = _ref6.width,
+                height = _ref6.height;
               return (0, _jsxRuntime.jsx)(_reactVirtualized.List, {
                 "data-gs": gs("src", "multiselect", "multiselect.tsx", "select-container", "list-container", "auto-sizer", "list"),
                 containerRole: "listbox",
@@ -387,8 +401,8 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
                 rowHeight: (theme === null || theme === void 0 ? void 0 : theme.name) === 'v5' ? 36 : 32,
                 selected: selected,
                 scrollToIndex: focusedIndex,
-                onScroll: function onScroll(_ref6) {
-                  var scrollTop = _ref6.scrollTop;
+                onScroll: function onScroll(_ref7) {
+                  var scrollTop = _ref7.scrollTop;
                   // Workaround for list item onClick not triggering if the list is scrolled and it's
                   // not focused. Without this, scrolling and clicking will trigger only the list
                   // onFocus event.
@@ -399,9 +413,9 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
               });
             }),
             "data-gs": gs("src", "multiselect", "multiselect.tsx", "select-container", "list-container", "auto-sizer"),
-            children: function children(_ref5) {
-              var width = _ref5.width,
-                height = _ref5.height;
+            children: function children(_ref6) {
+              var width = _ref6.width,
+                height = _ref6.height;
               return (0, _jsxRuntime.jsx)(_reactVirtualized.List, {
                 "data-gs": gs("src", "multiselect", "multiselect.tsx", "select-container", "list-container", "auto-sizer", "list"),
                 containerRole: "listbox",
@@ -413,8 +427,8 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
                 rowHeight: (theme === null || theme === void 0 ? void 0 : theme.name) === 'v5' ? 36 : 32,
                 selected: selected,
                 scrollToIndex: focusedIndex,
-                onScroll: function onScroll(_ref6) {
-                  var scrollTop = _ref6.scrollTop;
+                onScroll: function onScroll(_ref7) {
+                  var scrollTop = _ref7.scrollTop;
                   if (_this4.state.focusedIndex === undefined && scrollTop) {
                     _this4.focusFirstItem();
                   }
@@ -430,20 +444,6 @@ var MultiSelect = exports.MultiSelect = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(_react2.Component);
-_defineProperty(MultiSelect, "defaultProps", {
-  rowRenderer: function rowRenderer(_ref7) {
-    var option = _ref7.option;
-    return (0, _jsxRuntime.jsx)(_elements.DefaultRowRenderer, {
-      "data-gs": gs("src", "multiselect", "multiselect.tsx", "default-row-renderer"),
-      text: option.name
-    });
-  },
-  initiallySelected: [],
-  'data-instrumentation': 'multiselect',
-  selectedLabel: 'selected',
-  totalLabel: 'total',
-  showTotal: false
-});
 var ThemedComponent = (0, _react.withTheme)(MultiSelect);
 ThemedComponent.displayName = 'MultiSelect';
 var _default = exports["default"] = ThemedComponent;

package/dist/es/MultiSelect/elements.d.ts

@@ -269,14 +269,15 @@ export declare const ListContainer: import("@emotion/styled").StyledComponent<{
 } & {
     height?: string | number | undefined;
 }, {}, {}>;
+type ListItemProps = {
+    focused?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+};
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    focused: boolean;
-    selected: boolean;
-    disabled: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & ListItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;