@ltht-react/select 1.3.147 → 1.3.149

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_MINIMUM_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,6CAA2E;AAC3E,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,EAA2B,kCAG9B,KAHG,oCAA2B,CAG9B,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

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/select",
-  "version": "1.3.147",
+  "version": "1.3.149",
   "description": "ltht-react atoms Select component.",
   "author": "LTHT",
   "homepage": "",
@@ -27,11 +27,11 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/icon": "^1.3.147",
-    "@ltht-react/styles": "^1.3.139",
-    "@ltht-react/types": "^1.0.143",
-    "@ltht-react/utils": "^1.1.145",
+    "@ltht-react/icon": "^1.3.149",
+    "@ltht-react/styles": "^1.3.141",
+    "@ltht-react/types": "^1.0.145",
+    "@ltht-react/utils": "^1.1.147",
     "react": "^17.0.0"
   },
-  "gitHead": "1ac20069f8b41b756197d507839383a7fd53daf1"
+  "gitHead": "246a8d47057a859c4a0bea7d618afee2229b7d70"
 }