@ltht-react/select 1.3.13

package/CHANGELOG.md

@@ -0,0 +1,176 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.3.13 (2021-09-17)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## 1.3.12 (2021-08-26)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## 1.3.11 (2021-08-23)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.10](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.9...@ltht-react/select@1.3.10) (2021-08-02)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.9](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.8...@ltht-react/select@1.3.9) (2021-07-14)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.8](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.7...@ltht-react/select@1.3.8) (2021-07-12)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.7](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.6...@ltht-react/select@1.3.7) (2021-07-07)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.6](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.5...@ltht-react/select@1.3.6) (2021-07-06)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.5](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.4...@ltht-react/select@1.3.5) (2021-06-29)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.4](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.3...@ltht-react/select@1.3.4) (2021-06-21)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.3](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.2...@ltht-react/select@1.3.3) (2021-06-03)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [1.3.1](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@1.3.0...@ltht-react/select@1.3.1) (2021-04-23)
+
+**Note:** Version bump only for package @ltht-react/select
+
+
+
+
+
+## [0.0.20](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.18...@ltht-react/select@0.0.20) (2020-11-19)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.19](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.18...@ltht-react/select@0.0.19) (2020-10-29)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.18](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.17...@ltht-react/select@0.0.18) (2020-09-10)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.17](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.16...@ltht-react/select@0.0.17) (2020-09-01)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.16](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.15...@ltht-react/select@0.0.16) (2020-08-21)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.15](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.14...@ltht-react/select@0.0.15) (2020-08-19)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.14](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.13...@ltht-react/select@0.0.14) (2020-08-19)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.13](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.12...@ltht-react/select@0.0.13) (2020-08-18)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.12](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.11...@ltht-react/select@0.0.12) (2020-08-11)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.11](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.10...@ltht-react/select@0.0.11) (2020-08-10)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.10](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.9...@ltht-react/select@0.0.10) (2020-08-05)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.9](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.8...@ltht-react/select@0.0.9) (2020-08-05)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.8](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.7...@ltht-react/select@0.0.8) (2020-08-05)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.6](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.5...@ltht-react/select@0.0.6) (2020-08-04)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.5](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.4...@ltht-react/select@0.0.5) (2020-04-14)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.4](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.3...@ltht-react/select@0.0.4) (2020-04-09)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.3](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.2...@ltht-react/select@0.0.3) (2020-04-08)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## [0.0.2](https://ssh.github.com/ltht-epr/ltht-react/compare/@ltht-react/select@0.0.1...@ltht-react/select@0.0.2) (2020-04-03)
+
+**Note:** Version bump only for package @ltht-react/select
+
+## 0.0.1 (2020-03-16)
+
+**Note:** Version bump only for package @ltht-react/select

package/README.md

@@ -0,0 +1,15 @@
+# Select
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Select from '@ltht-react/select'
+```
+
+### Usage
+
+```jsx
+<Select />
+```

package/lib/atoms/option.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes } from 'react';
+declare const Option: FC<IProps>;
+export interface IProps extends HTMLAttributes<HTMLSpanElement> {
+    active: boolean;
+}
+export default Option;

package/lib/atoms/option.js

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var styles_1 = require("@ltht-react/styles");
+var StyledOption = styled_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  border: 1px solid black;\n  border-top: 0;\n  padding: 0.5rem 1rem;\n  background: ", ";\n  cursor: pointer;\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  border: 1px solid black;\n  border-top: 0;\n  padding: 0.5rem 1rem;\n  background: ", ";\n  cursor: pointer;\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var active = _a.active;
+    return (active ? "" + styles_1.SELECT_COLOURS.OPTION_SELECTED : 'white');
+}, function (_a) {
+    var active = _a.active;
+    return (active ? 'bold' : 'normal');
+}, styles_1.SELECT_COLOURS.OPTION_HOVER);
+var Option = function (_a) {
+    var children = _a.children, _b = _a.active, active = _b === void 0 ? false : _b, rest = __rest(_a, ["children", "active"]);
+    return (jsx_runtime_1.jsx(StyledOption, __assign({ active: active }, rest, { children: children }), void 0));
+};
+exports.default = Option;
+var templateObject_1;
+//# sourceMappingURL=option.js.map

package/lib/atoms/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/atoms/option.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,2DAAoC;AACpC,6CAAmD;AAEnD,IAAM,YAAY,GAAG,gBAAM,CAAC,IAAI,sUAAe,4HAM/B,EAAwE,wCAEvE,EAA4C,+EAIrC,EAA2B,UAElD,KARe,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAG,uBAAc,CAAC,eAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;AAAxD,CAAwD,EAEvE,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAA5B,CAA4B,EAIrC,uBAAc,CAAC,YAAY,CAElD,CAAA;AAED,IAAM,MAAM,GAAe,UAAC,EAAqC;IAAnC,IAAA,QAAQ,cAAA,EAAE,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EAAK,IAAI,cAAnC,sBAAqC,CAAF;IAAO,OAAA,CACpE,kBAAC,YAAY,aAAC,MAAM,EAAE,MAAM,IAAM,IAAI,cACnC,QAAQ,YACI,CAChB,CAAA;CAAA,CAAA;AAUD,kBAAe,MAAM,CAAA"}

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes } from 'react';
+import { IProps as OptionProps } from './atoms/option';
+declare const Select: FC<IProps> & SelectComposition;
+interface SelectComposition {
+    Option: FC<OptionProps>;
+}
+interface IProps extends HTMLAttributes<HTMLDivElement> {
+    activeOption?: string;
+}
+export default Select;

package/lib/index.js

@@ -0,0 +1,76 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var styles_1 = require("@ltht-react/styles");
+var icon_1 = require("@ltht-react/icon");
+var option_1 = __importDefault(require("./atoms/option"));
+var StyledSelect = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])), styles_1.CSS_RESET);
+var SelectTrigger = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-height: 32px;\n  border: 1px solid black;\n  padding: 0.5rem 1rem;\n  background: white;\n  cursor: pointer;\n\n  ", " {\n    min-height: 39px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-height: 32px;\n  border: 1px solid black;\n  padding: 0.5rem 1rem;\n  background: white;\n  cursor: pointer;\n\n  ", " {\n    min-height: 39px;\n  }\n"])), styles_1.DESKTOP_MEDIA_QUERY);
+var ActiveOption = styled_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: bold;\n  flex: 1;\n"], ["\n  font-weight: bold;\n  flex: 1;\n"])));
+var SelectOptions = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  top: 100%;\n  left: 0;\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  top: 100%;\n  left: 0;\n"])), function (_a) {
+    var open = _a.open;
+    return (open ? 'block' : 'none');
+});
+var Select = function (_a) {
+    var children = _a.children, _b = _a.activeOption, activeOption = _b === void 0 ? '' : _b, rest = __rest(_a, ["children", "activeOption"]);
+    var _c = react_1.useState(false), open = _c[0], setOpen = _c[1];
+    var selectRef = react_1.useRef(null);
+    var handleOnEscapeKey = function (e) {
+        // IE11 has the key of 'Esc'
+        if (e.key === 'Escape' || e.key === 'Esc') {
+            setOpen(false);
+        }
+    };
+    var handleOutsideClick = function (e) {
+        if (selectRef.current && !selectRef.current.contains(e.target)) {
+            setOpen(false);
+        }
+    };
+    react_1.useEffect(function () {
+        document.addEventListener('keydown', handleOnEscapeKey, true);
+        document.addEventListener('click', handleOutsideClick, true);
+        // Cleanup
+        return function () {
+            document.removeEventListener('keydown', handleOnEscapeKey, true);
+            document.removeEventListener('click', handleOutsideClick, true);
+        };
+    });
+    return (jsx_runtime_1.jsxs(StyledSelect, __assign({}, rest, { ref: selectRef }, { children: [jsx_runtime_1.jsxs(SelectTrigger, __assign({ "data-testid": "select-trigger", onClick: function () { return setOpen(function (open) { return !open; }); } }, { children: [jsx_runtime_1.jsx(ActiveOption, __assign({ "data-testid": "select-active-option" }, { children: activeOption }), void 0),
+                    jsx_runtime_1.jsx(icon_1.ChevronIcon, { direction: open ? 'up' : 'down', size: "small" }, void 0)] }), void 0),
+            jsx_runtime_1.jsx(SelectOptions, __assign({ "data-testid": "select-options", open: open, onClick: function () { return setOpen(false); } }, { children: children }), void 0)] }), void 0));
+};
+Select.Option = option_1.default;
+exports.default = Select;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAuE;AACvE,2DAAoC;AACpC,6CAAmE;AACnE,yCAA8C;AAE9C,0DAA8D;AAE9D,IAAM,YAAY,GAAG,gBAAM,CAAC,GAAG,oJAAA,MAC3B,EAAS,yEAIZ,KAJG,kBAAS,CAIZ,CAAA;AAED,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,6TAAA,sNAW5B,EAAmB,kCAGtB,KAHG,4BAAmB,CAGtB,CAAA;AAED,IAAM,YAAY,GAAG,gBAAM,CAAC,IAAI,yGAAA,sCAG/B,IAAA,CAAA;AAED,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,0JAAgB,+BAEnC,EAAuC,sDAInD,KAJY,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAAzB,CAAyB,CAInD,CAAA;AAED,IAAM,MAAM,GAAmC,UAAC,EAAwC;IAAtC,IAAA,QAAQ,cAAA,EAAE,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAK,IAAI,cAAtC,4BAAwC,CAAF;IAC9E,IAAA,KAAkB,gBAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IACvC,IAAM,SAAS,GAAG,cAAM,CAAiB,IAAI,CAAC,CAAA;IAE9C,IAAM,iBAAiB,GAAG,UAAC,CAAgB;QACzC,4BAA4B;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACzC,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;IACH,CAAC,CAAA;IAED,IAAM,kBAAkB,GAAG,UAAC,CAAa;QACvC,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;YACtE,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;IACH,CAAC,CAAA;IAED,iBAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAA;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAA;QAE5D,UAAU;QACV,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAA;YAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAA;QACjE,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,mBAAC,YAAY,eAAK,IAAI,IAAE,GAAG,EAAE,SAAS,iBACpC,mBAAC,aAAa,4BAAa,gBAAgB,EAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,EAAxB,CAAwB,iBACjF,kBAAC,YAAY,4BAAa,sBAAsB,gBAAE,YAAY,YAAgB;oBAC9E,kBAAC,kBAAW,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAC,OAAO,WAAG,aAC/C;YAChB,kBAAC,aAAa,4BAAa,gBAAgB,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,gBAClF,QAAQ,YACK,aACH,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,gBAAM,CAAA;AActB,kBAAe,MAAM,CAAA"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@ltht-react/select",
+  "version": "1.3.13",
+  "description": "ltht-react atoms Select component.",
+  "author": "LTHT",
+  "homepage": "",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "directories": {
+    "lib": "lib"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "yarn build:lib",
+    "watch": "tsc -w",
+    "build:lib": "tsc",
+    "type:check": "tsc --noEmit",
+    "lint": "prettylint 'src/*.{ts,tsx}'"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@ltht-react/icon": "^1.3.13",
+    "@ltht-react/styles": "^1.3.5",
+    "@ltht-react/types": "^1.0.9",
+    "@ltht-react/utils": "^1.1.11",
+    "react": "^17.0.0"
+  },
+  "gitHead": "2fb4ee694529d51759e27b2201553e35b9aa5f2f"
+}