pebble-web 2.3.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.2.7"
+    "pebble-shared": "^2.3.1"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "6662ecf79cf28a6328c85295a5b234166dcbc9d3"
+  "gitHead": "2e6e566cf87edbb14bb945d9bb62f97cd5742d2e"
 }

package/src/components/Option.tsx

@@ -12,15 +12,12 @@ import Ink from "react-ink";
 import { colors } from "pebble-shared";
 
 const defaultProps = {
-  rightElement: ({
+  rightElement: <T extends unknown>({
     isSelected,
     multiSelect,
-    indeterminate
-  }: {
-    isSelected: boolean;
-    multiSelect: boolean;
-    indeterminate?: boolean;
-  }) => {
+    indeterminate,
+    iconClassName
+  }: OptionProps<T>) => {
     const iconClass = cx(
       "pi",
       {
@@ -35,7 +32,7 @@ const defaultProps = {
         fontSize: "20px"
       })
     );
-    return multiSelect ? <i className={iconClass} /> : null;
+    return multiSelect ? <i className={cx(iconClass, iconClassName)} /> : null;
   }
 };
 
@@ -48,6 +45,7 @@ class Option<OptionType> extends React.Component<
       label,
       isActive,
       isSelected,
+      leftElement,
       rightElement,
       labelClassName,
       className
@@ -70,6 +68,7 @@ class Option<OptionType> extends React.Component<
         {() => {
           return (
             <>
+              {leftElement && leftElement(this.props)}
               <div className={cx(labelWrap, labelClassName)}>{label}</div>
               {rightElement(this.props)}
               <Ink />

package/src/components/OptionGroupCheckBox.tsx

@@ -1,3 +1,4 @@
+import { cx } from "emotion";
 import * as React from "react";
 import { getSelectedCheckboxes } from "./utils/getSelectedCheckboxes";
 import Button from "./Button";
@@ -45,14 +46,21 @@ export default class OptionGroupCheckBox<
     if (onApply) onApply(selected || [], this.props);
   };
   render() {
-    const { onApply, onClear, isSelected, onChange, ...rest } = this.props;
+    const {
+      wrapClassName,
+      onApply,
+      onClear,
+      isSelected,
+      onChange,
+      ...rest
+    } = this.props;
     const advancedOptionsProps = {
       selectVisible: this.selectVisible,
       clearVisible: this.clearVisible,
       ...this.props.advancedOptionsProps
     };
     return (
-      <div className={styles.optionGroupCheckBoxWrap}>
+      <div className={cx(styles.optionGroupCheckBoxWrap, wrapClassName)}>
         <OptionGroup<OptionType>
           {...rest}
           advancedOptionsProps={advancedOptionsProps}

package/src/components/__tests__/__snapshots__/option.test.tsx.snap

@@ -6,6 +6,10 @@ exports[`Option component snapshot for multi select 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -43,24 +47,14 @@ exports[`Option component snapshot for multi select 1`] = `
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: initial;
-  -ms-flex-line-pack: initial;
-  align-content: initial;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-2[data-disabled='true'] {
@@ -120,6 +114,10 @@ exports[`Option component snapshot in active state 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -151,24 +149,14 @@ exports[`Option component snapshot in active state 1`] = `
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: initial;
-  -ms-flex-line-pack: initial;
-  align-content: initial;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   background-color: #F7F7F9;
 }
 
@@ -226,6 +214,10 @@ exports[`Option component snapshot in selected state 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -257,24 +249,14 @@ exports[`Option component snapshot in selected state 1`] = `
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: initial;
-  -ms-flex-line-pack: initial;
-  align-content: initial;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   color: #101721;
   font-weight: 500;
   font-size: 14px;

package/src/components/__tests__/__snapshots__/optionGroup.test.tsx.snap

@@ -6,6 +6,10 @@ exports[`Component: OptionGroup default snapshot 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -49,24 +53,14 @@ exports[`Component: OptionGroup default snapshot 1`] = `
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: initial;
-  -ms-flex-line-pack: initial;
-  align-content: initial;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-1[data-disabled='true'] {
@@ -639,6 +633,10 @@ Array [
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -682,24 +680,14 @@ Array [
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: initial;
-  -ms-flex-line-pack: initial;
-  align-content: initial;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-2[data-disabled='true'] {
@@ -1316,6 +1304,10 @@ Array [
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -1359,24 +1351,14 @@ Array [
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: initial;
-  -ms-flex-line-pack: initial;
-  align-content: initial;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-1[data-disabled='true'] {

package/src/components/styles/Options.styles.ts

@@ -10,7 +10,6 @@ export const rowWrapper = css({
   lineHeight: "28px",
   zIndex: 999,
   ...mixins.textEllipsis,
-  ...mixins.flexSpaceBetween,
   alignItems: "center",
   display: "flex",
   "&:last-of-type": {
@@ -23,6 +22,7 @@ export const rowWrapper = css({
 
 export const labelWrap = css({
   userSelect: "none",
+  flexGrow: 1,
   overflow: "hidden",
   textOverflow: "ellipsis"
 });

package/src/components/typings/Option.ts

@@ -8,5 +8,6 @@ export interface OptionProps<OptionType>
   isSelected?: boolean;
   multiSelect?: boolean;
   labelClassName?: string;
+  leftElement?: (props: OptionProps<OptionType>) => React.ReactNode;
   rightElement?: (props: OptionProps<OptionType>) => React.ReactNode;
 }

package/src/components/typings/OptionGroupCheckBox.ts

@@ -1,6 +1,7 @@
 import { CommonProps, Extras } from "./OptionGroup";
 
 export interface OptionGroupCheckBoxProps<OptionType> extends CommonProps {
+  wrapClassName?: string;
   onChange: (value: OptionType[], extras: Extras) => void;
   /**
    * @deprecated use isSelected