@hopper-ui/components 1.2.1 → 1.3.0

package/dist/chunk-YB7IYQW4.js

@@ -0,0 +1,118 @@
+import { useIsOverflow } from './chunk-EHXOXTDN.js';
+import { useLocalizedString } from './chunk-TFVDF4YH.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { _Text } from './chunk-D5PBETXF.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
+import { forwardRef, useRef, useContext } from 'react';
+import { useContextProps, SelectValueContext, SelectStateContext, useSlottedContext, SelectContext, composeRenderProps, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./SelectValue.module.css#css-module
+var SelectValue_module_default = { "hop-SelectValue": "SelectValue-module__hop-SelectValue___vmhD5", "hop-SelectValue__avatar": "SelectValue-module__hop-SelectValue__avatar___LzO40", "hop-SelectValue__icon": "SelectValue-module__hop-SelectValue__icon___2SitP", "hop-SelectValue__text": "SelectValue-module__hop-SelectValue__text___yJC6I", "hop-SelectValue__end-icon": "SelectValue-module__hop-SelectValue__end-icon___3K-em" };
+var GlobalSelectValueCssSelector = "hop-SelectValue";
+var SelectValueToAvatarSizeAdapter = {
+  sm: "xs",
+  md: "md"
+};
+function SelectValue(props, ref) {
+  var _a, _b, _c, _d;
+  [props, ref] = useContextProps(props, ref, SelectValueContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeProp,
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
+  const textRef = useRef(null);
+  const refForOverflowCheck = textRef.current ? textRef : ref;
+  const isOverflow = useIsOverflow(refForOverflowCheck);
+  const state = useContext(SelectStateContext);
+  const { placeholder } = useSlottedContext(SelectContext);
+  const selectedItem = (state == null ? void 0 : state.selectedKey) != null ? state.collection.getItem(state.selectedKey) : null;
+  const stringFormatter = useLocalizedString();
+  const textValue = (_b = state == null ? void 0 : state.selectedItem) == null ? void 0 : _b.textValue;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSelectValueCssSelector,
+    cssModule(
+      SelectValue_module_default,
+      "hop-SelectValue"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...otherProps,
+    className: classNames,
+    defaultChildren: textValue || placeholder || stringFormatter.format("Select.placeholder"),
+    style,
+    values: {
+      selectedItem: (_d = (_c = state == null ? void 0 : state.selectedItem) == null ? void 0 : _c.value) != null ? _d : null,
+      selectedText: textValue != null ? textValue : null,
+      isPlaceholder: !selectedItem
+    }
+  });
+  const DOMProps = filterDOMProps(ownProps);
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+    _Text,
+    {
+      ref,
+      ...DOMProps,
+      ...renderProps,
+      size,
+      title: isOverflow ? textValue : void 0,
+      "data-placeholder": !selectedItem || void 0,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [AvatarContext, {
+              className: SelectValue_module_default["hop-SelectValue__avatar"],
+              size: SelectValueToAvatarSizeAdapter[size]
+            }],
+            [TextContext, {
+              slots: {
+                "label": {
+                  className: SelectValue_module_default["hop-SelectValue__text"],
+                  ref: textRef
+                }
+              }
+            }],
+            [IconContext, {
+              slots: {
+                [DEFAULT_SLOT]: {
+                  className: SelectValue_module_default["hop-SelectValue__icon"],
+                  size
+                },
+                "end-icon": {
+                  className: SelectValue_module_default["hop-SelectValue__end-icon"],
+                  size
+                }
+              }
+            }]
+          ],
+          children: renderProps.children
+        }
+      )
+    }
+  ) });
+}
+var _SelectValue = forwardRef(SelectValue);
+_SelectValue.displayName = "SelectValue";
+
+export { GlobalSelectValueCssSelector, _SelectValue };

package/dist/{chunk-TFELIWJO.js → chunk-ZHOQYYHY.js}

@@ -9,7 +9,7 @@ import { useContextProps, useSlottedContext, InputContext, TextAreaContext, Fiel
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./InputGroup.module.css#css-module
-var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___JGJFG", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___6JfQH", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___JoxWu", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___2VtDU", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___eOkGw" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___nX1AB", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___cl9VB", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___W9UwB", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___VIhOd", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___9H21Z" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a, _b;

package/dist/i18n/src/index.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-F4H76S4H.js';
+export { useLocalizedString } from '../../chunk-TFVDF4YH.js';
 import '../../chunk-JSBRDJBE.js';

package/dist/i18n/src/useLocalizedString.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-F4H76S4H.js';
+export { useLocalizedString } from '../../chunk-TFVDF4YH.js';
 import '../../chunk-JSBRDJBE.js';