@cloudflare/component-listbox - npm Package Compare versions

Comparing version 1.7.12 to 1.8.0

CHANGELOG.md

 # Change Log
 
+## 1.8.0
+
+### Minor Changes
+
+- a193969c3f: Add compact prop
+- 8dfd2c3a82: Added inline property to Listbox.
+
+### Patch Changes
+
+- 5768789705: Adjust compact height
+
 ## 1.7.12
@@ -4,0 +15,0 @@

dist/components/common.d.ts

@@ -8,6 +8,20 @@ import { ThemeProp } from '@cloudflare/style-container';
     disabled?: boolean;
+    inline?: boolean;
+    compact?: boolean;
 }
-export declare const getCommonSelectStyles: ({ theme, isOpen, hasSelectedItem, invalid, isHovered, disabled }: CommonSelectProps & {
+export declare const getCommonSelectStyles: ({ theme, isOpen, hasSelectedItem, invalid, isHovered, disabled, inline, compact }: CommonSelectProps & {
     theme: ThemeProp['theme'];
 }) => {
+    marginLeft?: string | undefined;
+    marginRight?: string | undefined;
+    '&:hover': {
+        borderColor?: string | undefined;
+    } | {
+        backgroundColor: string;
+    };
+    '&:active': {
+        borderColor?: string | undefined;
+    } | {
+        backgroundColor: string;
+    };
     color: string;
@@ -25,8 +39,2 @@ borderColor: string;
     borderRadius: any;
-    '&:hover': {
-        borderColor?: string | undefined;
-    };
-    '&:active': {
-        borderColor?: string | undefined;
-    };
     '&::placeholder': {
@@ -48,4 +56,5 @@ color: string;
 };
-export declare const getDropdownArrowStyles: ({ theme }: {
+export declare const getDropdownArrowStyles: ({ theme, inline }: {
     theme: ThemeProp['theme'];
+    inline?: boolean | undefined;
 }) => {
@@ -63,3 +72,4 @@ '&::after': {
         transform: string;
+        marginTop: string;
     };
 };

dist/components/DropdownIndicator.d.ts

@@ -7,3 +7,2 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     form?: string | undefined;
@@ -13,2 +12,3 @@ slot?: string | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[] | undefined;
@@ -57,3 +57,3 @@ defaultChecked?: boolean | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -104,3 +104,3 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-valuetext'?: string | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
     autoFocus?: boolean | undefined;
@@ -107,0 +107,0 @@ formAction?: string | undefined;

dist/components/NoResultsText.d.ts

@@ -5,6 +5,6 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -52,3 +52,3 @@ defaultValue?: string | number | readonly string[] | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -55,0 +55,0 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;

dist/components/ScreenReaderOnlyLabel.d.ts

@@ -9,3 +9,2 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     form?: string | undefined;
@@ -15,2 +14,3 @@ slot?: string | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -58,3 +58,3 @@ defaultValue?: string | number | readonly string[] | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -61,0 +61,0 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;

dist/components/SelectInput.d.ts

@@ -7,4 +7,2 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    capture?: string | boolean | undefined;
-    children?: import("react").ReactNode;
     form?: string | undefined;
@@ -15,2 +13,3 @@ slot?: string | undefined;
     pattern?: string | undefined;
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[] | undefined;
@@ -59,3 +58,3 @@ defaultChecked?: boolean | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -120,2 +119,3 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     accept?: string | undefined;
+    capture?: string | boolean | undefined;
     checked?: boolean | undefined;
@@ -365,2 +365,4 @@ list?: string | undefined;
     isHovered?: boolean | undefined;
+    inline?: boolean | undefined;
+    compact?: boolean | undefined;
     innerRef?: import("react").Ref<HTMLInputElement> | undefined;
@@ -367,0 +369,0 @@ gridColumnSpan?: number | number[] | "end" | "all" | undefined;

dist/components/SelectMenu.d.ts

@@ -5,6 +5,6 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -52,3 +52,3 @@ defaultValue?: string | number | readonly string[] | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -55,0 +55,0 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;

dist/components/SelectOption.d.ts

@@ -11,6 +11,6 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[] | undefined;
@@ -59,3 +59,3 @@ defaultChecked?: boolean | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -62,0 +62,0 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;

dist/components/SelectToggle.d.ts

@@ -7,3 +7,2 @@ /// <reference types="react" />
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     form?: string | undefined;
@@ -13,2 +12,3 @@ slot?: string | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[] | undefined;
@@ -57,3 +57,3 @@ defaultChecked?: boolean | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
@@ -104,3 +104,3 @@ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-valuetext'?: string | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
     autoFocus?: boolean | undefined;
@@ -347,2 +347,4 @@ formAction?: string | undefined;
     isHovered?: boolean | undefined;
+    inline?: boolean | undefined;
+    compact?: boolean | undefined;
     innerRef?: import("react").Ref<HTMLButtonElement> | undefined;
@@ -349,0 +351,0 @@ gridColumnSpan?: number | number[] | "end" | "all" | undefined;

dist/Listbox.d.ts

@@ -34,2 +34,4 @@ /**
     listboxProps?: Partial<UseSelectProps<TSelectOption<Item>>>;
+    inline?: boolean;
+    compact?: boolean;
 };
@@ -36,0 +38,0 @@ export declare type ListboxProps<ItemType> = UnstyledListboxProps<ItemType> & Omit<React.ComponentProps<typeof Div>, 'onChange'>;

es/components/common.js

@@ -15,12 +15,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     isHovered,
-    disabled
+    disabled,
+    inline,
+    compact
   } = _ref;
   return _objectSpread(_objectSpread(_objectSpread({
     position: 'relative',
-    display: 'block',
-    width: '100%',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-    paddingLeft: '10px',
-    paddingRight: '24px',
+    display: inline ? 'inline-block' : 'block',
+    width: inline ? 'auto' : '100%',
+    paddingTop: compact ? '3px' : inline ? '6px' : '8px',
+    paddingBottom: compact ? '3px' : inline ? '6px' : '8px',
+    paddingLeft: inline ? '4px' : '10px',
+    paddingRight: inline ? '18px' : '24px',
     cursor: disabled ? 'default' : 'pointer',
@@ -33,3 +35,4 @@ textAlign: 'left',
     invalid,
-    disabled
+    disabled,
+    inline
   })), theme.mixins.focus({
@@ -41,7 +44,17 @@ invalid,
     color: hasSelectedItem ? theme.colors.gray[1] : theme.colors.gray[isDarkMode() ? 4 : 3]
-  });
+  }, inline ? {
+    marginLeft: '2px',
+    marginRight: '2px',
+    '&:hover': {
+      backgroundColor: theme.colors.button.plainMono.hover.background
+    },
+    '&:active': {
+      backgroundColor: theme.colors.button.plainMono.active.background
+    }
+  } : {});
 };
 export var getDropdownArrowStyles = _ref2 => {
   var {
-    theme
+    theme,
+    inline
   } = _ref2;
@@ -59,6 +72,7 @@ return {
       top: '50%',
-      right: '10px',
-      transform: 'translateY(-50%)'
+      right: inline ? '4px' : '10px',
+      transform: 'translateY(-50%)',
+      marginTop: '1px'
     }
   };
 };

es/components/SelectToggle.js

@@ -15,3 +15,5 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     invalid,
-    disabled
+    disabled,
+    inline,
+    compact
   } = _ref;
@@ -23,6 +25,9 @@ return _objectSpread(_objectSpread({}, getCommonSelectStyles({
     invalid,
-    disabled
+    disabled,
+    inline,
+    compact
   })), getDropdownArrowStyles({
-    theme
+    theme,
+    inline
   }));
 }, 'button');

es/Listbox.js

@@ -1,2 +0,2 @@
-var _excluded = ["value", "options", "onChange", "placeholder", "optionRenderer", "formatSelectedValue", "disabled", "invalid", "testId", "className", "listboxProps", "labelledBy"];
+var _excluded = ["value", "options", "onChange", "placeholder", "optionRenderer", "formatSelectedValue", "disabled", "invalid", "testId", "className", "listboxProps", "labelledBy", "inline", "compact"];
 
@@ -46,2 +46,3 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { createStyledComponent } from '@cloudflare/style-container';
+import { Div } from '@cloudflare/elements';
 import { SelectToggle, SelectMenu, SelectOption } from './components';
@@ -63,3 +64,5 @@ import { defaultItemToString, getOptionFromValue } from './utils/option-formatters';
     listboxProps,
-    labelledBy
+    labelledBy,
+    inline,
+    compact
   } = _ref,
@@ -104,5 +107,6 @@ htmlButtonProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Div, {
     className: className,
-    "data-testid": testId
+    "data-testid": testId,
+    display: inline ? 'inline-block' : undefined
   }, /*#__PURE__*/React.createElement(SelectToggle, _extends({}, toggleButtonProps, {
@@ -112,3 +116,5 @@ isOpen: isOpen,
     invalid: invalid,
-    "aria-required": null
+    "aria-required": null,
+    inline: inline,
+    compact: compact
   }), selectedValue || placeholder || /*#__PURE__*/React.createElement(Trans, {
@@ -140,3 +146,5 @@ id: "common.select_placeholder",
   var {
-    theme
+    theme,
+    inline,
+    compact
   } = _ref3;
@@ -147,3 +155,3 @@ return {
     textAlign: 'left',
-    marginRight: 2
+    marginRight: compact || inline ? 0 : 2
   };
@@ -150,0 +158,0 @@ }, UnstyledListbox);

lib/components/common.js

@@ -22,11 +22,13 @@ "use strict";
       isHovered = _ref.isHovered,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      inline = _ref.inline,
+      compact = _ref.compact;
   return _objectSpread(_objectSpread(_objectSpread({
     position: 'relative',
-    display: 'block',
-    width: '100%',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-    paddingLeft: '10px',
-    paddingRight: '24px',
+    display: inline ? 'inline-block' : 'block',
+    width: inline ? 'auto' : '100%',
+    paddingTop: compact ? '3px' : inline ? '6px' : '8px',
+    paddingBottom: compact ? '3px' : inline ? '6px' : '8px',
+    paddingLeft: inline ? '4px' : '10px',
+    paddingRight: inline ? '18px' : '24px',
     cursor: disabled ? 'default' : 'pointer',
@@ -39,3 +41,4 @@ textAlign: 'left',
     invalid: invalid,
-    disabled: disabled
+    disabled: disabled,
+    inline: inline
   })), theme.mixins.focus({
@@ -47,3 +50,12 @@ invalid: invalid,
     color: hasSelectedItem ? theme.colors.gray[1] : theme.colors.gray[(0, _styleConst.isDarkMode)() ? 4 : 3]
-  });
+  }, inline ? {
+    marginLeft: '2px',
+    marginRight: '2px',
+    '&:hover': {
+      backgroundColor: theme.colors.button.plainMono.hover.background
+    },
+    '&:active': {
+      backgroundColor: theme.colors.button.plainMono.active.background
+    }
+  } : {});
 };
@@ -54,3 +66,4 @@
 var getDropdownArrowStyles = function getDropdownArrowStyles(_ref2) {
-  var theme = _ref2.theme;
+  var theme = _ref2.theme,
+      inline = _ref2.inline;
   return {
@@ -67,4 +80,5 @@ '&::after': {
       top: '50%',
-      right: '10px',
-      transform: 'translateY(-50%)'
+      right: inline ? '4px' : '10px',
+      transform: 'translateY(-50%)',
+      marginTop: '1px'
     }
@@ -71,0 +85,0 @@ };

lib/components/SelectToggle.js

@@ -23,3 +23,5 @@ "use strict";
       invalid = _ref.invalid,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      inline = _ref.inline,
+      compact = _ref.compact;
   return _objectSpread(_objectSpread({}, (0, _common.getCommonSelectStyles)({
@@ -30,7 +32,10 @@ theme: theme,
     invalid: invalid,
-    disabled: disabled
+    disabled: disabled,
+    inline: inline,
+    compact: compact
   })), (0, _common.getDropdownArrowStyles)({
-    theme: theme
+    theme: theme,
+    inline: inline
   }));
 }, 'button');
 exports.SelectToggle = SelectToggle;

lib/Listbox.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _elements = require("@cloudflare/elements");
+
 var _components = require("./components");
@@ -23,3 +25,3 @@
 
-var _excluded = ["value", "options", "onChange", "placeholder", "optionRenderer", "formatSelectedValue", "disabled", "invalid", "testId", "className", "listboxProps", "labelledBy"];
+var _excluded = ["value", "options", "onChange", "placeholder", "optionRenderer", "formatSelectedValue", "disabled", "invalid", "testId", "className", "listboxProps", "labelledBy", "inline", "compact"];
 
@@ -56,2 +58,4 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
       labelledBy = _ref.labelledBy,
+      inline = _ref.inline,
+      compact = _ref.compact,
       htmlButtonProps = _objectWithoutProperties(_ref, _excluded);
@@ -94,5 +98,6 @@
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(_elements.Div, {
     className: className,
-    "data-testid": testId
+    "data-testid": testId,
+    display: inline ? 'inline-block' : undefined
   }, /*#__PURE__*/React.createElement(_components.SelectToggle, _extends({}, toggleButtonProps, {
@@ -102,3 +107,5 @@ isOpen: isOpen,
     invalid: invalid,
-    "aria-required": null
+    "aria-required": null,
+    inline: inline,
+    compact: compact
   }), selectedValue || placeholder || /*#__PURE__*/React.createElement(_intlReact.Trans, {
@@ -129,3 +136,5 @@ id: "common.select_placeholder",
 var StyledListbox = (0, _styleContainer.createStyledComponent)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+      inline = _ref3.inline,
+      compact = _ref3.compact;
   return {
@@ -135,3 +144,3 @@ position: 'relative',
     textAlign: 'left',
-    marginRight: 2
+    marginRight: compact || inline ? 0 : 2
   };
@@ -138,0 +147,0 @@ }, UnstyledListbox);

package.json

 {
   "name": "@cloudflare/component-listbox",
   "description": "",
-  "version": "1.7.12",
+  "version": "1.8.0",
   "main": "lib/index.js",
@@ -24,3 +24,3 @@ "module": "es/index.js",
   "devDependencies": {
-    "@cloudflare/style-const": "^5.3.14",
+    "@cloudflare/style-const": "^5.5.0",
     "@cloudflare/style-container": "^7.10.0",
@@ -27,0 +27,0 @@ "@cloudflare/style-provider": "^3.0.0",

src/components/common.ts

@@ -10,2 +10,4 @@ import { ThemeProp } from '@cloudflare/style-container';
   disabled?: boolean;
+  inline?: boolean;
+  compact?: boolean;
 }
@@ -19,11 +21,13 @@
   isHovered,
-  disabled
+  disabled,
+  inline,
+  compact
 }: CommonSelectProps & { theme: ThemeProp['theme'] }) => ({
   position: 'relative',
-  display: 'block',
-  width: '100%',
-  paddingTop: '8px',
-  paddingBottom: '8px',
-  paddingLeft: '10px',
-  paddingRight: '24px',
+  display: inline ? 'inline-block' : 'block',
+  width: inline ? 'auto' : '100%',
+  paddingTop: compact ? '3px' : inline ? '6px' : '8px',
+  paddingBottom: compact ? '3px' : inline ? '6px' : '8px',
+  paddingLeft: inline ? '4px' : '10px',
+  paddingRight: inline ? '18px' : '24px',
   cursor: disabled ? 'default' : 'pointer',
@@ -34,3 +38,3 @@ textAlign: 'left',
   textOverflow: 'ellipsis',
-  ...theme.mixins.input({ invalid, disabled }),
+  ...theme.mixins.input({ invalid, disabled, inline }),
   ...theme.mixins.focus({
@@ -41,11 +45,26 @@ invalid,
   }),
+
   color: hasSelectedItem
     ? theme.colors.gray[1]
-    : theme.colors.gray[isDarkMode() ? 4 : 3]
+    : theme.colors.gray[isDarkMode() ? 4 : 3],
+  ...(inline
+    ? {
+        marginLeft: '2px',
+        marginRight: '2px',
+        '&:hover': {
+          backgroundColor: theme.colors.button.plainMono.hover.background
+        },
+        '&:active': {
+          backgroundColor: theme.colors.button.plainMono.active.background
+        }
+      }
+    : {})
 });
 
 export const getDropdownArrowStyles = ({
-  theme
+  theme,
+  inline
 }: {
   theme: ThemeProp['theme'];
+  inline?: boolean;
 }) => ({
@@ -62,5 +81,6 @@ '&::after': {
     top: '50%',
-    right: '10px',
-    transform: 'translateY(-50%)'
+    right: inline ? '4px' : '10px',
+    transform: 'translateY(-50%)',
+    marginTop: '1px'
   }
 });

No alert changes

Improved metrics

Total package byte prevSize

433069

increased by0.76%

Lines of code

5354

increased by1.92%

Published versions last year

35

increased by2.94%

No dependency changes