@mrshmllw/smores-react 4.0.1 → 6.0.0

package/dist/Dropdown/Dropdown.js

@@ -1,58 +1,107 @@
-import React, { forwardRef, useMemo, } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { Icon } from '../Icon';
-import { Field } from '../fields/Field';
-import { useUniqueId } from '../utils/id';
-import { useControllableState } from '../utils/useControlledState';
-import { Box } from '../Box';
-import { StyledFrontIcon } from '../fields/components/CommonInput';
-export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, fallbackStyle, ...fieldProps }, ref) {
-    const [value, setValue] = useControllableState({
-        initialState: defaultValue,
-        stateProp: valueProp,
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Field } from '../fields/Field/Field.js';
+import { StyledFrontIcon } from '../fields/components/CommonInput.js';
+import { theme } from '../theme.js';
+import { useUniqueId } from '../utils/id.js';
+import { useControllableState } from '../utils/useControlledState.js';
+
+const Dropdown = forwardRef(function Dropdown2({
+  id: idProp,
+  placeholder,
+  showDefaultOption = false,
+  customDefaultOption,
+  name,
+  value: valueProp,
+  defaultValue,
+  disabled = false,
+  list,
+  onSelect,
+  error = false,
+  onInputChange,
+  onBlur,
+  frontIcon,
+  fallbackStyle,
+  ...fieldProps
+}, ref) {
+  const [value, setValue] = useControllableState({
+    initialState: defaultValue,
+    stateProp: valueProp
+  });
+  const id = useUniqueId(idProp);
+  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1;
+  const dropdownItemsGroups = useMemo(() => {
+    const itemsPerGroupLabel = /* @__PURE__ */ new Map();
+    list.forEach((item) => {
+      const key = item.optionGroupLabel ?? "";
+      const group = itemsPerGroupLabel.get(key) ?? [];
+      group.push(item);
+      itemsPerGroupLabel.set(key, group);
     });
-    const id = useUniqueId(idProp);
-    const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1;
-    const dropdownItemsGroups = useMemo(() => {
-        const itemsPerGroupLabel = new Map();
-        list.forEach((item) => {
-            const key = item.optionGroupLabel ?? '';
-            const group = itemsPerGroupLabel.get(key) ?? [];
-            group.push(item);
-            itemsPerGroupLabel.set(key, group);
-        });
-        return Array.from(itemsPerGroupLabel.values());
-    }, [list]);
-    const defaultOptionLabel = () => {
-        if (!showDefaultOption) {
-            return placeholder;
-        }
-        return customDefaultOption ?? 'Select an option';
-    };
-    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            frontIcon && (React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" })),
-            React.createElement(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
-                    const value = event.currentTarget.value;
-                    onSelect?.(value);
-                    onInputChange?.(event);
-                    setValue(value);
-                }, error: error, ref: ref, onBlur: onBlur, name: name, frontIcon: frontIcon, fallbackStyle: fallbackStyle, value: value ? value : '' },
-                hasOptGroups ? (React.createElement("optgroup", { label: defaultOptionLabel() },
-                    React.createElement("option", { value: "", hidden: !showDefaultOption }, defaultOptionLabel()))) : (React.createElement("option", { value: "", hidden: !showDefaultOption }, defaultOptionLabel())),
-                dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (React.createElement("optgroup", { key: i, label: groupItems[0].optionGroupLabel ?? 'Other' }, groupItems.map((el, j) => (React.createElement("option", { key: `${i}-${j}`, value: el.value }, el.label))))) : (groupItems.map((el, j) => (React.createElement("option", { key: j, value: el.value }, el.label)))))),
-            React.createElement(Caret, null,
-                React.createElement(Icon, { render: "caret", color: "marzipan", size: 24 })))));
+    return Array.from(itemsPerGroupLabel.values());
+  }, [list]);
+  const defaultOptionLabel = () => {
+    if (!showDefaultOption) {
+      return placeholder;
+    }
+    return customDefaultOption ?? "Select an option";
+  };
+  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+    frontIcon && /* @__PURE__ */ jsx(
+      StyledFrontIcon,
+      {
+        disabled,
+        render: frontIcon,
+        color: "sesame"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      StyledSelect,
+      {
+        id,
+        disabled: disabled || list.length < 1,
+        onChange: (event) => {
+          const value2 = event.currentTarget.value;
+          onSelect?.(value2);
+          onInputChange?.(event);
+          setValue(value2);
+        },
+        error,
+        ref,
+        onBlur,
+        name,
+        frontIcon,
+        fallbackStyle,
+        value: value ? value : "",
+        children: [
+          hasOptGroups ? /* @__PURE__ */ jsx("optgroup", { label: defaultOptionLabel(), children: /* @__PURE__ */ jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }) }) : /* @__PURE__ */ jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }),
+          dropdownItemsGroups.map(
+            (groupItems, i) => hasOptGroups ? /* @__PURE__ */ jsx(
+              "optgroup",
+              {
+                label: groupItems[0].optionGroupLabel ?? "Other",
+                children: groupItems.map((el, j) => /* @__PURE__ */ jsx("option", { value: el.value, children: el.label }, `${i}-${j}`))
+              },
+              i
+            ) : groupItems.map((el, j) => /* @__PURE__ */ jsx("option", { value: el.value, children: el.label }, j))
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Caret, { children: /* @__PURE__ */ jsx(Icon, { render: "caret", color: "marzipan", size: 24 }) })
+  ] }) });
 });
-const resetSelect = css `
+const resetSelect = css`
   border: none;
   border-radius: 0;
   font-size: 16px;
   appearance: none; /* remove default arrow */
   outline: none;
 `;
-const StyledSelect = styled.select `
+const StyledSelect = styled.select`
   ${resetSelect}
   width: 100%;
   height: 32px;
@@ -63,12 +112,10 @@ const StyledSelect = styled.select `
   border-radius: 12px;
   padding: 18px 14px;
   border: 2px solid
-    ${({ error }) => (error ? theme.colors.strawberry : theme.colors.oatmeal)};
+    ${({ error }) => error ? theme.colors.strawberry : theme.colors.oatmeal};
   height: auto;
 
-  ${({ frontIcon }) => frontIcon &&
-    frontIcon != '' &&
-    `
+  ${({ frontIcon }) => frontIcon && frontIcon != "" && `
       padding-left: 42px;
     `}
 
@@ -77,8 +124,7 @@ const StyledSelect = styled.select `
     opacity: 0.5;
   }
 
-  ${({ error }) => !error &&
-    css `
+  ${({ error }) => !error && css`
       :not(:disabled) {
         &:hover,
         &:focus,
@@ -88,11 +134,12 @@ const StyledSelect = styled.select `
       }
     `}
 `;
-const Caret = styled.div `
+const Caret = styled.div`
   position: absolute;
   z-index: 1;
   right: 15px;
   pointer-events: none;
   color: ${theme.colors.marzipan};
 `;
-//# sourceMappingURL=Dropdown.js.map
+
+export { Dropdown };

package/dist/Emoji/Emoji.js

@@ -1,8 +1,29 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-export const Emoji = ({ className = '', symbol, size = 12, label, ...marginProps }) => (React.createElement(Container, { as: "span", className: className, size: size, role: "img", "aria-label": label, ...marginProps }, symbol));
-const Container = styled(Box)(({ size }) => css `
+import { Box } from '../Box/Box.js';
+
+const Emoji = ({
+  className = "",
+  symbol,
+  size = 12,
+  label,
+  ...marginProps
+}) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    as: "span",
+    className,
+    size,
+    role: "img",
+    "aria-label": label,
+    ...marginProps,
+    children: symbol
+  }
+);
+const Container = styled(Box)(
+  ({ size }) => css`
     font-size: ${size}px;
-  `);
-//# sourceMappingURL=Emoji.js.map
+  `
+);
+
+export { Emoji };

package/dist/Icon/Icon.d.ts

@@ -1,17 +1,12 @@
 import { FC } from 'react';
 import { MarginProps } from '../utils/space';
 import { Color } from '../theme';
-/**
- * When adding a new Icon please remember to also add it
- * to the Container.jsx to keep our Icons Collection up to date.
- *
- * Icons in the collection are alphabetically ordered.
- */
+import { Icons } from './iconsList';
 export type IconProps = {
     /** className attribute to apply classes from props */
     className?: string;
     /** specify what Icon to render  */
-    render: string;
+    render: Icons;
     /** set size of the Icon  */
     size?: number;
     /** set color of the Icon */