jcicl 0.0.179 → 0.0.183

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.
@@ -1 +1,14 @@
1
- export {};
1
+ import { SelectProps } from '@mui/material/Select';
2
+ export type DropdownOption = {
3
+ label: string;
4
+ value: string | number;
5
+ };
6
+ export type LabeledDropdownProps = {
7
+ label: string;
8
+ colon?: boolean;
9
+ options: DropdownOption[];
10
+ borderFocusColor?: string;
11
+ minWidth?: string;
12
+ } & SelectProps;
13
+ export declare const LabeledDropdown: React.FC<LabeledDropdownProps>;
14
+ export default LabeledDropdown;
@@ -1 +1,330 @@
1
+ import { jsx as c, jsxs as I } from "react/jsx-runtime";
2
+ import { n as D } from "../.chunks/emotion-styled.browser.esm.js";
3
+ import { c as V } from "../.chunks/emotion-react.browser.esm.js";
4
+ import N from "../theme.js";
5
+ import { L as $, F, S as P } from "../.chunks/Select.js";
6
+ import * as p from "react";
7
+ import { g as f, a as E, s as U, r as G, d as u, u as z, c as w, P as t, b as H } from "../.chunks/DefaultPropsProvider.js";
8
+ import { m as W } from "../.chunks/memoTheme.js";
9
+ import { B as _ } from "../.chunks/ButtonBase.js";
10
+ import { d as M } from "../.chunks/dividerClasses.js";
11
+ import { a as q, u as A } from "../.chunks/TransitionGroupContext.js";
12
+ const O = f("MuiListItemIcon", ["root", "alignItemsFlexStart"]), h = f("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
13
+ function J(e) {
14
+ return E("MuiMenuItem", e);
15
+ }
16
+ const d = f("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), K = (e, o) => {
17
+ const {
18
+ ownerState: s
19
+ } = e;
20
+ return [o.root, s.dense && o.dense, s.divider && o.divider, !s.disableGutters && o.gutters];
21
+ }, Q = (e) => {
22
+ const {
23
+ disabled: o,
24
+ dense: s,
25
+ divider: r,
26
+ disableGutters: n,
27
+ selected: i,
28
+ classes: a
29
+ } = e, l = H({
30
+ root: ["root", s && "dense", o && "disabled", !n && "gutters", r && "divider", i && "selected"]
31
+ }, J, a);
32
+ return {
33
+ ...a,
34
+ ...l
35
+ };
36
+ }, X = U(_, {
37
+ shouldForwardProp: (e) => G(e) || e === "classes",
38
+ name: "MuiMenuItem",
39
+ slot: "Root",
40
+ overridesResolver: K
41
+ })(W(({
42
+ theme: e
43
+ }) => ({
44
+ ...e.typography.body1,
45
+ display: "flex",
46
+ justifyContent: "flex-start",
47
+ alignItems: "center",
48
+ position: "relative",
49
+ textDecoration: "none",
50
+ minHeight: 48,
51
+ paddingTop: 6,
52
+ paddingBottom: 6,
53
+ boxSizing: "border-box",
54
+ whiteSpace: "nowrap",
55
+ "&:hover": {
56
+ textDecoration: "none",
57
+ backgroundColor: (e.vars || e).palette.action.hover,
58
+ // Reset on touch devices, it doesn't add specificity
59
+ "@media (hover: none)": {
60
+ backgroundColor: "transparent"
61
+ }
62
+ },
63
+ [`&.${d.selected}`]: {
64
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : u(e.palette.primary.main, e.palette.action.selectedOpacity),
65
+ [`&.${d.focusVisible}`]: {
66
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : u(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
67
+ }
68
+ },
69
+ [`&.${d.selected}:hover`]: {
70
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : u(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
71
+ // Reset on touch devices, it doesn't add specificity
72
+ "@media (hover: none)": {
73
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : u(e.palette.primary.main, e.palette.action.selectedOpacity)
74
+ }
75
+ },
76
+ [`&.${d.focusVisible}`]: {
77
+ backgroundColor: (e.vars || e).palette.action.focus
78
+ },
79
+ [`&.${d.disabled}`]: {
80
+ opacity: (e.vars || e).palette.action.disabledOpacity
81
+ },
82
+ [`& + .${M.root}`]: {
83
+ marginTop: e.spacing(1),
84
+ marginBottom: e.spacing(1)
85
+ },
86
+ [`& + .${M.inset}`]: {
87
+ marginLeft: 52
88
+ },
89
+ [`& .${h.root}`]: {
90
+ marginTop: 0,
91
+ marginBottom: 0
92
+ },
93
+ [`& .${h.inset}`]: {
94
+ paddingLeft: 36
95
+ },
96
+ [`& .${O.root}`]: {
97
+ minWidth: 36
98
+ },
99
+ variants: [{
100
+ props: ({
101
+ ownerState: o
102
+ }) => !o.disableGutters,
103
+ style: {
104
+ paddingLeft: 16,
105
+ paddingRight: 16
106
+ }
107
+ }, {
108
+ props: ({
109
+ ownerState: o
110
+ }) => o.divider,
111
+ style: {
112
+ borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
113
+ backgroundClip: "padding-box"
114
+ }
115
+ }, {
116
+ props: ({
117
+ ownerState: o
118
+ }) => !o.dense,
119
+ style: {
120
+ [e.breakpoints.up("sm")]: {
121
+ minHeight: "auto"
122
+ }
123
+ }
124
+ }, {
125
+ props: ({
126
+ ownerState: o
127
+ }) => o.dense,
128
+ style: {
129
+ minHeight: 32,
130
+ // https://m2.material.io/components/menus#specs > Dense
131
+ paddingTop: 4,
132
+ paddingBottom: 4,
133
+ ...e.typography.body2,
134
+ [`& .${O.root} svg`]: {
135
+ fontSize: "1.25rem"
136
+ }
137
+ }
138
+ }]
139
+ }))), T = /* @__PURE__ */ p.forwardRef(function(o, s) {
140
+ const r = z({
141
+ props: o,
142
+ name: "MuiMenuItem"
143
+ }), {
144
+ autoFocus: n = !1,
145
+ component: i = "li",
146
+ dense: a = !1,
147
+ divider: g = !1,
148
+ disableGutters: l = !1,
149
+ focusVisibleClassName: L,
150
+ role: R = "menuitem",
151
+ tabIndex: v,
152
+ className: S,
153
+ ...k
154
+ } = r, y = p.useContext($), x = p.useMemo(() => ({
155
+ dense: a || y.dense || !1,
156
+ disableGutters: l
157
+ }), [y.dense, a, l]), m = p.useRef(null);
158
+ q(() => {
159
+ n && (m.current ? m.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
160
+ }, [n]);
161
+ const B = {
162
+ ...r,
163
+ dense: x.dense,
164
+ divider: g,
165
+ disableGutters: l
166
+ }, b = Q(r), j = A(m, s);
167
+ let C;
168
+ return r.disabled || (C = v !== void 0 ? v : -1), /* @__PURE__ */ c($.Provider, {
169
+ value: x,
170
+ children: /* @__PURE__ */ c(X, {
171
+ ref: j,
172
+ role: R,
173
+ tabIndex: C,
174
+ component: i,
175
+ focusVisibleClassName: w(b.focusVisible, L),
176
+ className: w(b.root, S),
177
+ ...k,
178
+ ownerState: B,
179
+ classes: b
180
+ })
181
+ });
182
+ });
183
+ process.env.NODE_ENV !== "production" && (T.propTypes = {
184
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
185
+ // │ These PropTypes are generated from the TypeScript type definitions. │
186
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
187
+ // └─────────────────────────────────────────────────────────────────────┘
188
+ /**
189
+ * If `true`, the list item is focused during the first mount.
190
+ * Focus will also be triggered if the value changes from false to true.
191
+ * @default false
192
+ */
193
+ autoFocus: t.bool,
194
+ /**
195
+ * The content of the component.
196
+ */
197
+ children: t.node,
198
+ /**
199
+ * Override or extend the styles applied to the component.
200
+ */
201
+ classes: t.object,
202
+ /**
203
+ * @ignore
204
+ */
205
+ className: t.string,
206
+ /**
207
+ * The component used for the root node.
208
+ * Either a string to use a HTML element or a component.
209
+ */
210
+ component: t.elementType,
211
+ /**
212
+ * If `true`, compact vertical padding designed for keyboard and mouse input is used.
213
+ * The prop defaults to the value inherited from the parent Menu component.
214
+ * @default false
215
+ */
216
+ dense: t.bool,
217
+ /**
218
+ * @ignore
219
+ */
220
+ disabled: t.bool,
221
+ /**
222
+ * If `true`, the left and right padding is removed.
223
+ * @default false
224
+ */
225
+ disableGutters: t.bool,
226
+ /**
227
+ * If `true`, a 1px light border is added to the bottom of the menu item.
228
+ * @default false
229
+ */
230
+ divider: t.bool,
231
+ /**
232
+ * This prop can help identify which element has keyboard focus.
233
+ * The class name will be applied when the element gains the focus through keyboard interaction.
234
+ * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
235
+ * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
236
+ * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
237
+ * if needed.
238
+ */
239
+ focusVisibleClassName: t.string,
240
+ /**
241
+ * @ignore
242
+ */
243
+ role: t.string,
244
+ /**
245
+ * If `true`, the component is selected.
246
+ * @default false
247
+ */
248
+ selected: t.bool,
249
+ /**
250
+ * The system prop that allows defining system overrides as well as additional CSS styles.
251
+ */
252
+ sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
253
+ /**
254
+ * @default 0
255
+ */
256
+ tabIndex: t.number
257
+ });
258
+ const Y = D("div")(
259
+ ({ borderFocusColor: e, minWidth: o = "130px" }) => ({
260
+ ...V`
261
+ display: flex;
262
+ flex-wrap: nowrap;
263
+ align-items: center;
264
+ gap: 9px;
265
+ font-family: 'Roboto', sans-serif;
266
+ min-width: ${o};
1
267
 
268
+ .jcDropdownLabel {
269
+ white-space: nowrap;
270
+ font-weight: bold;
271
+ text-transform: capitalize;
272
+ }
273
+
274
+ .MuiInputBase-input {
275
+ padding: 0;
276
+ padding-right: 0px !important;
277
+ min-height: 0;
278
+ }
279
+
280
+ .MuiInputBase-root {
281
+ height: 18px;
282
+ padding: 2px 0;
283
+
284
+ ::before,
285
+ ::after {
286
+ border: none !important;
287
+ }
288
+
289
+ transition: 313ms all ease-out;
290
+ border-radius: 0;
291
+ border-bottom: 1px solid ${N.colors.gray};
292
+ width: 100%;
293
+
294
+ .Mui-select {
295
+ border: none !important;
296
+ }
297
+
298
+ :hover,
299
+ :focus-visible,
300
+ &.Mui-focused {
301
+ box-shadow: 0 -5px 4px -4px ${e} inset;
302
+ }
303
+ }
304
+
305
+ svg {
306
+ height: 19px;
307
+ width: 19px;
308
+ margin-right: -6px;
309
+ }
310
+ `
311
+ })
312
+ ), de = ({
313
+ label: e,
314
+ colon: o = !0,
315
+ options: s,
316
+ borderFocusColor: r = N.colors.green,
317
+ // border primary
318
+ minWidth: n,
319
+ ...i
320
+ }) => /* @__PURE__ */ I(Y, { className: "jcLabeledDropdown", borderFocusColor: r, minWidth: n, children: [
321
+ /* @__PURE__ */ I("span", { className: "jcDropdownLabel", children: [
322
+ e,
323
+ o && ":"
324
+ ] }),
325
+ /* @__PURE__ */ c(F, { variant: "standard", fullWidth: !0, children: /* @__PURE__ */ c(P, { ...i, children: s.map((a) => /* @__PURE__ */ c(T, { value: a.value, children: a.label }, a.value)) }) })
326
+ ] });
327
+ export {
328
+ de as LabeledDropdown,
329
+ de as default
330
+ };
@@ -1 +1 @@
1
- export {};
1
+ export { default, type LabeledDropdownProps, type DropdownOption } from './LabeledDropdown.tsx';
@@ -1 +1,4 @@
1
-
1
+ import { LabeledDropdown as a } from "./LabeledDropdown.js";
2
+ export {
3
+ a as default
4
+ };
@@ -1,12 +1,12 @@
1
- import { jsxs as t, jsx as r } from "react/jsx-runtime";
1
+ import { jsxs as e, jsx as r } from "react/jsx-runtime";
2
2
  import { n as p } from "../.chunks/emotion-styled.browser.esm.js";
3
3
  import { c as s } from "../.chunks/emotion-react.browser.esm.js";
4
4
  import { Input as n } from "../Input/Input.js";
5
- const i = p("div")(({ grid: e }) => ({
5
+ const i = p("div")(({ grid: t }) => ({
6
6
  ...s`
7
7
  display: flex;
8
8
  flex-wrap: nowrap;
9
- gap: 0.5rem;
9
+ gap: 9px;
10
10
  font-family: 'Roboto', sans-serif;
11
11
 
12
12
  span {
@@ -20,12 +20,12 @@ const i = p("div")(({ grid: e }) => ({
20
20
  }
21
21
 
22
22
  .MuiInputBase-root {
23
- width: ${e && "100%"};
23
+ width: ${t && "100%"};
24
24
  }
25
25
  `
26
- })), c = ({ label: e, grid: o = !0, ...a }) => /* @__PURE__ */ t(i, { grid: o, className: "jcLabeledInput", children: [
27
- /* @__PURE__ */ t("span", { children: [
28
- e,
26
+ })), c = ({ label: t, grid: o = !0, ...a }) => /* @__PURE__ */ e(i, { grid: o, className: "jcLabeledInput", children: [
27
+ /* @__PURE__ */ e("span", { children: [
28
+ t,
29
29
  ":"
30
30
  ] }),
31
31
  /* @__PURE__ */ r(n, { ...a })
@@ -2,7 +2,7 @@ import { jsx as d, jsxs as Z } from "react/jsx-runtime";
2
2
  import { n as aa } from "../.chunks/emotion-styled.browser.esm.js";
3
3
  import { c as ta } from "../.chunks/emotion-react.browser.esm.js";
4
4
  import * as G from "react";
5
- import { a as _, g as H, s as B, e as N, u as q, b as U, P as t, c as I, d as J } from "../.chunks/DefaultPropsProvider.js";
5
+ import { g as _, a as H, s as B, d as N, u as q, c as U, P as t, e as I, b as J } from "../.chunks/DefaultPropsProvider.js";
6
6
  import { u as ea } from "../.chunks/useControlled.js";
7
7
  import { u as j, i as w } from "../.chunks/useSlot.js";
8
8
  import { u as oa } from "../.chunks/index.js";
@@ -1,8 +1,8 @@
1
1
  import { jsx as re, jsxs as Et } from "react/jsx-runtime";
2
2
  import * as C from "react";
3
- import { a as Ht, g as Ut, P as r, d as Ft, s as et, u as qt, c as zt, e as Yt, b as qe } from "../.chunks/DefaultPropsProvider.js";
3
+ import { g as Ht, a as Ut, P as r, b as Ft, s as et, u as qt, e as zt, d as Yt, c as qe } from "../.chunks/DefaultPropsProvider.js";
4
4
  import { u as Xt, a as ze } from "../.chunks/index.js";
5
- import { o as Rt, P as fo, H as Qe, f as uo, a as mo, h as vo, g as ho, G as At, e as go } from "../.chunks/Portal.js";
5
+ import { o as Rt, P as fo, H as Qe, h as uo, a as mo, c as vo, g as ho, G as At, e as go } from "../.chunks/Portal.js";
6
6
  import { m as lt } from "../.chunks/memoTheme.js";
7
7
  import { c as yo } from "../.chunks/chainPropTypes.js";
8
8
  import { r as Gt, u as it, a as Ct, d as Ye, e as Mt, f as bo } from "../.chunks/TransitionGroupContext.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.179",
4
+ "version": "0.0.183",
5
5
  "description": "Component library for the websites of Johnson County Iowa",
6
6
  "license": "MIT",
7
7
  "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",