glints-aries 4.0.171 → 4.0.172

package/es/@next/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    segmented?: boolean;
+    fullWidth?: boolean;
+    /** Set this true when buttons are wrapped by another element (e.g as an activator for Popover) */
+    isButtonWrapped?: boolean;
+}
+export declare const ButtonGroup: ({ segmented, fullWidth, isButtonWrapped, ...props }: ButtonGroupProps) => JSX.Element;

package/es/@next/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["segmented", "fullWidth", "isButtonWrapped"];
+import React from 'react';
+import { StyledButtonGroup } from './ButtonGroupStyle';
+export var ButtonGroup = function ButtonGroup(_ref) {
+  var segmented = _ref.segmented,
+    fullWidth = _ref.fullWidth,
+    isButtonWrapped = _ref.isButtonWrapped,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
+    "data-segmented": segmented,
+    "data-full-width": fullWidth,
+    "data-button-wrapped": isButtonWrapped
+  }, props));
+};

package/es/@next/ButtonGroup/ButtonGroup.stories.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroupStyle';
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { PrimaryButton } from '../Button/PrimaryButtonStyle';
 import { Button } from '../Button/Button';
 import { OutlineButton } from '../Button/OutlineButtonStyle';
+import { ButtonGroup } from './ButtonGroup';
 ButtonGroup.displayName = 'ButtonGroup';
 export default {
   title: '@next/ButtonGroup',

package/es/@next/ButtonGroup/ButtonGroupStyle.d.ts

@@ -1,6 +1 @@
-import React from 'react';
-export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
-    segmented?: boolean;
-    fullWidth?: boolean;
-}
-export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, ButtonGroupProps, never>;
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/ButtonGroup/ButtonGroupStyle.js

@@ -2,13 +2,7 @@ import styled from 'styled-components';
 import { borderRadius4 } from '../utilities/borderRadius';
 import { Neutral } from '../utilities/colors';
 import { space8 } from '../utilities/spacing';
-export var ButtonGroup = styled.div.withConfig({
-  displayName: "ButtonGroupStyle__ButtonGroup",
+export var StyledButtonGroup = styled.div.withConfig({
+  displayName: "ButtonGroupStyle__StyledButtonGroup",
   componentId: "sc-7vhxrt-0"
-})(["display:flex;flex-direction:row;align-items:center;padding:0px;", " ", ""], function (_ref) {
-  var segmented = _ref.segmented;
-  return segmented ? "> button {\n            border-radius: 0;\n            border-right: 0;\n            \n            :nth-child(1) {\n             border-radius: " + borderRadius4 + " 0px 0px " + borderRadius4 + ";  \n            }\n\n            :nth-last-child(1) {\n             border-radius: 0px " + borderRadius4 + " " + borderRadius4 + " 0px;\n             border-right: 1px solid " + Neutral.B68 + "\n            }\n           }\n           > button:focus {\n            z-index: 1;\n            border: 1px solid " + Neutral.B68 + "\n           }\n\n           button[data-active='true'] {\n            border: 1px solid " + Neutral.B40 + "\n           }\n           " : "gap: " + space8 + ";";
-}, function (_ref2) {
-  var fullWidth = _ref2.fullWidth;
-  return fullWidth ? "> button {\n             flex: 1;\n             }" : "";
-});
+})(["display:flex;flex-direction:row;align-items:center;padding:0px;gap:", ";&[data-segmented='true']{gap:0;}&[data-segmented='true'] button[data-active='true']{border:1px solid ", ";}&[data-segmented='true'] button{border-radius:0;border-right:0;:nth-child(1){border-radius:", " 0px 0px ", ";}:nth-last-child(1){border-radius:0px ", " ", " 0px;border-right:1px solid ", ";}}&[data-segmented='true'] button:focus{z-index:1;border:1px solid ", ";}&[data-full-width='true'] button{flex:1;}&[data-segmented='true']&[data-button-wrapped='true'] > *{button{border-radius:0;border-right:0;}:nth-child(1) button{border-radius:", " 0px 0px ", ";}:nth-last-child(1) button{border-radius:0px ", " ", " 0px;border-right:1px solid ", ";}}"], space8, Neutral.B40, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Neutral.B68, Neutral.B68, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Neutral.B68);

package/es/@next/ButtonGroup/index.d.ts

@@ -1,2 +1 @@
-import { ButtonGroup } from './ButtonGroupStyle';
-export { ButtonGroup };
+export { ButtonGroup } from './ButtonGroup';

package/es/@next/ButtonGroup/index.js

@@ -1,2 +1 @@
-import { ButtonGroup } from './ButtonGroupStyle';
-export { ButtonGroup };
+export { ButtonGroup } from './ButtonGroup';

package/es/@next/Popover/Popover.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PopoverProps as PolarisPopoverProps } from 'polaris-glints';
+export declare type PopoverProps = PolarisPopoverProps;
+/** Using Popover from polaris-glints repository internally
+ * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.
+ * This is a temporary workaround, as React Portal need this as the anchor */
+export declare const Popover: ((props: PopoverProps) => JSX.Element) & {
+    Pane: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Pane;
+    Section: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Section;
+};

package/es/@next/Popover/Popover.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Popover as PolarisPopover } from 'polaris-glints';
+import { StyledPopover } from './PopoverStyle';
+var PopoverComponent = function PopoverComponent(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopover, null), /*#__PURE__*/React.createElement(PolarisPopover, props));
+};
+
+/** Using Popover from polaris-glints repository internally
+ * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.
+ * This is a temporary workaround, as React Portal need this as the anchor */
+export var Popover = Object.assign(PopoverComponent, {
+  Pane: PolarisPopover.Pane,
+  Section: PolarisPopover.Section
+});

package/es/@next/Popover/Popover.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Popover/Popover.stories.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { Popover } from './Popover';
+Popover.displayName = 'Popover';
+export default {
+  title: '@next/Popover',
+  component: Popover,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseContainer, null, Story()), /*#__PURE__*/React.createElement("div", {
+      id: "glints-portal-container"
+    }));
+  }],
+  argTypes: {
+    preferredPosition: {
+      control: 'select',
+      options: ['above', 'below', 'mostSpace']
+    },
+    preferredAlignment: {
+      control: 'select',
+      options: ['left', 'center', 'right']
+    }
+  }
+};
+var PopoverExample = function PopoverExample(props) {
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(false),
+    popoverActive2 = _useState2[0],
+    setPopoverActive2 = _useState2[1];
+  var _useState3 = useState(false),
+    popoverActive3 = _useState3[0],
+    setPopoverActive3 = _useState3[1];
+  var Suffix = /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-up-fill"
+  });
+  var togglePopoverActive = useCallback(function () {
+    return setPopoverActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var togglePopoverActive2 = useCallback(function () {
+    return setPopoverActive2(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var togglePopoverActive3 = useCallback(function () {
+    return setPopoverActive3(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var example1Activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive
+  }, "Show");
+  var example2Activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive2
+  }, "Show");
+  var example3Activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive3
+  }, "Show");
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: '100px',
+      paddingTop: '150px',
+      display: 'flex',
+      gap: '50px'
+    }
+  }, /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
+    active: popoverActive,
+    activator: example1Activator,
+    onClose: togglePopoverActive
+  }), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle1"
+  }, "Title")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "Label"), " ", /*#__PURE__*/React.createElement(PrimaryButton, null, "Label")))))), /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
+    active: popoverActive2,
+    activator: example2Activator,
+    onClose: togglePopoverActive2
+  }), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2"
+  }, "AVAILABLE SALES CHANNEL"))), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0px 16px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Online")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Facebook")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Shopify POS"))))), /*#__PURE__*/React.createElement(Popover, _extends({}, props, {
+    active: popoverActive3,
+    activator: example3Activator,
+    onClose: togglePopoverActive3
+  }), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "Action"), /*#__PURE__*/React.createElement(Button, null, "Action"), /*#__PURE__*/React.createElement(Button, {
+    icon: Suffix,
+    iconPosition: "right"
+  }, "Move to"))))));
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(PopoverExample, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  preferredPosition: 'mostSpace',
+  preferredAlignment: 'center'
+};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "const [popoverActive, setPopoverActive] = useState(false);\n      const [popoverActive2, setPopoverActive2] = useState(false);\n      const [popoverActive3, setPopoverActive3] = useState(false);\n      const Suffix = <Icon name=\"ri-arrow-m-up-fill\" />;\n    \n      const togglePopoverActive = useCallback(\n        () => setPopoverActive(popoverActive => !popoverActive),\n        []\n      );\n    \n      const togglePopoverActive2 = useCallback(\n        () => setPopoverActive2(popoverActive => !popoverActive),\n        []\n      );\n    \n      const togglePopoverActive3 = useCallback(\n        () => setPopoverActive3(popoverActive => !popoverActive),\n        []\n      );\n    \n      const example1Activator = <Button onClick={togglePopoverActive}>Show</Button>;\n      const example2Activator = (\n        <Button onClick={togglePopoverActive2}>Show</Button>\n      );\n      const example3Activator = (\n        <Button onClick={togglePopoverActive3}>Show</Button>\n      );\n      return (\n        <div\n          style={{\n            marginLeft: '100px',\n            paddingTop: '200px',\n            display: 'flex',\n            gap: '50px',\n          }}\n        >\n          <Popover\n            {...props}\n            active={popoverActive}\n            activator={example1Activator}\n            onClose={togglePopoverActive}\n          >\n            <Popover.Pane>\n              <div style={{ padding: '10px' }}>\n                <div>\n                  <Typography as=\"span\" variant=\"subtitle1\">\n                    Title\n                  </Typography>\n                </div>\n                <div>\n                  <Typography variant=\"body1\">Description</Typography>\n                </div>\n                <div>\n                  <ButtonGroup>\n                    <Button>Label</Button> <PrimaryButton>Label</PrimaryButton>\n                  </ButtonGroup>\n                </div>\n              </div>\n            </Popover.Pane>\n          </Popover>\n          <Popover\n            {...props}\n            active={popoverActive2}\n            activator={example2Activator}\n            onClose={togglePopoverActive2}\n          >\n            <Popover.Pane>\n              <Popover.Section>\n                <Typography variant=\"subtitle2\">AVAILABLE SALES CHANNEL</Typography>\n              </Popover.Section>\n            </Popover.Pane>\n            <Popover.Pane>\n              <div>\n                <Typography variant=\"body1\">Online</Typography>\n              </div>\n              <div>\n                <Typography variant=\"body1\">Facebook</Typography>\n              </div>\n              <div>\n                <Typography variant=\"body1\">Shopify POS</Typography>\n              </div>\n            </Popover.Pane>\n          </Popover>\n          <Popover\n            {...props}\n            active={popoverActive3}\n            activator={example3Activator}\n            onClose={togglePopoverActive3}\n          >\n            <Popover.Pane>\n              <div style={{ padding: '10px' }}>\n                <ButtonGroup>\n                  <Button>Action</Button>\n                  <Button>Action</Button>\n                  <Button icon={Suffix} iconPosition=\"right\">\n                    Move to\n                  </Button>\n                </ButtonGroup>\n              </div>\n            </Popover.Pane>\n          </Popover>\n        </div>\n      );"
+    },
+    language: 'javascript',
+    type: 'auto'
+  }
+};

package/es/@next/Popover/PopoverFilter.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Popover/PopoverFilter.stories.js

@@ -0,0 +1,145 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { useCallback, useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Popover } from './Popover';
+import { OutlineButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { CheckboxGroup } from './popoverStoryHelper/CheckboxGroup';
+import { Typography } from '../Typography';
+import { SalarySelector } from './popoverStoryHelper/SalarySelector';
+import { Icon } from '../Icon';
+Popover.displayName = 'Popover';
+export default {
+  title: '@next/Popover as Filter',
+  component: Popover,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story(), /*#__PURE__*/React.createElement("div", {
+      id: "glints-portal-container"
+    }));
+  }],
+  argTypes: {}
+};
+var cities = {
+  Indonesia: ['Jakarta', 'Bandung', 'Bali'],
+  Malaysia: ['Kuala Lumpur', 'Ipoh', 'Penang'],
+  Singapore: ['Singapore']
+};
+var PopoverAsFilterExample = function PopoverAsFilterExample() {
+  var _useState = useState(false),
+    popoverCityActive = _useState[0],
+    setPopoverCityActive = _useState[1];
+  var _useState2 = useState(false),
+    popoverSalaryActive = _useState2[0],
+    setPopoverSalaryActive = _useState2[1];
+  var _useState3 = useState([]),
+    selectedCities = _useState3[0],
+    setSelectedCities = _useState3[1];
+  var _useState4 = useState(0),
+    salaryFrom = _useState4[0],
+    setSalaryFrom = _useState4[1];
+  var _useState5 = useState(0),
+    salaryTo = _useState5[0],
+    setSalaryTo = _useState5[1];
+  var Suffix = /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-down-fill"
+  });
+  var togglePopoverCityActive = useCallback(function () {
+    return setPopoverCityActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var toggleSalaryActive = useCallback(function () {
+    return setPopoverSalaryActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var cityActivator = /*#__PURE__*/React.createElement(OutlineButton, {
+    onClick: togglePopoverCityActive,
+    icon: Suffix,
+    iconPosition: "right"
+  }, "City");
+  var salaryActivator = /*#__PURE__*/React.createElement(OutlineButton, {
+    onClick: toggleSalaryActive,
+    icon: Suffix,
+    iconPosition: "right"
+  }, "Salary");
+  var handleCityChanged = function handleCityChanged(action, cities) {
+    if (action === 'Add') {
+      var selected = new Set([].concat(selectedCities, cities));
+      setSelectedCities(Array.from(selected));
+      return;
+    }
+    setSelectedCities(selectedCities.filter(function (sc) {
+      return !cities.includes(sc);
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonGroup, {
+    segmented: true,
+    isButtonWrapped: true
+  }, /*#__PURE__*/React.createElement(Popover, {
+    active: popoverCityActive,
+    activator: cityActivator,
+    autofocusTarget: "first-node",
+    onClose: togglePopoverCityActive
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    fixed: true
+  }, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2"
+  }, "Select Cities"))), /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, Object.keys(cities).map(function (country) {
+    return /*#__PURE__*/React.createElement(CheckboxGroup, {
+      key: country,
+      country: country
+      // @ts-ignore
+      ,
+      cities: cities[country],
+      onChanged: handleCityChanged
+    });
+  })))), /*#__PURE__*/React.createElement(Popover, {
+    active: popoverSalaryActive,
+    activator: salaryActivator,
+    autofocusTarget: "first-node",
+    onClose: toggleSalaryActive,
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    fixed: true
+  }, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption"
+  }, "Salary"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SalarySelector, {
+    onFromChanged: setSalaryFrom,
+    onToChanged: setSalaryTo
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption"
+  }, "Selected cities: ", selectedCities.join(','))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption"
+  }, "Selected salary range: ", new Intl.NumberFormat().format(salaryFrom), " to", ' ', new Intl.NumberFormat().format(salaryTo))));
+};
+var Template = function Template() {
+  return /*#__PURE__*/React.createElement(PopoverAsFilterExample, null);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "\n      import { Popover } from 'Popover';\n      import { OutlineButton } from '../Button';\n      import { ButtonGroup } from '../ButtonGroup';\n      import { CheckboxGroup } from './popoverStoryHelper/CheckboxGroup';\n      import { Typography } from '../Typography';\n      import { SalarySelector } from './popoverStoryHelper/SalarySelector';\n      import { Icon } from '../Icon';\n\n      const cities = {\n        Indonesia: ['Jakarta', 'Bandung', 'Bali'],\n        Malaysia: ['Kuala Lumpur', 'Ipoh', 'Penang'],\n        Singapore: ['Singapore'],\n      };\n      \n      const [popoverCityActive, setPopoverCityActive] = useState(false);\n      const [popoverSalaryActive, setPopoverSalaryActive] = useState(false);\n      const [selectedCities, setSelectedCities] = useState([]);\n      const [salaryFrom, setSalaryFrom] = useState(0);\n      const [salaryTo, setSalaryTo] = useState(0);\n    \n      const Suffix = <Icon name=\"ri-arrow-m-down-fill\" />;\n      const togglePopoverCityActive = useCallback(\n        () => setPopoverCityActive(popoverActive => !popoverActive),\n        []\n      );\n    \n      const toggleSalaryActive = useCallback(\n        () => setPopoverSalaryActive(popoverActive => !popoverActive),\n        []\n      );\n    \n      const cityActivator = (\n        <OutlineButton\n          onClick={togglePopoverCityActive}\n          icon={Suffix}\n          iconPosition=\"right\"\n        >\n          City\n        </OutlineButton>\n      );\n      const salaryActivator = (\n        <OutlineButton\n          onClick={toggleSalaryActive}\n          icon={Suffix}\n          iconPosition=\"right\"\n        >\n          Salary\n        </OutlineButton>\n      );\n    \n      const handleCityChanged = (action: 'Add' | 'Remove', cities: string[]) => {\n        if (action === 'Add') {\n          const selected = new Set([...selectedCities, ...cities]);\n          setSelectedCities(Array.from(selected));\n          return;\n        }\n        setSelectedCities(selectedCities.filter(sc => !cities.includes(sc)));\n      };\n    \n      return (\n        <div style={{ marginLeft: '10px' }}>\n          <ButtonGroup segmented isButtonWrapped>\n            <Popover\n              active={popoverCityActive}\n              activator={cityActivator}\n              autofocusTarget=\"first-node\"\n              onClose={togglePopoverCityActive}\n            >\n              <Popover.Pane fixed>\n                <Popover.Section>\n                  <Typography as=\"span\" variant=\"subtitle2\">\n                    Select Cities\n                  </Typography>\n                </Popover.Section>\n              </Popover.Pane>\n              <Popover.Pane>\n                <div style={{ padding: '10px' }}>\n                  {Object.keys(cities).map((country: string) => {\n                    return (\n                      <CheckboxGroup\n                        key={country}\n                        country={country}\n                        cities={cities[country]}\n                        onChanged={handleCityChanged}\n                      />\n                    );\n                  })}\n                </div>\n              </Popover.Pane>\n            </Popover>\n            <Popover\n              active={popoverSalaryActive}\n              activator={salaryActivator}\n              autofocusTarget=\"first-node\"\n              onClose={toggleSalaryActive}\n              fullWidth\n            >\n              <Popover.Pane fixed>\n                <Popover.Section>\n                  <Typography as=\"span\" variant=\"caption\">\n                    Salary\n                  </Typography>\n                </Popover.Section>\n              </Popover.Pane>\n              <div>\n                <SalarySelector\n                  onFromChanged={setSalaryFrom}\n                  onToChanged={setSalaryTo}\n                />\n              </div>\n            </Popover>\n          </ButtonGroup>\n          <div style={{ marginTop: '10px' }}>\n            <Typography as=\"span\" variant=\"caption\">\n              Selected cities: {selectedCities.join(',')}\n            </Typography>\n          </div>\n          <div>\n            <Typography as=\"span\" variant=\"caption\">\n              Selected salary range: {new Intl.NumberFormat().format(salaryFrom)} to{' '}\n              {new Intl.NumberFormat().format(salaryTo)}\n            </Typography>\n          </div>\n        </div>\n      );"
+    },
+    language: 'javascript',
+    type: 'auto'
+  }
+};

package/es/@next/Popover/PopoverStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledPopover: any;

package/es/@next/Popover/PopoverStyle.js

@@ -0,0 +1,7 @@
+import { createGlobalStyle } from 'styled-components';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { space16, space4, space8 } from '../utilities/spacing';
+
+// we need to use global style here because popover is created outside the root element for react app
+export var StyledPopover = createGlobalStyle([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:fit-content;}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}"], space8, space4, space8, borderRadius8, space4, Neutral.B100, borderRadius8, Neutral.B85, space16, Neutral.B40);

package/es/@next/Popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover, PopoverProps } from './Popover';

package/es/@next/Popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverProps } from './Popover';

package/es/@next/Popover/popoverStoryHelper/CheckboxGroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    country: string;
+    cities: string[];
+    onChanged: (action: 'Add' | 'Remove', cities: string[]) => void;
+};
+export declare const CheckboxGroup: ({ country, cities, onChanged }: Props) => JSX.Element;
+export {};

package/es/@next/Popover/popoverStoryHelper/CheckboxGroup.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Checkbox } from '../../Checkbox';
+export var CheckboxGroup = function CheckboxGroup(_ref) {
+  var country = _ref.country,
+    cities = _ref.cities,
+    onChanged = _ref.onChanged;
+  var _useState = useState(false),
+    isCountrySelected = _useState[0],
+    setIsCountrySelected = _useState[1];
+  var _useState2 = useState([]),
+    selectedCities = _useState2[0],
+    setSelectedCities = _useState2[1];
+  var handleCountryChanged = function handleCountryChanged(checked) {
+    setIsCountrySelected(checked);
+    if (checked) {
+      setSelectedCities(cities);
+    } else {
+      setSelectedCities([]);
+    }
+    onChanged(checked ? 'Add' : 'Remove', cities);
+  };
+  var handleCityChanged = function handleCityChanged(checked, id) {
+    if (checked && !selectedCities.includes(id)) {
+      var selected = [].concat(selectedCities, [id]);
+      setSelectedCities(selected);
+      onChanged('Add', [id]);
+      return;
+    }
+    if (!checked) {
+      var _selected = selectedCities.filter(function (s) {
+        return s !== id;
+      });
+      setSelectedCities(_selected);
+      onChanged('Remove', [id]);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    key: country
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: country,
+    label: country,
+    checked: isCountrySelected,
+    onChange: function onChange(newChecked) {
+      return handleCountryChanged(newChecked);
+    }
+  }), cities.map(function (city) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "div-" + city,
+      style: {
+        marginLeft: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: city,
+      label: city,
+      key: city,
+      checked: selectedCities.includes(city) || isCountrySelected,
+      onChange: handleCityChanged
+    }));
+  }));
+};

package/es/@next/Popover/popoverStoryHelper/SalarySelector.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    onFromChanged: (amount: number) => void;
+    onToChanged: (amount: number) => void;
+};
+export declare const SalarySelector: ({ onFromChanged, onToChanged }: Props) => JSX.Element;
+export {};

package/es/@next/Popover/popoverStoryHelper/SalarySelector.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CurrencyInput } from '../../CurrencyInput/CurrencyInput';
+import { Typography } from '../../Typography';
+export var SalarySelector = function SalarySelector(_ref) {
+  var onFromChanged = _ref.onFromChanged,
+    onToChanged = _ref.onToChanged;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '4px',
+      padding: '10px',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "caption"
+  }, "IDR"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    onChange: onFromChanged
+  })), /*#__PURE__*/React.createElement("div", null, "-"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    onChange: onToChanged
+  }))));
+};

package/es/@next/Tabs/Tabs.stories.js

@@ -44,7 +44,7 @@ Interactive.parameters = {
   docs: {
     source: {
       code: "const [selected, setSelected] = useState(args.selected || 0);\n      const tabs: TabModel[] = [\n        { id: 'id-tab-1', content: 'Tab #1' },\n        { id: 'id-tab-2', content: 'Tab #2' },\n      ];\n    \n      const Table = () => {\n        return (\n          <StyledTable>\n            <StyledRow>\n              <StyledHeaderColumn>Company</StyledHeaderColumn>\n              <StyledHeaderColumn>Contact</StyledHeaderColumn>\n              <StyledHeaderColumn>Country</StyledHeaderColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Alfreds Futterkiste</StyledColumn>\n              <StyledColumn>Maria Anders</StyledColumn>\n              <StyledColumn>Germany</StyledColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Centro comercial Moctezuma</StyledColumn>\n              <StyledColumn>Francisco Chang</StyledColumn>\n              <StyledColumn>Mexico</StyledColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Ernst Handel</StyledColumn>\n              <StyledColumn>Roland Mendel</StyledColumn>\n              <StyledColumn>Austria</StyledColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Island Trading</StyledColumn>\n              <StyledColumn>Helen Bennett</StyledColumn>\n              <StyledColumn>UK</StyledColumn>\n            </StyledRow>\n          </StyledTable>\n        );\n      };\n    \n      const tabContents = [\n        <Table />,\n        <Typography variant=\"body2\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n          cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </Typography>,\n      ];\n    \n      return (\n        <Tabs\n          tabs={tabs}\n          selected={selected}\n          onSelected={i => setSelected(i)}\n          fitted={args.fitted}\n        >\n          {tabContents[selected]}\n        </Tabs>\n      );\n    };",
-      language: 'html',
+      language: 'javascript',
       type: 'auto'
     }
   }

package/es/@next/index.d.ts

@@ -5,6 +5,7 @@ export { Icon } from './Icon';
 export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
 export { Avatar } from './Avatar';
+export { Popover } from './Popover';
 import * as BorderRadius from './utilities/borderRadius';
 import * as Breakpoints from './utilities/breakpoints';
 import * as Colors from './utilities/colors';

package/es/@next/index.js

@@ -5,6 +5,7 @@ export { Icon } from './Icon';
 export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
 export { Avatar } from './Avatar';
+export { Popover } from './Popover';
 
 // Utilities
 import * as BorderRadius from './utilities/borderRadius';

package/lib/@next/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    segmented?: boolean;
+    fullWidth?: boolean;
+    /** Set this true when buttons are wrapped by another element (e.g as an activator for Popover) */
+    isButtonWrapped?: boolean;
+}
+export declare const ButtonGroup: ({ segmented, fullWidth, isButtonWrapped, ...props }: ButtonGroupProps) => JSX.Element;

package/lib/@next/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ButtonGroup = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _ButtonGroupStyle = require("./ButtonGroupStyle");
+var _excluded = ["segmented", "fullWidth", "isButtonWrapped"];
+var ButtonGroup = function ButtonGroup(_ref) {
+  var segmented = _ref.segmented,
+    fullWidth = _ref.fullWidth,
+    isButtonWrapped = _ref.isButtonWrapped,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_ButtonGroupStyle.StyledButtonGroup, (0, _extends2["default"])({
+    "data-segmented": segmented,
+    "data-full-width": fullWidth,
+    "data-button-wrapped": isButtonWrapped
+  }, props));
+};
+exports.ButtonGroup = ButtonGroup;

package/lib/@next/ButtonGroup/ButtonGroup.stories.js

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = exports.Interactive = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ButtonGroupStyle = require("./ButtonGroupStyle");
 var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
 var _PrimaryButtonStyle = require("../Button/PrimaryButtonStyle");
 var _Button = require("../Button/Button");
 var _OutlineButtonStyle = require("../Button/OutlineButtonStyle");
-_ButtonGroupStyle.ButtonGroup.displayName = 'ButtonGroup';
+var _ButtonGroup = require("./ButtonGroup");
+_ButtonGroup.ButtonGroup.displayName = 'ButtonGroup';
 var _default = {
   title: '@next/ButtonGroup',
-  component: _ButtonGroupStyle.ButtonGroup,
+  component: _ButtonGroup.ButtonGroup,
   decorators: [function (Story) {
     return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, {
       style: {
@@ -27,7 +27,7 @@ var Template = function Template(args) {
   var children = segmented ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_OutlineButtonStyle.OutlineButton, null, "Label"), /*#__PURE__*/_react["default"].createElement(_OutlineButtonStyle.OutlineButton, null, "Label"), /*#__PURE__*/_react["default"].createElement(_OutlineButtonStyle.OutlineButton, {
     active: true
   }, "Label"), /*#__PURE__*/_react["default"].createElement(_OutlineButtonStyle.OutlineButton, null, "Label"), /*#__PURE__*/_react["default"].createElement(_OutlineButtonStyle.OutlineButton, null, "Label")) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "Label"), /*#__PURE__*/_react["default"].createElement(_PrimaryButtonStyle.PrimaryButton, null, "Label"));
-  return /*#__PURE__*/_react["default"].createElement(_ButtonGroupStyle.ButtonGroup, args, children);
+  return /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, args, children);
 };
 var Interactive = Template.bind({});
 exports.Interactive = Interactive;