@dbcdk/react-components 0.0.159 → 0.0.161

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.
Files changed (9) hide show
  1. package/dist/components/forms/typeahead/Typeahead.cjs +6 -6
  2. package/dist/components/forms/typeahead/Typeahead.d.ts +1 -0
  3. package/dist/components/forms/typeahead/Typeahead.js +6 -6
  4. package/dist/components/headline/CollapsibleHeadline.cjs +1 -1
  5. package/dist/components/headline/CollapsibleHeadline.d.ts +2 -3
  6. package/dist/components/headline/CollapsibleHeadline.js +1 -1
  7. package/dist/hooks/useDeviceSize.cjs +2 -4
  8. package/dist/hooks/useDeviceSize.js +2 -4
  9. package/package.json +1 -1
package/dist/components/forms/typeahead/Typeahead.cjs CHANGED
@@ -297,7 +297,7 @@ function Typeahead({
297
297
  if (fittedWidthPx == null) return minWidth != null ? minWidth : "120px";
298
298
  return `${fittedWidthPx}px`;
299
299
  }, [shouldFitContent, fittedWidthPx, minWidth]);
300
- const shouldStretchInput = fullWidth || shouldFitContent;
300
+ const shouldStretchInput = !width && (fullWidth || shouldFitContent);
301
301
  React.useEffect(() => {
302
302
  if (!enableHotkey) return;
303
303
  function handleKeyDown2(event) {
@@ -600,10 +600,10 @@ function Typeahead({
600
600
  display: "flex",
601
601
  flexDirection: "column",
602
602
  gap: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? 8 : 0,
603
- width: fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
604
- flex: fullWidth || shouldFitContent ? "1 1 auto" : void 0,
605
- minWidth: shouldFitContent ? measuredRootWidth : 0,
606
- maxWidth: shouldFitContent ? "100%" : void 0
603
+ width: width != null ? width : fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
604
+ flex: width ? "0 0 auto" : fullWidth || shouldFitContent ? "1 1 auto" : void 0,
605
+ minWidth: width ? void 0 : shouldFitContent ? measuredRootWidth : 0,
606
+ maxWidth: width ? void 0 : shouldFitContent ? "100%" : void 0
607
607
  },
608
608
  children: [
609
609
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -690,7 +690,7 @@ function Typeahead({
690
690
  placeholder,
691
691
  variant,
692
692
  inputSize: resolvedInputSize,
693
- width: shouldFitContent ? void 0 : width != null ? width : inputProps == null ? void 0 : inputProps.width,
693
+ width: width != null ? width : shouldFitContent ? void 0 : inputProps == null ? void 0 : inputProps.width,
694
694
  autoComplete: (_a2 = autoComplete != null ? autoComplete : inputProps == null ? void 0 : inputProps.autoComplete) != null ? _a2 : "off",
695
695
  autoCorrect: (_b2 = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b2 : "off",
696
696
  autoCapitalize: (_c = autoCapitalize != null ? autoCapitalize : inputProps == null ? void 0 : inputProps.autoCapitalize) != null ? _c : "none",
package/dist/components/forms/typeahead/Typeahead.d.ts CHANGED
@@ -24,6 +24,7 @@ interface TypeaheadProps<T> {
24
24
  filterOptions?: (options: TypeaheadOption<T>[], query: string) => TypeaheadOption<T>[];
25
25
  inputProps?: Omit<InputProps, 'onChange' | 'value'>;
26
26
  inputSize?: InputProps['inputSize'];
27
+ /** Explicit width; takes precedence over `fullWidth` and `fitContent` when set. */
27
28
  width?: InputProps['width'];
28
29
  minWidth?: string;
29
30
  popoverWidth?: string;
package/dist/components/forms/typeahead/Typeahead.js CHANGED
@@ -273,7 +273,7 @@ function Typeahead({
273
273
  if (fittedWidthPx == null) return minWidth != null ? minWidth : "120px";
274
274
  return `${fittedWidthPx}px`;
275
275
  }, [shouldFitContent, fittedWidthPx, minWidth]);
276
- const shouldStretchInput = fullWidth || shouldFitContent;
276
+ const shouldStretchInput = !width && (fullWidth || shouldFitContent);
277
277
  useEffect(() => {
278
278
  if (!enableHotkey) return;
279
279
  function handleKeyDown2(event) {
@@ -576,10 +576,10 @@ function Typeahead({
576
576
  display: "flex",
577
577
  flexDirection: "column",
578
578
  gap: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? 8 : 0,
579
- width: fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
580
- flex: fullWidth || shouldFitContent ? "1 1 auto" : void 0,
581
- minWidth: shouldFitContent ? measuredRootWidth : 0,
582
- maxWidth: shouldFitContent ? "100%" : void 0
579
+ width: width != null ? width : fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
580
+ flex: width ? "0 0 auto" : fullWidth || shouldFitContent ? "1 1 auto" : void 0,
581
+ minWidth: width ? void 0 : shouldFitContent ? measuredRootWidth : 0,
582
+ maxWidth: width ? void 0 : shouldFitContent ? "100%" : void 0
583
583
  },
584
584
  children: [
585
585
  /* @__PURE__ */ jsx(
@@ -666,7 +666,7 @@ function Typeahead({
666
666
  placeholder,
667
667
  variant,
668
668
  inputSize: resolvedInputSize,
669
- width: shouldFitContent ? void 0 : width != null ? width : inputProps == null ? void 0 : inputProps.width,
669
+ width: width != null ? width : shouldFitContent ? void 0 : inputProps == null ? void 0 : inputProps.width,
670
670
  autoComplete: (_a2 = autoComplete != null ? autoComplete : inputProps == null ? void 0 : inputProps.autoComplete) != null ? _a2 : "off",
671
671
  autoCorrect: (_b2 = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b2 : "off",
672
672
  autoCapitalize: (_c = autoCapitalize != null ? autoCapitalize : inputProps == null ? void 0 : inputProps.autoCapitalize) != null ? _c : "none",
package/dist/components/headline/CollapsibleHeadline.cjs CHANGED
@@ -20,7 +20,7 @@ function CollapsibleHeadline({
20
20
  controls,
21
21
  addition,
22
22
  storageKey,
23
- defaultExpanded = false,
23
+ defaultExpanded = true,
24
24
  children,
25
25
  size = 2,
26
26
  variant = "muted",
package/dist/components/headline/CollapsibleHeadline.d.ts CHANGED
@@ -13,13 +13,12 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
13
13
  addition?: React.ReactNode;
14
14
  /**
15
15
  * When set in uncontrolled mode, the component persists its expanded
16
- * state to localStorage under this key. The server render still starts
17
- * collapsed to stay hydration-safe.
16
+ * state to localStorage under this key.
18
17
  */
19
18
  storageKey?: string;
20
19
  /**
21
20
  * Initial expanded state when uncontrolled and no persisted storageKey
22
- * value exists yet. Defaults to false.
21
+ * value exists yet. Defaults to true.
23
22
  */
24
23
  defaultExpanded?: boolean;
25
24
  }
package/dist/components/headline/CollapsibleHeadline.js CHANGED
@@ -14,7 +14,7 @@ function CollapsibleHeadline({
14
14
  controls,
15
15
  addition,
16
16
  storageKey,
17
- defaultExpanded = false,
17
+ defaultExpanded = true,
18
18
  children,
19
19
  size = 2,
20
20
  variant = "muted",
package/dist/hooks/useDeviceSize.cjs CHANGED
@@ -13,11 +13,9 @@ function getDeviceSize(width) {
13
13
  return "desktop";
14
14
  }
15
15
  function useDeviceSize() {
16
- const [deviceSize, setDeviceSize] = react.useState(() => {
17
- if (typeof window === "undefined") return "desktop";
18
- return getDeviceSize(window.innerWidth);
19
- });
16
+ const [deviceSize, setDeviceSize] = react.useState("desktop");
20
17
  react.useEffect(() => {
18
+ setDeviceSize(getDeviceSize(window.innerWidth));
21
19
  const mediaQueries = [
22
20
  window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 1}px)`),
23
21
  window.matchMedia(
package/dist/hooks/useDeviceSize.js CHANGED
@@ -11,11 +11,9 @@ function getDeviceSize(width) {
11
11
  return "desktop";
12
12
  }
13
13
  function useDeviceSize() {
14
- const [deviceSize, setDeviceSize] = useState(() => {
15
- if (typeof window === "undefined") return "desktop";
16
- return getDeviceSize(window.innerWidth);
17
- });
14
+ const [deviceSize, setDeviceSize] = useState("desktop");
18
15
  useEffect(() => {
16
+ setDeviceSize(getDeviceSize(window.innerWidth));
19
17
  const mediaQueries = [
20
18
  window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 1}px)`),
21
19
  window.matchMedia(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.159",
3
+ "version": "0.0.161",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",