@justeattakeaway/pie-select 0.4.3 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +6 -6
- package/dist/react.d.ts +1 -1
- package/package.json +2 -2
- package/src/defs-react.ts +2 -1
- package/src/react.ts +1 -1
- package/src/select.scss +8 -2
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement as b, html as p, nothing as $, unsafeCSS as I } from "lit";
|
|
2
|
-
import { property as a, query as f, queryAssignedElements as k, state as
|
|
3
|
-
import { FormControlMixin as
|
|
2
|
+
import { property as a, query as f, queryAssignedElements as k, state as w } from "lit/decorators.js";
|
|
3
|
+
import { FormControlMixin as z, RtlMixin as C, wrapNativeEvent as S, validPropertyValues as m, defineCustomElement as L } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import { ifDefined as h } from "lit/directives/if-defined.js";
|
|
5
5
|
import { classMap as T } from "lit/directives/class-map.js";
|
|
6
6
|
import { live as E } from "lit/directives/live.js";
|
|
@@ -13,13 +13,13 @@ var A = Object.defineProperty, F = (c, t, e, d) => {
|
|
|
13
13
|
};
|
|
14
14
|
class x extends b {
|
|
15
15
|
constructor() {
|
|
16
|
-
super(...arguments), this.v = "0.
|
|
16
|
+
super(...arguments), this.v = "0.5.0";
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
F([
|
|
20
20
|
a({ type: String, reflect: !0 })
|
|
21
21
|
], x.prototype, "v");
|
|
22
|
-
const V = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end:
|
|
22
|
+
const V = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: 52px;--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", O = ["small", "medium", "large"], P = ["default", "error"], n = {
|
|
23
23
|
size: "medium",
|
|
24
24
|
status: "default",
|
|
25
25
|
disabled: !1,
|
|
@@ -30,7 +30,7 @@ var R = Object.defineProperty, o = (c, t, e, d) => {
|
|
|
30
30
|
(l = c[i]) && (s = l(t, e, s) || s);
|
|
31
31
|
return s && R(t, e, s), s;
|
|
32
32
|
};
|
|
33
|
-
const g = "pie-select", u = "assistive-text", v = class v extends C(
|
|
33
|
+
const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
|
|
34
34
|
constructor() {
|
|
35
35
|
super(...arguments), this.size = n.size, this.disabled = n.disabled, this.status = n.status, this.options = n.options, this._hasLeadingIcon = !1, this._handleChange = (t) => {
|
|
36
36
|
const e = S(t);
|
|
@@ -173,7 +173,7 @@ o([
|
|
|
173
173
|
k({ slot: "leadingIcon", flatten: !0 })
|
|
174
174
|
], r.prototype, "_leadingIconSlot");
|
|
175
175
|
o([
|
|
176
|
-
|
|
176
|
+
w()
|
|
177
177
|
], r.prototype, "_hasLeadingIcon");
|
|
178
178
|
L(g, r);
|
|
179
179
|
export {
|
package/dist/react.d.ts
CHANGED
|
@@ -78,7 +78,7 @@ declare type PieSelectEvents = {
|
|
|
78
78
|
onChange?: (event: CustomEvent) => void;
|
|
79
79
|
};
|
|
80
80
|
|
|
81
|
-
declare type ReactBaseType = React_2.HTMLAttributes<HTMLSelectElement>;
|
|
81
|
+
declare type ReactBaseType = Omit<React_2.HTMLAttributes<HTMLSelectElement>, 'onChange'>;
|
|
82
82
|
|
|
83
83
|
declare interface SelectOptionGroupProps {
|
|
84
84
|
/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-select",
|
|
3
3
|
"description": "PIE Design System Select built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.5.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"**/*.d.ts"
|
|
14
14
|
],
|
|
15
15
|
"pieMetadata": {
|
|
16
|
-
"componentStatus": "
|
|
16
|
+
"componentStatus": "beta"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "run -T vite build",
|
package/src/defs-react.ts
CHANGED
package/src/react.ts
CHANGED
|
@@ -15,7 +15,7 @@ const PieSelectReact = createComponent({
|
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
-
type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>
|
|
18
|
+
type ReactBaseType = Omit<React.HTMLAttributes<HTMLSelectElement>, 'onChange'>
|
|
19
19
|
|
|
20
20
|
type PieSelectEvents = {
|
|
21
21
|
onChange?: (event: CustomEvent) => void;
|
package/src/select.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
.c-select {
|
|
4
4
|
--select-padding-block: var(--dt-spacing-c);
|
|
5
5
|
--select-padding-inline-start: var(--dt-spacing-d);
|
|
6
|
-
--select-padding-inline-end:
|
|
6
|
+
--select-padding-inline-end: 52px;
|
|
7
7
|
--select-background-color: var(--dt-color-container-default);
|
|
8
8
|
--select-text-color: var(--dt-color-content-default);
|
|
9
9
|
--select-border-color: var(--dt-color-border-form);
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
padding-block-start: var(--select-padding-block);
|
|
28
28
|
padding-block-end: var(--select-padding-block);
|
|
29
29
|
background-color: var(--select-background-color);
|
|
30
|
+
font-family: inherit;
|
|
30
31
|
font-size: inherit;
|
|
31
32
|
line-height: inherit;
|
|
32
33
|
color: inherit;
|
|
@@ -36,6 +37,11 @@
|
|
|
36
37
|
appearance: none;
|
|
37
38
|
cursor: var(--select-cursor);
|
|
38
39
|
|
|
40
|
+
// Ensure longer options are truncated
|
|
41
|
+
text-overflow: ellipsis;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
|
|
39
45
|
&:focus-within {
|
|
40
46
|
@include p.focus;
|
|
41
47
|
}
|
|
@@ -98,4 +104,4 @@
|
|
|
98
104
|
--select-text-color: var(--dt-color-content-disabled);
|
|
99
105
|
--select-cursor: auto;
|
|
100
106
|
}
|
|
101
|
-
}
|
|
107
|
+
}
|